자바스크립트 - sprea와 rest

spread

• spread는 직역하면 확산, 퍼짐, 전파라는 뜻으로, 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 합니다.

 

 

객체

spread에 대해 알아보기 위해 toy라는 객체를 선언

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

이번에는 color라는 키값을 갖는 프로퍼티를 추가해서 두 개의 객체를 생성

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

const yellowToy = {
    type: "bear",
    price: 15000,
    color: "yellow",
};

작성한 객체들을 보면, 새로 추가한 객체들과 toy객체의 프로퍼티 중 type과 price값이 동일한 것을 볼 수 있습니다.

이렇게 비슷한 프로퍼티를 가진 객체를 생성하려면, 동일한 코드를 여러번 작성해야 합니다.

 

우리는 이러한 상황에서 spread 문법을 사용

 

• spread는 '...'기호로 표시합니다. 반복되는 프로퍼티들을 포함하는 객체의 이름을, ... 기호 뒤에 작성해주겠습니다.

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

const blueToy = {
    ...toy,
    color: "blue",
};

const yellowToy = {
    ...toy,
    color: "yellow",
};

console.log(blueToy);
console.log(yellowToy);

 

아래의 콘솔 결과를 보면 spread는 ...를 사용해, 특정객체가 가진 프로퍼티들을 펼처줍니다. 

 

 

 

배열

• spread 문법은 배열에서도 가능합니다.

const color1 = ["red", "orange", "yellow"];
const color2 = ["blue", "navy", "purple"];

spread문법을 이용해 새로운 배열에 color1과 color2의 요소들을 넣어보도록하겠습니다.

 

const color1 = ["red", "orange", "yellow"];
const color2 = ["blue", "navy", "purple"];

const rainbow = [...color1, "green", ...color2];

console.log(rainbow);

코드를 실행해보면

rainbow라는 배열에 요소들이 알맞게 들어간 것을 확인할 수 있습니다. 

 

이렇게 spread문법은, 배열이나 객체에서 반복적인 부분을 ... 기호를 사용해 퍼트릴 수 있고,

rainbow배열처럼 순서에 상관없이 여러번 사용할 수도 있습니다. 

 

 

 

 

---

 

rest

• rest는 "나머지 매개변수" 라고도 하며, rest문법 또한 ... 기호를 사용하기 때문에 spread와 비슷해보이지만, 이 둘은 서로 다른 역할을 합니다. spead는 객체나 배열에서 반복적인 값들을 퍼트려주는 문법이지만, rest는 이와 반대로 특정 부분들을 하나의 배열이나 객체로 묶는 문법입니다.

 

객체

• 객체에서 rest는 구조분해할당과 함꼐 사용됩니다. 

객체를 생성해주고 구조분해할당을 통해 객체의 프로퍼티값을 변수들에 할당해주겠습니다. 

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

const { type, price, color } = blueToy;

console.log(type);
console.log(price);
console.log(color);

여기서 price , color 각각의 값이 아니라, 이들을 type값을 제외한 나머지의 값으로 묶어 객체 형태로 출력하고 싶다면, price와 color를 rest문법을 사용해 출력할 수 있습니다

 

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

const { type, ...rest } = blueToy;

console.log(type);
console.log(rest);

 

출려 결과 rest변수는 객체의 형태로 출력되고 객체 안에는 type 값을 제외한 나머지 값들이 들어있는 것을 볼 수 있습니다. 

이렇게 rest는 구조 분해 할당을 통해 원하는 값들을 꺼내고 나머지 값을 별도로 묶어서 할당할 수 있습니다. 

 

이번에는 type과 rest의 순서를 바꿔 blueToy객체를 할당하는 코드를 작성해보겠습니다.

const { ...rest, type } = blueToy; // SyntaxError

 

에러가 발생합니다. 

 

rest문법은 spread와 달리 순서에 상관없이, 여러번 작성할 수 없고 항상 맨마지막에 작성해야 합니다.

 

 

 

배열

구조 분해 할당을 통해 color 배열에서 red, orange 값은 밖으로 꺼내고, rest분법을 사용해 yellow와 green값은

별도로 묶어 rest 변수에 할당했습니다.

const color = ["red", "orange", "yellow", "green"];
const [c1, c2, ...rest] = color;

