ZENO — 웹 개발, 디자인, 자격증 정리

자바스크립트 나머지 매개변수(Rest Parameter)

자바스크립트에서 ...(세 개의 점)은 두 가지 역할을 한다.
하나는 스프레드 연산자(Spread Operator) — 데이터를 펼치는 기능이고,
다른 하나는 나머지 매개변수(Rest Parameter) — 데이터를 모으는 기능이다.

즉,
스프레드는 “풀어헤치는 것”,
나머지 매개변수는 “한데 모으는 것”이다.

---

1. 나머지 매개변수의 개념

함수에 인자를 몇 개 받을지 모를 때, 나머지 매개변수를 사용한다.
함수의 매개변수 부분에 ...변수명을 붙이면,
넘쳐 들어온 인자들을 전부 배열 형태로 묶어준다.

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

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

이 코드에서 ...numbers는 [1, 2, 3, 4]로 바뀐다.
즉, ...는 함수 안에서 “남는 인자들을 한데 모으는 역할”을 한다.

---

2. 문법 규칙

1. 나머지 매개변수는 하나만 쓸 수 있다.
2. 항상 마지막에 위치해야 한다.
3. 함수 안에서는 배열 메서드(map, filter, reduce) 등을 바로 쓸 수 있다.
4.  

function printAll(a, b, ...rest) {
  console.log(a); // 첫 번째 인자
  console.log(b); // 두 번째 인자
  console.log(rest); // 나머지 인자들
}

printAll(1, 2, 3, 4, 5);
// 출력 결과: [3, 4, 5]

 

 

---

3. arguments 객체와의 차이

옛날 자바스크립트에서는 함수 안에서 자동으로
arguments라는 내장 객체를 썼다.
하지만 arguments는 유사 배열(array-like) 이라서
배열 메서드를 직접 사용할 수 없었다.

function oldStyle() {
  console.log(arguments); // 유사 배열
  // arguments.map(x => x * 2); ❌ 작동안함
}

function newStyle(...args) {
  console.log(args); // 진짜 배열
  console.log(args.map(x => x * 2)); // ✅ 정상 작동
}

따라서 최신 자바스크립트에서는
arguments 대신 나머지 매개변수를 사용하는 것이 기본이다.

----

4. 스프레드 연산자와 비교

둘 다 모양은 ...이지만 역할은 정반대다.
스프레드는 펼치기, 나머지는 모으기.

// 스프레드 — 펼치기
const nums = [1, 2, 3];
console.log(...nums); // 1 2 3

// 나머지 — 모으기
function logAll(...args) {
  console.log(args);
}
logAll(1, 2, 3); // [1, 2, 3]

함수 정의할 때 ... → Rest Parameter(모으기)
함수 호출할 때 ... → Spread Operator(펼치기)

---

5. 실무에서 자주 쓰이는 예시

(1) React 컴포넌트의 props 처리

function Button({ label, ...rest }) {
  return <button {...rest}>{label}</button>;
}

rest에는 label을 제외한 나머지 속성들이 다 들어간다.
이걸 다시 <button {...rest}>로 펼쳐서 적용한다.

(2) 이벤트 정보 수집

function handleEvent(type, ...details) {
  console.log("이벤트:", type);
  console.log("세부정보:", details);
}

handleEvent("click", 100, 200, "좌표");
// details = [100, 200, "좌표"]

(3) 여러 배열을 하나로 합칠 때

function mergeArrays(...arrays) {
  return [].concat(...arrays);
}

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

---

6. 디스트럭처링에서도 사용 가능

...은 배열이나 객체를 분해할 때도 쓸 수 있다.
이때도 “남는 부분을 한데 모으는 역할”을 한다.

const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest);  // [20, 30, 40]

const { id, ...props } = { id: 1, name: "Jin", age: 33 };
console.log(props); // { name: "Jin", age: 33 }

---

7. 정리

• ...은 함수 선언부에서는 나머지 매개변수(Rest Parameter)
• 남는 인자들을 배열로 모아준다.
• 예전 방식인 arguments보다 훨씬 간단하고 강력하다.
• 스프레드(...)는 “펼치기”, 나머지(...)는 “모으기”.

---

단어정리

나머지 매개변수(餘剩媒介變數)
남을 여(餘), 덜 생(剩), 중매할 매(媒), 낄 개(介), 변할 변(變), 셈 수(數)
영어: Rest Parameter — restare(남다) + para(곁에) + metron(측정하다)
뜻: 함수에서 남는 인자들을 배열로 모으는 변수

유사배열(類似配列)
무리 류(類), 같을 사(似), 나눌 배(配), 벌일 렬(列)
영어: Array-like — array(배열) + -like(~같은)
뜻: 배열처럼 보이지만 배열 메서드를 쓸 수 없는 객체

스프레드(展布)
펼 전(展), 펼 포(布)
영어: Spread — 고대 영어 sprædan(펴다)
뜻: 배열이나 객체를 낱개로 펼쳐 전달하는 연산자

디스트럭처링(解構)
풀 해(解), 얽을 구(構)
영어: Destructuring — de(떼다) + structure(구조)
뜻: 구조를 해체해서 내부의 요소를 꺼내는 문법