[javascript] ES6 최신 문법 3 _ spread

 

spread ...

스프레드는 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 문법이다. 스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다.

let arr = [1, 2, 3, 4];
console.log(...arr); //1 2 3 4
let a = { ...arr };
let b = [...arr];
console.log(a); //{ '0': 1, '1': 2, '2': 3, '3': 4 }
console.log(b); //[ 1, 2, 3, 4 ]

let arr1 = [2, 3, 4];
let arr2 = [5, 6, 7];
let merged = arr1.concat(arr2);       //ES5에서 배열 합치기
const newMerged = [...arr1, ...arr2]; //ES6에서 배열 합치기
console.log(newMerged);               //[ 2, 3, 4, 5, 6, 7 ]

let copied1 = arr1.slice();  //ES5에서 배열 복사하기
const newCopied = [...arr1]; //ES6에서 배열 복사하기

let obj1 = { a: 3 };
let obj2 = { b: 4 };
let mergedObj = Object.assign({}, obj1, obj2); //ES5에서 오브젝트 합치기
let newMergedObj = { ...obj1, ...obj2 };       //ES6에서 오브젝트 합치기

console.log(mergedObj);     //{ a: 3, b: 4 }
console.log(newMergedObj);  //{ a: 3, b: 4 }

let copiedObj = Object.assign({}, obj1); //ES5에서 오브젝트 복사하기 
const newCopiedObj = { ...obj1 };        //ES6에서 오브젝트 복사하기

console.log(copiedObj);     //{ a: 3 }
console.log(newCopiedObj);  //{ a: 3 }

 

 

★ rest 파라미터와 혼동할 수 있다. rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 받는 것으로 spread와 반대의 개념이라고 생각하면 된다.

function foo(...rest) {
	console.log(rest);
}

foo(1, 2, 3, 4, 5); //[1, 2, 3, 4, 5]

 

 

+ 객체에서 스프레드 문법을 사용할 때 주의할 점!

const nabi = {
  name: "나비",
  kind: "고양이",
  actions: ["잠자기", "먹기"],
};

let update2 = { ...nabi, age: 4 }; 

console.log("===== 수정 전 =====");
console.log(update2);
update2.name = "냐옹이";
console.log("=====수정 후=====");
console.log(nabi);
console.log(update2);
console.log("=====주의=====");
update2.actions[0] = "낮잠자기";
console.log(nabi);
console.log(update2);

//output
===== 수정 전 =====
{ name: '나비', kind: '고양이', actions: [ '잠자기', '먹기' ], age: 4 }
=====수정 후=====
{ name: '나비', kind: '고양이', actions: [ '잠자기', '먹기' ] } //nabi 값 변동없음
{ name: '냐옹이', kind: '고양이', actions: [ '잠자기', '먹기' ], age: 4 } //update2만 수정됨
=====주의=====
{ name: '나비', kind: '고양이', actions: [ '낮잠자기', '먹기' ] } //nabi에도 수정된 배열 참조
{ name: '냐옹이', kind: '고양이', actions: [ '낮잠자기', '먹기' ], age: 4 }

 

스프레드 문법은 .assign 메서드를 대체할 수 있다. 스프레드 문법으로 객체를 생성하면 기존 객체에 있던 프로퍼티 값을 그대로 가져와 뿌리고 만들어진 객체를 반환하기 때문에 만들어진 객체를 수정해도 기존 객체의 프로퍼티 값은 변하지 않는다. 단! 1단계 깊이에 한해서만!! 위 코드에서 update2 객체의 경우 nabi의 프로퍼티 값들을 가져와 생성한 것인데, nabi의 name과 kind에 대해서는 value를 그대로 가져온 반면, actions에 대한 value는 주소값을 참조하기 때문에 update2의 action에도 주소값이 참조되게 된다. 따라서 update2의 action 배열을 수정하면 본 객체인 nabi의 action에도 수정된 배열의 주소값이 참조된다.