[javascript]구조분해할당과 spread,rest

 

1. 배열의 요소를 직접 변수에 할당하는 것보다 코드를 줄일 수 있습니다.

 

2.  , 를 사용하면 필요하지 않는 배열 요소는 제외시킬 수 있습니다

 

3. 할당할 값이 없을 때 기본값을 설정할 수 있음.

 

1. 배열구조분해할당

구문

let [new변수1, new변수2, new변수3] = 배열명

 

let fruits = ["🤦‍♂️", "🤦", "😁", "😢", "😎",]

let [fruit1, fruit2, ...fruit3] = fruits;
console.log(fruit1);
//0번째 새로운 변수 출력
console.log(fruit2);
//1번째 새로운 변수 출력
console.log(fruit3);
//3번째 끝까지 새로운 변수 출력

let str1 = "green";
let str2 = "blue";
[str1, str2] = [str2, str1];
//배열 위치를 서로 바꿔줌
console.log(str1);
//blue가 출력됨
console.log(str2);
//green가 출력됨

let strs = ["a", "b", "c"];
let [str3,,str4] = strs;
//공란은 변환값 무시
console.log(str4);
//c값이 출력됨

let [name = prompt("이름을 입력하세요"), hobby = prompt("취미를 입력하세요")] = ["green"];
console.log(name);
//['green']정해놨기때문에 prompt 알람이 뜨지 않고 green으로 나옴
console.log(hobby);
//hobby prompt 알람에 입력값넣으면 입력값으로 나옴

 

 

2. 객체구조분해할당

구문

let {new변수1, new변수2, new변수3} = 객체명

let obj1 = {
    name: "green",
    age: 30,
    hasJob : true
}

let {name:n, age:a, hasJob} = obj1;
console.log(n);
//n변수에 name값 할당/출력
console.log(a);
//a변수에 age값 할당/출력
console.log(hasJob);
//true값 출력
        
let obj2 = {
    name: "a",
    width: 200,
    height: 100
}
let { name, ...rest} = obj2;
console.log(rest);
//name을 제외한 나머지 프로퍼티값들을 들고온다
function myFunc ({name, width, height}) {
    //obj2를 구조분해하고 함수 매개변수에 새로만든 변수를 넣어줌
    console.log(name);
    //a출력
    console.log(width);
    //200출력
    console.log(height);
    //100출력
}

myFunc(obj2.name, obj2.width, obj2.height)

 

스프레드(spared )연산자

펼치다,퍼뜨리다 이 문법을 사용하면 객체와 배열을 펼칠 수 있습니다.

키워드는 "..." ex)...arr 

 

배열 스프레드 예시

let fruits = ["🤦‍♂️", "🤦", "😁", "😢", "😎",]

let [fruit1, fruit2, ...fruit3] = fruits;
console.log(fruit1);
//0번째 새로운 변수 출력
console.log(fruit2);
//1번째 새로운 변수 출력
console.log(fruit3);
//3번째 끝까지 새로운 변수 출력 ["😁", "😢", "😎",]

 

객체 스프레드 예시

let obj1 = {
    name: "green",
    age: 30,
    hasJob : true
}
       
let obj2 = {
    ...obj1,
    height: 100
}

console.log(obj2)
//{name: "green",age: 30,hasJob : true, height: 100} 출력

 

rest연산자

객체, 배열, 함수의 파라미터에서 사용함(스프레드와 비슷해보이지만 다름)

키워드는 "..." ex)...arr

rest명 바꿀 수 있음 

 

객체 rest 예시 

let obj2 = {
    name: "a",
    width: 200,
    height: 100
}
let { name, ...rest} = obj2;
console.log(rest);
//{width: 200, height: 100} 출력

함수 rest 예시

let number = [1, 2, 3, 4, 5]

function num(...rest) {
	return rest.reduce((acc, cur) => acc + cur , 0);
}

console.log(num(...number))
//15출력

 

주의) rest문은 먼저 앞에 올수 없다 마지막에 적어줘야함(나머지값을 불러온다)

 

reduce메서드

2022.12.14 - [javascript 내장객체] - Array 객체