전개 구문(Spread syntax)

📌 전개구문: 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [ …arr1, …arr2 ];
let result2 = [ 0, …arr1, …arr2, 7, 8, 9 ];

console.log(result); // [ 1, 2, 3, 4, 5, 6 ]
console.log(result2); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 

💡배열에서 넣고 빼고 병합하는 작업은 굉장히 번거롭지만, 전개구문을 사용하면 간편해진다.

📍 전개구문: 배열의 예제

• arr1을 [ 4, 5, 6, 1, 2, 3 ]으로 만들어 출력하기

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr2.forEach((num) => {
    arr1.unshift(num);
})

console.log(arr1); // [ 6, 5, 4, 1, 2, 3]

• 위 예제를 보면 첫 번째 요소부터 돌면서 unshift (앞에 삽입)된다.
• 때문에 올바른 결과 값을 얻기 위해 배열을 뒤집어 주어야 한다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr2.reverse().forEach((num) => {
    arr1.unshift(num);
})

console.log(arr1); // [ 4, 5, 6, 1, 2, 3 ]

• 위 예제는 forEach 등 굉장히 복잡하지만 전개 구문을 사용하면 간단하게 처리 할 수 있다.

let arr1 = [ 1, 2, 3 ];
let arr2 = [ 4, 5, 6 ];

arr1 = [ …arr2, …arr1 ];

console.log(arr1); // [ 4, 5, 6, 1, 2, 3 ]

📌 전개구문: 객체

let user = { name: ‘Mike’ }
let mike = { …user, 30 }

console.log(mike); // { name: ‘Mike’, age: 30 }

📌 전개구문: 복제

let arr1 = [1, 2, 3];
let arr2 = [ …arr1 ]; // [ 1, 2, 3 ]

let user1 = { name: ‘Mike’, age: 30 };
let user2 = { … user1 } // { name: ‘Mike’, age: 30 }

user2.name = “Tom”;

console.log(user1.name); // “Mike”
console.log(user2.name); // “Tom”

• 객체 복제시 Object.assign({}, …)를 쓸 필요가 없음.
• user2의 이름을 바꾸어도 user1에는 아무런 영향이 없다.

📍전개구문: 객체의 예제

let user = { name: ‘Mike’ };
let info = {  age: 30 };
let fe = [ “JS”, “React” ];
let lang = [ “Korean”, “English” ];

let result = Object.assign({}, user, info, {
    skill: []
    }
);

fe.forEach((front) => {
    result.skill.push(front);
})

lang.forEach((languege) => {
    result.skill.push(languge);
})

console.log(result); // { name: ‘Mike’, age: 30, skill: [ “JS”, “React”, “Korean”, “English” ]}

• 원래는 위와 같이 Object.assign에 forEach문 돌면서 배열로 넣음
• 아래 코드는 전개구문을 만을 이용하여 같은 동작을 배열

let user = { name: ‘Mike’ };
let info = {  age: 30 };
let fe = [ “JS”, “React” ];
let lang = [ “Korean”, “English” ];

let user1 = {
     …user,
     …info,
    skill: [
             …fe,
             …lang
             ]
}

console.log(user1); // { name: ‘Mike’, age: 30, skill: [ “JS”, “React”, “Korean”, “English” ] }