JavaScript에서 Spread와 Rest 연산자

Source: Dev.to

최근에 백엔드 코드를 많이 작성하면서 spread operator와 rest operator를 언제 사용해야 하는지 혼란스러웠습니다. 많은 개발자들이 같은 문제를 겪고 있기 때문에, 이번 포스트에서는 차이점을 자세히 설명하고, 일반적인 사용 사례를 보여주며, 피해야 할 흔한 실수를 짚어보겠습니다.

다룰 주제

• rest 연산자가 하는 일
• spread 연산자가 하는 일
• spread와 rest의 차이점
• 각 연산자를 언제 사용해야 하는지

Source: …

Rest 연산자

Rest 연산자는 명시적으로 나열되지 않은 나머지 값을 수집합니다. 주로 구조 분해 할당과 함수 매개변수에서 사용됩니다.

예시 (객체 구조 분해)

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// REST → extract password, collect the rest
const { password, ...safeUser } = user;

console.log(safeUser);

출력

// Password is extracted
{ id: 1, name: "Kunal", email: "kunal@gmail.com", role: "admin" }

Rest 연산자는 할당문의 왼쪽에 위치하여 남은 프로퍼티들을 새로운 객체(또는 배열에 사용할 경우 새로운 배열)로 모읍니다.

함수 매개변수에서의 Rest

function sum(first, ...rest) {
  return rest.reduce((total, n) => total + n, first);
}

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

여기서 ...rest는 첫 번째 인자 이후의 모든 인자를 배열로 수집합니다.

스프레드 연산자

스프레드 연산자는 반복 가능한 객체(배열 또는 객체)의 요소들을 새로운 컨텍스트로 펼치기(“spread”)합니다. 주로 데이터 구조를 복사하거나 병합할 때 사용됩니다.

예시 (객체 병합)

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// SPREAD → 객체 병합 / 업데이트
const updatedUser = {
  ...user,
  role: "user"
};

console.log(updatedUser);

출력

{
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "user",
  password: "secret"
}

스프레드 연산자는 대입 연산자의 오른쪽에 위치하여 기존 데이터를 펼친 뒤, 속성을 추가하거나 덮어쓸 수 있게 합니다.

배열과 함께 사용하기

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

스프레드와 레스트의 차이점

각 연산자를 사용할 때

• Rest Operator – 남은 항목들을 배열이나 객체에 수집해야 할 때 사용합니다. 예:

  • 함수 매개변수 목록 (function fn(a, b, ...rest) {})
  • 구조 분해 할당 (const { a, ...rest } = obj)

• Spread Operator – 데이터 구조를 복제하거나 병합하고 싶을 때 사용합니다. 예:

  • 배열/객체의 얕은 복사 만들기 (const copy = [...original])
  • 여러 배열이나 객체 병합하기 (const merged = { ...obj1, ...obj2 })
  • 함수 호출 시 요소 펼치기 (myFunc(...args))

읽어 주셔서 감사합니다! 이 글이 마음에 드셨다면 관련 주제의 다른 글도 자유롭게 살펴보세요.