ES6 : 전개연산자(Spread Operator) ㅗㅜㅑ

전개연산자(Spread Operator)는 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있어!

전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 돼!

 

ES5에서 배열의 내용을 합쳐서 새로운 배열을 만들기 위해선 concat 메소드를 썼거든?

예를 들자면 이렇게!

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8 ,9];
var arrWrap = arr1.concat(arr2, arr3);

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

 

ES6에서 전개연산자를 쓰면!

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]

이렇게 ...으로 배열의 값을 넘길 수 있어!!

 

concat 메소드를 사용한 코드보다 간결하고 가독성도 개선 됐다고 해!(나는 concat이 더 보기 편한거 같은데..)

 

여기서 중요한 점이!

concat 메소드를 사용했을 때 인자로 전달받은 값 순으로 기존 배열 끝부터 값이 추가가 됐거든?

 

전개연산자는 배열 아무곳에나 추가 가능!!

이렇게!!

const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9]

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

오.. 이건 좀 효과적인거 같아!

대신 위치를 잘 보고 해야겠다!

 

 

※ 주의할 점

전개연산자로 할당하면 2차원 형태가 되지 않아!

 

배열의 경우에 concat 메소드로 새로운 배열을 만드는 것이 아니라

기존 배열 요소에 값 추가한다면 예제처럼 push메소드를 사용하겠지?

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(arr2);

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

arr1 배열에 arr2 배열을 할당했을 때, arr2 배열 전체가 들어가 2차원 배열이 돼!

이 경우에 기존 자바스크립트에서는 배열 객체 프로토타입 메소드인 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'
  }
}

 

obj1 객체랑 obj2 객체를 objWrap 객체로 묶으면 객체 각각의 값이 아니라

객체 자체가 들어가 2차원 객체가 돼!

 

전개연산자 등장! 뚜둥!

const obj1 = {
  a: 'A',
  b: 'B'
};
const obj2 = {
  c: 'C',
  d: 'D'
};
const objWrap = {...obj1, ...obj2};
console.log(objWrap);

 

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

전개연산자를 사용하면 객체 자체가 할당되는게 아니라 각각의 값이 할당 돼! 오우오우~ 싸발적이고~

 

 

전개연산자를 이용해서 복사할 때는 1차원에서만 유효해!

 

위에서 전개연산자로 할당하면 2차원 배열이 되지 않는다고 했지?

2차원 이상의 배열을 할당할 땐

1차원 요소만 같은 1차원 레벨로 할당이 되고 2차원 이상의 배열은 그대로 들어가!

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

오 너무너무 편하고 ...

 

 

또 기존 배열을 보존할 때 겁나 유용!!

 

ES5에서는 배열 요소를 역순으로 변경할 때

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

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

원본 배열까지 수정이 됐거든?

 

전개연산자를 쓴다면?

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

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

원본 배열 유지에 새로운 배열을 reverse까지 할 수 있지요!!

 

또또또!

배열의 나머지 요소를 할당 할 수 있어!

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

변수 first, second에 각각의 인덱스 값에 맞는 값이 차례대로 들어가고

rest에는 나머지가 대입 돼!!

 

 

전개연산자 짱짱짱짱~~

 

참고: velog.io/@recordboy/%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-Operator