스프레드 연산자의 용법

1. 배열 결합

// 1. 배열 뒤에 추가
a.push(...b);
// 2. 배열 앞에 추가 
a.unshift(...c);
// 3. 배열 중간에 넣을때
const d = [3,4,5];
const totalData = [1,2,...d,6
// 4. 배열 값이 리터럴이 아닌데 중간에 넣을때 
const aa = [3,4,5];
const bb = [1,2,6];
const total = [...bb.slice(0,2),
               ...aa,
               ...bb.slice(2,3)];
               

2. 배열 복사(얇은 복사)

const a = [1,2,3];
const b = [...a];

3. 객체 결합

const aa = {a:"데이터1",b:"데이터2"};
const bb = {b:"일부로 겹치게 데이터2",c:"데이터3",d:"데이터4"};
const cc ={...aa,...bb};//결합
//겹치는 데이터명은 가장 오른쪽데이터가 들어감.

4. Rest Parameter

함수를 호출할 때 함수의 매개변수(parameter)를 spread operator로 작성한 형태를 Rest parameter라고 부른다. Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 모아서 "배열"에 집어넣는다. 단, Rest파라미터는 항상 제일 마지막 파라미터로 있어야 한다.

function add(...rest) {
  let sum = 0;
  for (let item of rest) {
    sum += item;
  }
  return sum;
}

5. 함수 호출 인자로 사용

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

6. 객체 복사 또는 업데이트

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}

7. Destructuring

배열이나 객체에서의 destructuring에 사용될 수 있다.

({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}

출쳐: 하나몬