뭐해먹고사나
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) 을 통해 다양한 처리를 할수 있다.
'본업 > Javascript ES6' 카테고리의 다른 글
ES6 문법 var, let, const 차이와 실질적인 예 (0) | 2020.02.07 |
---|
Comments