[JS] 전개 연산자

 

객체나 배열을 펼쳐내는 전개 연산자

 

전개 구문은 문법 이름 그대로 객체 혹은 배열들을 펼치는 것을 의미하며,

배열이나 객체 앞에 점 3개를 붙여주면 되며, 펼쳐진 객체나 배열을 담을 바구니가 필요

 

// 펼칠 대상이 객체인 경우
{...obj}

// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

 

기존 ES5에서는 concat을 사용하여 배열을 합쳤다면, ES6에서는 전개 연산자를 활용하여 배열을 합칠 수 있다

 

[펼칠 대상이 배열인 경우]

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, [8, 9]];
const result = [...arr1, ...arr2, ...arr3];

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

- 전개 연산자를 이용한 복사는 1차원에서만 유효하기 때문에 2차원이 포함되어 있다면 2차원 이상의 배열은 그대로 들어간다는 점을 참고해야 함

 

[펼칠 대상이 객체인 경우]

const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject1 === myObject2); // false

const myObject3 = {
    ...myObject1,
    phone: 'Galaxy Note 10'
};

console.log(myObject3); // {laptop: "MacBook Pro", tablet: "iPad Pro 11", phone: "Galaxy Note 10"}

- 이를 리액트에서 사용하게 된다면, 각각 하나 하나는 key와 value로서 laptop과 tablet를 각각 가져올 수 있게됨

- 위는 동일한 프로터피를 갖게 되지만 주소값이 다른 독립적인 객체임을 알아야 함

- 전개 연산자를 사용해 프로퍼티를 복사해 오면서 추가로 프로퍼티 작성도 가능함