[JavaScript] Spread Operator 전개 연산자

 

• 전개 연산자는 ECMAScript 2015에서 새롭게 추가
• 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용

 

배열조합

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];

cont arrWrap = arr1.concat(arr2,arr3);

console.log(arrWrap); // [1,2,3,4,5,6,7,8,9]

 

위에 배열조합을 전개 연산자 방식 사용

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];

const arrWrap = [...arr1, ...arr2, ...arr3];

console.log(arrWrap); // [1,2,3,4,5,6,7,8,9]

 

 

또 다른 방법으로

push.apply

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

Array.prototype.push.apply(arr1, arr2);

console.log(arr1); // [1,2,3,4,5]

 

전개 연산자를 사용

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

arr1.push(...arr2);

console.log(arr1); // [1,2,3,4,5]

 

 

객체조합

객체 안에 객체 자체가 들어감

const obj1 = {
	a:'A',
    b:'B'
};

const obj2 = {
	c: 'C',
    d: 'D'
}

const objWrap = {obj1, obj2};

console.log(objWrap);

// {obj1: {a:'A',b:'B'}, obj2: {c:'C',d:'D'}}

 

전개연산자를 사용하면 객체 자체가 아닌 각각의 값이 할당 됨

const objWrap = {...obj1, ...obj2};
console.log(objWrap);

// {a:'A', b:'B', c:'C', d:'D'}

 

 

기존 배열을 보존

 

원본 배열까지 역순 변경

const arr1 = [1,2,3];
const arr2 = arr1.reverse();

console.log(arr1); // [3,2,1];
console.log(arr2); // [3,2,1];

 

전개연산자를 사용해서 1,2,3을 넣어주면 원본 배열 유지

const arr1 = [1,2,3];
const arr2 = [...arr1].reverse();

console.log(arr1); // [1,2,3]
console.log(arr2); // [3,2,1]