[ES6] Spread Syntax

1. Spread Syntax

 

(1)객체, 배열등을 복사

const obj1={key : 'key1'};
const obj2={key : 'key2'};
const array=[obj1, obj2];

const arrayCopy=[...array];
console.log(array, arrayCopy);

위와같이 array를 복사할시 const arrayCopy=[...array]; 이렇게 사용가능하다.

- ...은 배열, 객체 등의 안의 속성들의 각각을 의마한다.

 

 

 

 

(2)객체, 배열등을 복사2

const obj1={key : 'key1'};
const obj2={key : 'key2'};
const array=[obj1, obj2];

const arrayCopy2=[...array, {key:'key3'}];
console.log(array, arrayCopy2);

위의 코드처럼 카피할 배열에 추가해서 다른값들도 넣을 수 있다.

 

 

 

 

 

 

 

(2)객체, 배열등을 복사 주의점1

const obj1={key : 'key1'};
const obj2={key : 'key2'};
const array=[obj1, obj2];


const arrayCopy1=[...array,];
obj1.key='anoter key';

console.log(array, arrayCopy1);

spread operation은 값을 복사해 오는것이 아닌 객체의 참조값을 갖고오는것이다. 그래서

위의 코드 처럼 obj1.key='anoter key'; 이렇게 obj를 변경시 

위의 결과처럼 copy해온 값도 결과가 바뀌는걸 알 수 있다.

 

 

 

 

 

(2)객체, 배열등을 복사 주의점2

const dog1={dog: 'jindo'};
const dog2={dog : 'sabsal'};

const dogs={...dog1, ...dog2};
console.log(dogs);

위 코드처럼 객체의 키값이 같을시 가장 최근에 오는 객체의 값으로 덮어 씌어진다.