[모던자바스크립트] spread와 rest

spread

spread 문법을 사용하면 기존의 것을 건드리지 않고 객체 혹은 배열의 요소를 모두 하나씩 펼칠 수 있다.

const slime = {
  name: '슬라임'
};

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

const purpleCuteSlime = {
  ...cuteSlime,
  attribute: 'cute',
  color: 'purple'
};

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

먼저 slime이라는 객체를 선언했다. 그리고 cuteSlime이라는 객체를 만들었는데, 기존에 선언한 slime을 건드리지 않고 새로운 객체를 만들어서 slime이 가지고 있는 값을 그대로 사용하였다. 그 다음에는 purpleCuteSlime이라는 객체가 생성되었는데, 이 객체는 cuteSlime이 가지고 있는 속성을 그대로 사용하면서 추가적으로 color가 추가되었다.
spread연산자는 배열에서도 사용할 수 있다.

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

기존의 animals는 건드리지 않으면서, 새로운 anotherAnimals 배열에 animals가 가지고 있는 내용을 모두 집어넣고, '비둘기'라는 항목을 추가적으로 넣었다.
또한 배열에서 spread 연산자를 여러 번 사용할 수 있다.

const numbers = [1,2,3,4,5];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);  // (11) [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

rest

rest는 ES6에서 처음 도입된 것으로, 뒤에 남는 요소들을 배열 또는 객체로 받아준다. 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.

1. 객체에서의 rest
객체와 배열에서 사용할 때는 비구조화 할당 문법과 함깨 사용된다.

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

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);  // purple
console.log(cuteSlime);  // {name: "슬라임", attribute: "cute"}

const { attribute, ...slime } = cuteSlime;
console.log(attribute);  // cute
console.log(slime);  // {name: "슬라임"}

cuteSlime안에는 color값을 제외한 값이 들어 있다. 그리고 cuteSlime에서 attribute 속성을 없앤 slime이라는 새로운 객체를 생성하였다.

2. 배열에서의 rest
spread는 어디에든 올 수 있으나 rest파라미터는 마지막에만 올 수 있다.

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

const [one, ...rest] = numbers;
// const[...rest, last] = numbers -> 불가능, 오류 발생

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

배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣은 것이다.

3. 함수 파라미터에서의 rest
함수 파라미터가 몇 개가 될지 모르는 상황에서 rest파라미터를 사용하면 유용하다.

function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);  // [1, 2, 3, 4, 5, 6]

위 코드에서 result가 가리키고 있는 것은 함수에서 받아온 파라미터들로 이루어진 배열이다. 이때 sum의 파라미터 개수는 몇 개가 오든지 상관없다.

아래는 파라미터들이 들어가 있는 배열을 받아 모두 더한 코드이다.

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

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // 21

함수 인자와 spread

배열 안에 있는 원소들을 모두 파라미터로 넣으려고 할 때 보통 아래처럼 작성할 것이다.

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

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(
  numbers[0],
  numbers[1],
  numbers[2],
  numbers[3],
  numbers[4],
  numbers[5]
);
console.log(result);  // 21

spread를 사용하면 코드를 보다 깔끔하게 작성할 수 있다.

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

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