JavaScript: spread와 rest (...)

spread (연산자 '...')

먼저 spread라는 단어의 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면 객체와 배열을 펼칠 수 있다.

기존에 만들었던 객체를 참고하여 새로운 객체를 만들고 싶다면 'spread'를 사용하면 편리하다.

spread는 연산자 '...' 키워드로 사용할 수 있다.

 

const slime = {
  name: "슬라임",
};

const cuteSlime = {
  ...slime,
  attribute: "cute",
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: "purple",
};

const greenCuteSlime = {
  ...purpleCuteSlime,
  color: "green",
};

console.log(slime); // { name: '슬라임' }
console.log(cuteSlime); // { name: '슬라임', attribute: 'cute' }
console.log(purpleCuteSlime); // { name: '슬라임', attribute: 'cute', color: 'purple' }
console.log(greenCuteSlime); // { name: '슬라임', attribute: 'cute', color: 'green' }

다음과 같이 사용할 수 있다. 

 

const animals = ["개", "고양이", "참새"];
const anotherAnimals = [...animals, "비둘기"];

console.log(animals); // [ '개', '고양이', '참새' ]
console.log(anotherAnimals); // [ '개', '고양이', '참새', '비둘기' ]

배열에서도 spread를 사용할 수 있다. 여러 번 사용하는 것도 가능하다. 

 

rest (연산자 '...')

rest와 spread는 모두 '...'을 사용하지만 그 역할은 다르다. rest는 객체, 배열, 함수의 파라미터에서 사용할 수 있다. 

 

const purpleCuteSlime = {
  name: "슬라임",
  attribute: "cute",
  color: "purple",
};

const { color, ...rest } = purpleCuteSlime;

console.log(color); // purple
console.log(rest); // { name: '슬라임', attribute: 'cute' }

객체에서 rest를 사용한 예시이다. 객체 비구조화 할당을 하면서,... rest를 넣어주었다. 

결과를 보면 rest에는 color를 제외한 나머지 attribute와 name 값이 들어온 것을 확인할 수 있다. 

굳이 이름을 rest라고 해야하는 것은 아니고 바꿀 수 있다.

 

const purpleCuteSlime = {
  name: "슬라임",
  attribute: "cute",
  color: "purple",
};

const { color, ...cuteSlime } = purpleCuteSlime;

console.log(color);
console.log(cuteSlime);

const { attribute, ...slime } = cuteSlime;
console.log(slime);

다음과 같이 spread와 반대로 사용이 가능하다. spread는 특정 객체나 배열 안에 다른 객체나 배열을 퍼뜨리는 역할을 한다면, rest는 퍼져있는 것을 반대로 모아 오는 역할을 한다. 

주의해야 하는 점은 rest는 먼저 올 수는 없다. rest는 마지막에 와야한다는 것이다. 

 

함수 파라미터에서의 rest

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4, 5, 6, 7, 8));  // 36

함수의 파라미터에 ...rest를 하면 받아 온 파라미터들이 배열 형태로 rest에 저장된다.

들어오는 파라미터의 개수를 알 수 없을 때 파라미터로 rest를 사용하면 좋을 것 같다.

 

함수 인자에서의 spread

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(sum(...numbers));  // 36

다음과 같이 sum 함수에 인자를 넘겨줄 때 spread를 사용해 배열 안의 모든 원소들을 넘겨줄 수 있다.