ES6) Spread 연산자

ES6 Spread 연산자 ...

• 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,3]; 
var arr2 = [4,5,6]; 
arr1.push(...arr2) 

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


var arr1 = [1,2];
var arr2 = [0, ...arr1, 3, 4];

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

배열 복사

• 기존방식

// 단순 변수 할당
var arr1 = ['1','2']; 
var arr2 = arr1; 

arr2.push('3'); 
console.log(arr2); // [ "1", "2", "3" ]
// 원본 배열도 변경
console.log(arr1); // [ "1", "2", "3" ]

// 원본 배열을 변경하지 않으려면
var arr1 = ['1','2']; 
var arr2 = arr1.slice();

arr2.push('3'); 
console.log(arr2); // [ "1", "2", "3" ]
// 원본 배열은 변경되지 않음
console.log(arr1); // [ "1", "2" ]


// ES5 map 
var arr1 = ['1','2']; 
var arr2 = arr1.map((item) => item);

arr2.push('3'); 
console.log(arr2); // [ "1", "2", "3" ]
// 원본 배열은 변경되지 않음
console.log(arr1); // [ "1", "2" ]

• ES6의 spread 사용

// ES6 spread operator
var arr1 = ['1','2']; 
var arr2 = [...arr1]; 

arr2.push('3'); 

console.log(arr2); // [ "1", "2", "3" ]
// 원본 배열은 변경되지 않는다.
console.log(arr1); // [ "1", "2" ]

함수에서의 Spread Operator

Rest Parameter

• 함수를 호출할 때 함수의 매개변수(parameter)를 spread operator로 작성한 형태를 Rest parameter라고 부른다.
• Rest parameter를 사용하면 함수의 파라미터로 오는 값들을 모아서 "배열"에 집어넣는다. 이를 통해 깔끔한 함수 표현을 적용할 수 있다.

function add(...rest) {
  let sum = 0;
  for (let item of rest) {
    sum += item;
  }
  return sum;
}
console.log( add(1) ); // 1
console.log( add(1, 2) ); // 3
console.log( add(1, 2, 3) ); // 6

• 인자의 개수에 상관없이 모든 인자를 더하는 함수를 쉽게 구현 가능하다.

• 기본인자를 섞어서 사용하는 방법도 가능하다.

function addMul(method, ...rest){ 
  if (method === 'add') {
    let sum = 0;
    for (let item of rest) {
      sum += item;
    }    
     return sum;    
  } else if (method === 'multiply'){
    let mul = 1;
    for (let item of rest) {
      mul *= item;
    }
     return mul;    
  }
 
} 

console.log( addMul('add', 1,2,3,4) ); // 10
console.log( addMul('multiply', 1,2,3,4) ); // 24

함수 호출 인자로 사용

• 함수를 정의할 때 말고 함수를 호출할 때에도 spreada operator를 사용할 수 있다.

var numbers = [9, 4, 7, 1]; 
Math.min(...numbers); // 1

// Map 추가
var input = [{name:'1',age:12}, {name:'2',age:12}, {name:'3',age:2}];

//가장 어린 나이 구하기.
var minAge = Math.min( ...input.map((item) => item.age) );
console.log(minAge); // 2

객체에서의 Spread Operator

객체 복사 또는 업데이트

• 객체의 복사 또는 프로퍼티를 업데이트 할 수 있다.
• 간단한 State Management 구현을 위해 응용하여 사용하기도한다.

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

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

// 객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트 된다.
currentState = { ...currentState, name: '2', age: 11}; 
console.log(currentState); // {name: "2", species: "human", age: 11}

Destructuring

• 배열이나 객체에서 destructuring에 사용할 수 있다.

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