[ES6] Spread Operator (전개 구문)

Spread Operator

---

반복 가능한(iterable) 객체에 적용할 수 있는 문법

배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있음

 

1. Array에 붙이면 대괄호를 제거해줌

var array = [1, 2, 3, 4];
console.log(...array);

2. 문자에 붙이면 대괄호를 제거해줌

     - 문자는 유사배열이라고 생각하자 (대충 배열이라는 뜻)

     - 문자 인덱싱 

     - 문자도 Array처럼 인덱싱이 가능함 (진짜 Array는 아님)

var letter = 'hello';
console.log(letter[1]);

var letter = 'hello'
console.log(...letter);

 

Spread Operator를 어디에 쓰면 좋을까?

1-1. Array 합치기 / 복사

var a = [1, 2, 3]
var b = [4, 5]

var c = [...a, ...b];

console.log(c)

1-2. Array 합치기 / Deep Copy

: 만약 a에 있는 값을 b에 복사하고 싶을 때?

var a = [1, 2, 3];
var b = a;

console.log(b);

보기에는 문제가 없어보이지만!! 큰 문제가 존재함 

a[3] = 4;

console.log(a);
console.log(b);

a의 3번째 자리에 4를 추가했는데, a와 b를 출력해보니 b 배열에도 4가 추가되었다!!

그냥 등호로 Array, Object 등의 Reference Data Type의 값을 복사하면 값을 서로 공유하게된다.

각각 독립적인 값을 가지도록 Array, Object를 복사하기 위해서는 Spread Operator를 이용해야한다.

즉, 독립적인 자료를 만들고 싶을 때(Deep Copy 할 때), Spread Operator를 이용해서 값을 복사해야하는 것이다.

var original = [1, 2, 3];
var deepCopy = [...original];

original[3] = 4;

console.log('original', original);
console.log('deepCopy', deepCopy);

2-1. Object 합치기 / Deep Copy

오브젝트도 Spread Operator를 이용해서 값을 합칠 수 있다.

var object1 = {a: 1, b: 2};
var object2 = {...object1, c: 3};

console.log('object2', object2);

obejct1를 obu

 

3-1. 함수 파라미터 넣을 때

function 더하기(a,b,c){
  console.log(a + b + c)
}

더하기(1,2,3);

Array 내의 모든 데이터를 파라미터로 집어넣고 싶은 경우

var array = [10,20,30];

더하기([10,20,30]) // <-- 첫번째 파라미터로 Array를 집어넣겠다는 뜻

더하기(어레이[0], 어레이[1], 어레이[2]); // <-- Array 해체작업 너무 번거로움 (주먹구구식)

더하기.apply(undefined, array); // <-- 옛날방식

// 요즘방식 : Spread Operator
더하기(...[10,20,30]);
더하기(...array);

 

 

* 여기도 같이 보기

[JS 문법] call, apply, bind 메소드로 this 명시적 바인딩하기