[javascript] 나머지 매개변수(rest parameter) (...args)

나머지 매개변수(rest parameter) (...args)

• 정의 :함수의 매개변수 목록에서 ‘나머지’ 인자들을 하나의 배열로 모아주는 문법
• ES6(ECMAScript 2015) 부터 도이
• 타입 : 배열

• ...rest ← rest 파라미터
• rest는 배열(type) 형태로 전달됨

// [문법]
function funcName(고정매개변수, ...rest) {
  // 함수 본문
}

function showInfo(name, age, ...skills) {
  console.log(name);   // 'Jisoo'
  console.log(age);    // 25
  console.log(skills); // ['HTML', 'CSS', 'JS']
}
showInfo('Jisoo', 25, 'HTML', 'CSS', 'JS');

✓ 남은 인자들을 한 덩어리로 모아서 배열로 만듦

주의사항

• rest 파라미터는 마지막에만 사용 가능

function wrong(...rest, a) {} // 에러

• 하나의 함수에 하나만 사용 가능

function wrong(...a, ...b) {} // 에러

 

---

rest 파라미터 활용 

1. 가변 인자 처리 (가장 흔한 사용)

• 함수가 받을 인자의 개수가 유동적일 때 유용
• 라이브러리나 유틸 함수에서 몇 개의 인자가 들어올지 모를 때 이 패턴을 씀
• 필수 인자 뒤에, 옵션값들을 받을 때 자주 씀 (예: 수치 계산, 통계 함수 등)
• 이전에는 arguments (유사배열)로 처리했지만, rest는 배열이기 때문에 reduce, filter, map 등 고차 함수를 쓸 수 있어서 훨씬 편리하고 안전함.

function multiply(multiplier, ...numbers) {
  return numbers.map(n => n * multiplier);
}
multiply(2, 1, 2, 3); // [2, 4, 6]

---

2. 고정 인자 + 나머지 인자 구분

• 앞부분 인자는 필수, 그 이후는 옵션일 때
• 고정값(예: 이름, 나이) 뒤에 스킬, 옵션 설정, 태그 등 유동값을 넘겨주는 상황

function showInfo(name, age, ...skills) {
  console.log(`이름: ${name}`);
  console.log(`나이: ${age}`);
  console.log(`스킬: ${skills.join(', ')}`);
}

showInfo('Jisoo', 25, 'HTML', 'CSS', 'JavaScript');

•  프론트엔드 개발에선 컴포넌트 함수에 props 전달 시 유사한 패턴이 자주 나타남

createButton('확인', 'primary', 'rounded', 'shadow') // 고정 + 옵션 클래스

---

3. 디스트럭처링과 함께 사용

• 배열이나 객체에서 대표값 + 나머지 값들을 나눠서 관리할 때
• React, Vue 같은 컴포넌트 기반 프레임워크에서는 상태(state)를 다룰 때 자주 쓰는 패턴

/* 예를 들어 블로그 포스트 리스트가 있을 때: 
featuredPost는 메인에 노출하고, otherPosts는 사이드나 목록에 뿌리는 구조가 자주 쓰임.
*/

const [featuredPost, ...otherPosts] = posts;

---

4. 인자 유효성 검증

• rest 덕분에 "필수값만 체크하고, 나머지는 신경 안 써도 되는" 구조 가능
• 예외 상황만 막고 싶을 때 유용함
• 함수 작성 시 모든 인자를 검사하는 대신,
  꼭 필요한 값만 체크하고 나머지는 알아서 처리하도록 만드는 게 유지보수에 좋음

// 메인 기능인 message만 꼭 있어야 하고, 옵션은 많아도 되고 없어도 됨.
function sendMessage(message, ...options) {
  if (!message) throw new Error('메시지가 필요합니다');
  // options는 폰트, 색상, 속도 등 유동 설정값
}

---

5. 콜백 함수에 동적 인자 전달

• 동적으로 생성된 값들을 콜백 함수에 넘길 때
• 호출부에서 spread, 콜백부에서는 rest를 받는 패턴
• 활용 : 이벤트 처리, setTimeout, 라이브러리에서 유동 인자를 전달할 때
  
• 로그 유틸, 에러 핸들러, API 호출 추적기 등에 쓰기 좋음
  → 메시지 종류와 로그 데이터를 자유롭게 넘기고 받기 때문에 확장성 좋고 타입 안전

function logger(...args) {
  console.log(`[LOG]:`, ...args);
}

logger('Error', 404, 'Not Found');

---

6. 배열 메서드 사용 가능

• rest는 arguments와 달리 진짜 배열이기 때문에, filter, sort, map, reduce 같은 고급 처리 가능
• 이전에는 arguments를 Array.from(arguments)로 변환해서 써야 했지만, ...args로 배열 받고 메서드 쓰면 끝

function filterPositive(...nums) {
  return nums.filter(n => n > 0);
}