Spread / Rest

Spread와 Rest는 모두 동일한 문법 기호...를 사용하지만, 사용되는 위치와 목적은 다르다. Spread는 배열이나 객체의 값을 펼칠 때 사용하며, 주로 함수 호출이나 새로운 배열·객체 생성 시 활용된다. Rest는 나머지 값을 하나로 묶을 때 사용하며, 주로 구조 분해 할당이나 함수 매개변수에서 사용된다.

Spread / Rest 문법
├── Spread 문법
│   ├── 객체에서의 Spread
│   └── 배열에서의 Spread
├── Rest 문법
│   ├── 객체에서의 Rest
│   └── 배열에서의 Rest
└── 함수에서의 Spread / Rest 문법
    ├── Rest를 사용한 가변 인자 수집
    └── Spread와 Rest 문법을 사용한 함수

Spread 문법

...을 사용해 배열이나 객체의 값을 펼쳐서 나열하는 문법이다. spread 문법은 배열뿐만 아니라 객체에도 사용 가능하며, 주로 복사, 병합, 함수 호출 시 인수 전달 등에 활용된다.

객체에서의 Spread

// Spread 문법을 사용하지 않은 기존 방식
const toy = {
  type: "bear",
  price: 15000,
};

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

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

• blueToy, yellowToy 객체는 toy 객체와 type, price 값이 동일하다.
• Spread 문법을 사용하면, 중복되는 프로퍼티를 한 번에 복사해 더 간결하게 작성할 수 있다.

// Spread 문법을 이용해 공통 속성 가진 객체 재사용
const toy = {
  type: "bear",
  price: 15000,
};

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

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

console.log(blueToy); // {type: 'bear', price: 15000, color: 'blue'}
console.log(yellowToy); // {type: 'bear', price: 15000, color: 'yellow'}

• 반복되는 프로퍼티들을 포함하는 객체의 이름을 ...뒤에 작성
• blueToy, yellowToy의 프로퍼티에 toy의 객체 프로퍼티인 type: "bear", price: 15000가 할당된다.

배열에서의 Spread

// Spread 문법을 사용한 배열 병합
const color1 = ["red", "orange", "yellow"];
const color2 = ["blue", "navy", "purple"];

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

console.log(rainbow);
// ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']

• ...color1과 ...color2는 각각 배열의 요소를 펼쳐서 rainbow 배열에 순서대로 삽입한다.
• "green"은 두 배열 사이에 직접 삽입되어, 전체 배열 안에 자연스럽게 포함된다.
• spread 문법을 사용하면 여러 배열을 간결하게 병합하고, 필요한 값을 중간에 삽입할 수 있어 코드가 직관적이다.

rest 문법

...를 사용해 나머지 값들을 하나의 배열이나 객체로 모아 저장하는 문법이다. 구조 분해 할당이나 함수 매개변수에서 사용되며, 남은 값을 수집하는 용도로 쓰인다. 이때 ...로 선언된 변수는 흔히 "나머지 변수(rest variable)" 라고도 불린다.

객체에서의 Rest

// 일반적인 구조 분해 할당
const blueToy = {
  type: "bear",
  price: 15000,
  color: "blue",
};

const { type, price, color } = blueToy;

console.log(type); // bear
console.log(price); // 15000
console.log(color); // blue

• 객체 구조 분해를 통해 각 프로퍼티를 개별 변수로 꺼낼 수 있다. 하지만 모든 값을 일일이 나열하기엔 비효율적일 수 있다.

// rest 문법을 사용한 구조 분해 할당
const blueToy = {
  type: "bear",
  price: 15000,
  color: "blue",
};

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

console.log(type); // bear
console.log(rest); // {price: 15000, color: 'blue'}

• rest 문법을 사용하면, 일부 프로퍼티를 개별 변수로 꺼내고, 나머지 프로퍼티들은 하나의 객체로 수집할 수 있다. 이때 rest는 새로운 객체 형태로 생성되며, blueToy에서 type을 제외한 나머지 값들이 포함된다.

// 잘못된 사용 예 – rest는 반드시 마지막에 위치해야 함
const blueToy = {
  type: "bear",
  price: 15000,
  color: "blue",
};

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

console.log(type);
console.log(rest);
// SyntaxError: Rest element must be last element

• rest문법은 구조 분해에서 한 번만 사용할 수 있으며, 반드시 마지막에 위치해야한다.
• 이는 구조 분해 할당에서 남은 값을 하나의 객체로 수집하는 역할을 하기 때문에, 이후에 다른 프로퍼티를 분해하려 하면 "남은 값이 무엇인지 모호해지기 때문"에 문법적으로 허용되지 않는다.

배열에서의 Rest

// rest 문법을 사용한 배열 구조 분해
const color = ["red", "orange", "yellow", "green"];
const [c1, c2, ...rest] = color;

console.log(c1); // red
console.log(c2); // orange
console.log(rest); // ['yellow', 'green']

• rest는 구조 분해에서 앞의 값을 제외한 나머지 배열 요소들을 하나의 배열로 수집해 변수에 할당한다.
• color 배열의 앞 두 요소는 c1, c2에 각각 할당되고, 나머지 요소들은 rest 변수에 배열 형태로 묶여 저장된다.

함수에서의 spread / rest 문법

Rest를 사용한 가변 인자 수집

// rest 문법 없이 수동으로 나머지 인자 처리
const print = (a, b, c, d, e, f) => {
  console.log([c, d, e, f]);
};

print(1, 2, 3, 4, 5, 6); // [3, 4, 5, 6]

// rest 문법을 사용해 함수 인자 중 일부를 배열로 수집
const print = (a, b, ...rest) => {
  console.log(a, b, rest);
};

print(1, 2, 3, 4, 5, 6); // 1 2 [3, 4, 5, 6]

• rest 문법을 함수 매개변수에서 사용하면, 앞의 인자를 제외한 나머지 인자들이 배열로 수집된다.
• 함수에 전달받는 인자의 수가 유동적일 때 나머지 인자를 배열로 수집할 수 있다. 이를 "가변 인자 수집"이라고 하며, rest 문법이 간결하게 처리해준다.

Spread와 Rest 문법을 사용한 함수

// 배열 요소를 하나씩 꺼내 직접 인자로 전달 (비효율적)
const print = (a, b, c, d, e, f) => {
  console.log(a, b, c, d, e, f); // 1, 2, 3, 4, 5, 6
};

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

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

• 배열의 요소를 하나하나 꺼내서 전달하는 방식은 확장성이 떨어진다.
• spread 문법을 사용하면 배열을 한 번에 펼쳐 전달할 수 있어 가독성과 유지보수 측면에서 유리하다.
• rest 문법과 함께 사용하면, 함수 정의부에서도 가변 인자를 효율적으로 처리할 수 있다.

// spread와 rest 문법을 함께 사용하는 함수
const print = (...rest) => {
  console.log(rest); // [1, 2, 3, 4, 5, 6]
};

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

• 위는 함수 호출 시 spread, 함수 정의 시 rest 문법을 함께 사용하는 구조이다.
• ...rest는 함수 매개변수에서 사용되어, 전달받은 인자들을 하나의 배열로 수집한다.
• ...numbers 함수 호출 시 사용되며, 배열의 요소들을 개별 인수처럼 펼쳐 전달한다.