console.log(c1);
console.log(c2);
console.log(rest);

코드를 실행하면,

rest에는 배열이 c1과 c2에는 color 배열의 0번째, 1번째 요소가 할당된 것을 확인할 수 있습니다. 

 

 

 

 

함수

rest와 spread문법은 함수에서 유용하게 사용되기도 합니다. 

먼저 나머지 매개변수라고도 불리는 rest문법이 함수에서 어떻게 사용되는지 배워보도록하겠습니다.

 

매개변수로 받은 값을 출력한느 print함수를 선언해주었습니다. 

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

print(1, 2, 3, 4, 5, 6);

만약 여기서 print 함수가 6개보다 많은 매개변수를 받고, 동일하게 첫 번째와 두 번째 값을 제외한 나머지 매개변수들을 배열에 담아 출력해야한다고 가정해보면 

우리는 console.log에 무수히 많은 매개변수들을 변수에 담아 출력해야합니다. 

 

이때 a와b매개변수를 제외한 나머지 매개변수들을 rest로 묶어서 출력해봅시다.

 

const print = (a, b, ...rest) => {
    console.log(a);
    console.log(b);
    console.log(rest);
};

print(1, 2, 3, 4, 5, 6);

결과를 보면

a와 b에는 각각 1과 2의값이 할당되었고, rest에는 1과 2를 제외한 나머지 값인 [3,4,5,6]이 할당되었습니다. 

 

 

이렇게 함수의 매개변수에 rest를 사용하게 되면, rest에는 함수에서 받아온 매개변수들로 이루어진 배열이 할당되게 됩니다. 

rest 매개변수는 함수의 매개변수가 매우 많거나, 몇개가될지 모를 때 , 함수에서 받아온 매개변수들을 배열로 나타내야 될대 유용하게 사용할 수 있는 문법입니다. 

 

 

---

rest와 sprad

• 두 문법의 차이점에 대해 코드를 작성해 살펴보겠습니다.

 

numbers라는 배열에는 1부터 6까지의 값을 넣어주고,

print함수는 이 6개의 요소들을 매개변수로 받아 출력하게 작성해줍니다.

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

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

그 다음 print함수를 호출하고 인수로 numbers[0[부터 numbersp[5]까지 넘겨주겠습니다.

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

const numbers = [1, 2, 3, 4, 5, 6];
print(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], numbers[5]);

 

여기서 만약 numbers 배열에 10개가 넘는 요소가 존재했다면, 코드가 길어지고 작성하기 더 까다로웠을 것 같습니다. 

이러한 경우에 우리는 print함수의 인수부분을 spread 문법을 이용해 간단하게 작성할 수 있습니다. 

 

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

const numbers = [1, 2, 3, 4, 5, 6];
print(...numbers); // spread

함수에서 spread문법은 이렇게 인수로 많은 값을 넘겨줘야 할 경우에 자주 사용되는 문법입니다.

 

 

print함수의 매개변수부분을 보면 파라미터가 6개인데 이렇게 작성할 경우 numbers 배열이 요소들이 늘어나거나 적어진다면 오류가 발생할 위험이 있습니다. 

그리고 매개변수로 전달된 값이 매우 많다면, 하나 하나 작성하기 번거롭고 코드이 길이가 길어지게 됩니다. 

 

여기서 rest문법을 사용합니다.

 

const print = (...rest) => { // rest
    console.log(rest);
};

const numbers = [1, 2, 3, 4, 5, 6];
print(...numbers); // spread

출력결과 동일한 값이 출력되고,

rest문법은 매개변수를 전달 받을 때 훨씬 깔끔한 코드를 작성할 수 있도록 도와주는 문법입니다. 

 

 

---

정리

spread : 객체나 배열에서 중복된 부분을 퍼트릴 때, 혹은 함수를 호출 할 때 인수로 전달한 값들을 퍼트릴 때 사용

 

rest : 객체나 배열에서 특정 부분을 하나의 객체나 배열로 묶어야 할 때, 구조 분해할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때,  그리고 함수의 매개변수로 많은 값들을 전달 받거나 특정 매개변수들을 제외한 나머지 매개변수들을 묶어서 사용할 때 사용되는 문법

 

 

 

 

 

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C