스프레드(spread)

1. 객체

• 작성되는 객체들의 반복되는 프로퍼티를 spread를 사용해 간단하게 만들어 줄 수 있음

const toy = {
  type: "bear",
  price: 15000
}

const blueToy = {
  type: "bear",
  price: 15000,
  color: "blue"
}

const YellowToy = {
  type: "bear",
  price: 15000,
  color: "Yellow"
}
//type과 price 프로퍼티가 각 객체 안에 반복되고 있는 상태

2. 배열

rest

• 특정 부분들을 하나의 배열이나 객체로 묶는 문법

1. 객체

• 구조분해할당과 함께 사용됨
  
  위 코드에서 구조분해할당된 price와 color를 rest 문법을 사용해 나타낼수 있음

즉, 구조분해 할당을 통해 원하는 값들을 꺼내서 rest안에 원하는 객체를 묶어둘 수 있음

단, rest 문법은 spread 문법과 다르게 여러번 사용할 수 없고, 항상 마지막에 위치해야 함

2. 배열

3. 함수

매개변수 중 첫번째, 두번째 매개변수를 제외하고 배열의 형태로 함수를 호출하고자 할때

이런식으로 console.log에 넣어서 할수도 있음. 하지만 매개변수가 백개라면? 그중에 매개변수 2개를 제외하고 출력하고자 한다면? 출력하려는 98개의 매개변수를 다 적어주기에는 무리임

따라서, 함수의 매개변수에 rest를 사용하면 !
rest안에는 함수에서 받아온 매개변수들로 이루어진 배열이 할당됨

spread 와 rest

1. spread

const print = (a, b, c, d, e, f) => {
    console.log(a, b, c, d, e, f);
};

// numbers라는 배열의 요소들을 print 함수의 파라미터로 넘겨 매개변수의 값을 출력하는 print함수

const numbers = [1, 2, 3, 4, 5, 6];

// print함수를 호출하고 인수로 numbers[0]부터 numbers[5]까지 넘겨주는 코드
print(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], numbers[5]);

코드가 매우 복잡해 지는 것을, 함수 호출문의 인수부분에...spread를 사용한다면, 매우 간단해짐 !

rest

• 매개변수를 전달받을 때 훨씬 깔끔한 코드로 전달 받을 수 있음
  

정리

1. spread 문법은 객체나 배열에서 중복된 부분을 퍼뜨릴 때, 혹은 함수를 호출할 때 인수로 전달한 값들을 퍼드릴때 사용
2. rest 문법은 객체나 배열에서 특정 부분을 하나의 객체나 배열로 묶어야 할 때, 구조분해할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때, 그리고 함수의 매개변수로 많은 값들을 전달 받거나 특정 매개변수들을 제외한 나머지 매개변수들을 묶어서 사용할 때 사용