Js - [ES6] Spread Operator(스프레드 연산자)

Spread Operator 기본 문법

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.

 

 

1.함수에서의 Spread Operator

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// ...numbers -> x = 1 ,y = 2 ,z = 3
// expected output: 6


//Array
var arr1 = [1, 2, 3, 4, 5]; 
var arr2 = [...arr1, 6, 7, 8, 9]; 

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

//string
var str1 = 'java'; 
var str2 = [...str1]; 
console.log(str2); // ["j", "a", "v", "a"]

2. 배열에서의 Spread Operator

 

 배열 병합 (Array Concatenation)

기존에 두 개의 배열을 결합하는 데 있어서 concat 메서드를 이용하곤 했습니다. ES6에서는 spread 연산자를 이용하여 좀 더 깔끔한 배열 병합이 가능합니다.

// 기존 방식
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

var arr = arr1.concat(arr2); 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
var arr1 = [1,2,3]; 
var arr2 = [4,5,6]; 

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


//아래와 같은 방법으로도 가능하다
var arr1 = [1,2];
var arr2 = [0, ...arr1, 3, 4];

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

 

 

3.배열 복사 (Copying Arrays)

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조합니다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경됩니다.

// 단순 변수 할당
var arr1 = ['철수','영희']; 
var arr2 = arr1; 

//-> 깊은 복사
arr2.push('수영이'); 
console.log(arr2); // [ "철수", "영희", "수영이" ]
// 원본 배열도 변경됩니다.
console.log(arr1); // [ "철수", "영희", "수영이" ]

// ES6 spread operator
var arr3 = ['철수','영희']; 
var arr4 = [...arr1]; 

arr2.push('바둑이'); 
// 얕은 복사
console.log(arr3); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr4); // [ "철수", "영희" ]

4. 객체에서의 Spread Operator

ES2018 (ES9)에서는 객체와 관련된 사항이 추가되었습니다. 배열에 대한 Spread Opeator를 지원하는 최근의 브라우저는 객체에 대한 Spread Operator 역시 지원합니다.

 

객체에서 spread operator를 이용하여 객체의 복사 또는 프로퍼티를 업데이트 할 수 있습니다.

간단한 State Management 구현을 위해서 다음과 같은 방식으로 응용하여 사용하기도 합니다. 

var currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10}; 

console.log(currentState)// {name: "철수", species: "human", age: 10}

currentState = { ...currentState, name: '영희', age: 11}; 
console.log(currentState); // {name: "영희", species: "human", age: 11}

 

5. Destructuring

Spread Operator는 배열이나 객체에서의 destructuring에 사용될 수 있습니다. 이 경우에 의미적으로는 spread operator라기보다는 rest parameter에 가까운 형태가 되겠네요.

 

var a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30,40,50]

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

 

출처

https://paperblock.tistory.com/62