[JS] Spread Operator (전개 연산자)

---

알고있으면 좋은 Javascript Tip✨

---

Spread Operator (전개 연산자)

• Spread Operator(전개연산자)는 ES6의 문법으로, 배열이나 문자열과 같이 반복가능한 객체를 하나씩 펼쳐서 리턴한다.
• ... 과 같이 점 3개를 붙여서 사용한다.

 

(1) 배열에서 사용하는 경우 (concat 메서드)

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

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


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

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

• arr1 배열에 concat 메서드를 활용해서 arr2와 arr3를 이어 붙인다.
• 예제 (2) 인자로 전달받은 값 순으로 기존 배열의 끝에서부터 값이 추가된다.

 

(2) 배열에서 사용하는 경우 (Spread Operator)

// 전개 연산자(Spread Operator)를 활용할 경우
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3];

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

• 전개연산자를 사용해서 새로운 배열을 만든다.

 

(3) 객체에서 사용하는 경우 (Spread Operator)

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

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

• 전개 연산자를 사용하면 객체 자체를 할당하지 않고, 각각의 값이 할당된다.