JavaScript : Rest(...) 와 Spread(...) 연산자 문법

rest(...)와 spread(...) 연산자는 JavaScript에서 ... 문법을 사용하지만, 각각 다른 역할을 합니다.

1. rest(...) 연산자

**"나머지 연산자"**라고도 하며, 함수의 인자 또는 배열/객체의 나머지 요소를 하나의 변수로 모을 때 사용합니다.

function sum(...numbers) { // rest 연산자
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

• sum 함수는 여러 개의 인자를 받을 수 있으며, ...numbers가 모든 인자를 배열로 모읍니다.
• rest 연산자는 항상 마지막에 위치해야 합니다.

객체에서의 rest

객체에서 특정 속성을 제외하고 나머지 값을 모을 때 사용됩니다.

const user = { name: "Peter", age: 30, job: "Developer" };
const { name, ...rest } = user;

console.log(name); // "Peter"
console.log(rest); // { age: 30, job: "Developer" }

• name을 분해하고, 나머지 속성을 rest에 담았습니다.

---

728x90

 

2. spread(...) 연산자

**"전개 연산자"**라고도 하며, 배열이나 객체의 요소를 펼칠 때 사용합니다.

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

• Math.max(...numbers)는 Math.max(1, 2, 3)처럼 값을 펼쳐서 전달합니다.

배열에서의 spread

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];

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

• spread를 사용해 두 배열을 쉽게 합칠 수 있습니다.

객체에서의 spread

const user = { name: "Peter", age: 30 };
const updatedUser = { ...user, job: "Developer" };

console.log(updatedUser); // { name: "Peter", age: 30, job: "Developer" }

• 기존 객체를 복사하면서 새로운 속성을 추가할 때 사용됩니다.

---

차이점 요약

연산자	역할	사용 예
rest(...)	여러 개의 값을 하나로 모을 때	함수 인자 수집, 객체/배열에서 나머지 값 추출
spread(...)	값을 펼칠 때	배열/객체 복사, 인자 전달, 배열 합치기

즉,

• rest(...) → 여러 개의 값을 하나로 모음
• spread(...) → 하나의 값을 여러 개로 펼침

예제 비교

// rest
function printNames(first, ...rest) {
  console.log(first); // "John"
  console.log(rest);  // ["Jane", "Doe"]
}
printNames("John", "Jane", "Doe");

// spread
const names = ["John", "Jane", "Doe"];
console.log(...names); // "John" "Jane" "Doe"

이해를 돕기 위해 rest는 "모으는 역할", spread는 **"펼치는 역할"**로 기억하면 좋습니다.