rest와 spread

rest와 spread (나머지 매개변수와 전개 문법)

rest와 spread는 서로 떼어놓을 수 없는 개념이다. 두 문법 모두 ...을 사용하는 문법으로 눈으로 볼 때는 매우 유사해보이지만 실제 그 역할은 정반대의 개념이다. 두 개념을 비교하여 함께 알아보자.

rest (나머지 매개변수)

매개변수의 마지막 위치에 사용하며 인수 목록의 나머지를 배열로 모아주는 역할을 한다. 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용한다. 객체, 배열, 그리고 함수의 파라미터에서 사용 가능하다.

객체 사용 예시

rest는 객체와 배열에서 사용할 때 이렇게 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때는 관용적으로 rest라는 키워드를 사용하지만 꼭 rest일 필요는 없다.

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

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

배열 사용 예시

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

const [one, ...rest] = numbers;

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

함수 파라미터 사용 예시

사용 전

function sum(a, b, c, d, e, f, g) {
  let sum = 0;
  if (a) sum += a;
  if (b) sum += b;
  if (c) sum += c;
  if (d) sum += d;
  if (e) sum += e;
  if (f) sum += f;
  if (g) sum += g;
  return sum;
}

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

사용 후

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 (전개 문법)

함수 호출 시 사용되며 배열을 목록으로 확장해주는, 즉 객체 혹은 배열을 펼치는 역할을 한다. 다수의 인수를 받는 함수에 배열을 전달할 때 사용한다. 기존의 객체를 건드리지 않고 새로운 객체를 생성해야하는 경우 유용하게 사용할 수 있다.

객체 사용 예시

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

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

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

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

배열 사용 예시

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

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

// 배열에서 spread 연산자를 여러번 사용 할 수도 있다.
const numbers = [1, 2, 3, 4, 5];

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

함수 인자 사용 예시

사용 전

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);

사용 후

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);

참고

• 모던 JavaScript - 나머지 매개변수와 전개 문법
• spread 와 rest 문법