ES6 spread 연산자 { ...} 에 대해 알아보자 (객체/배열 복제, 병합, 일부만 수정)

1. 배열의 복제 

 

배열을 복제하려 할때 기존 ES5문법에서는 아래와 같이 반복문을 통해 일일히 값을 넣어줘야했다. 

var array = [1,2,3,4,5]; 

var newArray = []; 

for( var i = 0; i <array.length; i++) {
	newArray[i] = array[i];
}

위와 동일한 로직을 ES6의 spread  연산자를 통해 간편하게 배열을 복제할 수 있다. 

const array = [1,2,3,4,5]; 

const newArray = [...array];

 

* 여기서 복제는 Reference 복사가 아닌 값 복사로  newArray에서 변경을 해도 기존 array는 변경이 없다. 

 

2. 배열 병합

const arrayA = [1,2,3]; 
const arrayB = [4,5,6];

const arrayC = [...arrayA, ...arrayB]; 
console.log(arrayC); // [1,2,3,4,5,6]; 

 

3. 객체에서도 동일  

const objA = { a:1, b:2 };
const objB = {...objA}; 

console.log(objB); // {a:1, b:2} 

 

4. 특정 값만 변경하기 

주로 React 에서 state 관리할때 불변성을 유지하며 객체중 일부만 update 를 해야할 때 쓰인다. 

const objA = { a:1, b:2, c:3 };
const objB = { ...objA, b:4 }; //objA복제후, b속성만 덮어쓰기 

console.log(objB); // {a:1, b:4, c:3}

 

더 깊은 값을 변경할 수 도 있다. 

아래 object 에서 깊숙히 위치한 target 값만 변경하고 싶다면, 

target의 부모인  object.a , object.a.b 를 써주면서 들어가서 변경하면된다.  

그밖의 c, d,e 는 건들이지 않는 부분이므로 ... 연산자를 통해 써준다. 

 

const object = {
    a : {
        b: {
            target : 123,
            c : "cc"
        },
        d : "dd"
    },
    e : "ee"
}

// a,b,c,d,e 는 그대로 두고 target만 변경

const newObject = {
     ...object,
     a : {
         ...object.a,
         b : {
             ...object.a.b,
             target : 456
         }
     }
};
          

 

객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다.