Spread Operator란?

Spread Operator라고 해서 ...을 이용하며 스프레드 오퍼레이터, 스프레드 연산자라고 불린다.
ES^에서 새롭게 추가된 내용으로 연결, 복사 등에 활용도가 높다.

배열 병합

기존에서는 배열을 결합하는데 있어 concat 메서드를 많이 사용했다. spread 연산자를 이용하면 더 깔끔한 병합이 된다.

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

let newArr = arr1.concat(arr2); 
console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

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

배열 복사

spread연산자는 얕은 복사를 한다.
✨배열은 복사되지만 배열 안에있는 객체는 원본 값을 참조한다. 복사한 배열의 객체 값을 변경하면 참조하고 있는 원본 배열의 객체 값도 변경된다.
하지만 새로운 객체를 추가하면 복사한 배열에만 변경이된다. (원본배열에서 참조값이 없기 때문)

배열의 값을 변경했을 경우

📍 배열의 값만 있을 때와 배열 안에 객체가 있을 때랑 헷갈리면 안된다!

// ES6 spread operator
let arr1 = ['han','wheezy']; 
let arr2 = [...arr1]; 

arr2.push('coding'); 

// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]
console.log(arr2); // [ "han", "wheezy", "coding" ]

// ES6 spread operator
let arr1 = ['han','wheezy']; 
let arr2 = [...arr1]; 

arr1[0] = "hello"

console.log(arr1); // [ "han", "wheezy", "coding" ]
// 복사된 배열은 변경되지 않습니다.
console.log(arr2); // [ "han", "wheezy" ]

원본 배열의 객체 값을 변경했을 경우

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr1[0].name = 'lee';

console.log(arr1); // [{name: 'lee', age: 10}]
console.log(arr2); // [{name: 'lee', age: 10}]

복사된 배열에 새로운 객체를 추가했을 경우

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr2.push({name2: 'han2', age: 20})

console.log(arr1); // [{name: 'han', age: 10}]
console.log(arr2); // [{name: 'han', age: 10}, {name2: 'han2', age: 20}]

복사된 배열에 새로운 key, value값을 추가했을 경우(원본 참조값에)

let arr1 = [{name: 'han', age: 10}]; 
let arr2 = [...arr1]; 

arr2[0]["city"] = "seoul";

console.log(arr1); // [{name: 'han', age: 10, city: 'seoul'}]
console.log(arr2); // [{name: 'han', age: 10, city: 'seoul'}]

slice 혹은 ES5 map일 때

만약 배열 참조가 아닌 복사를 위해서는 기존의 slice 혹은 ES5 map을 이용하면 된다.

// Javascript array 복사
let arr1 = ['han','wheezy']; 
let arr2 = arr1.slice();

arr2.push('coding'); 
console.log(arr2); // [ "han", "wheezy", "coding" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]


// ES5 map 
let arr1 = ['han','wheezy']; 
let arr2 = arr1.map((item) => item);

arr2.push('coding'); 
console.log(arr2); // [ "han", "wheezy", "coding" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "han", "wheezy" ]

참고

• https://paperblock.tistory.com/62