Javascript - 나머지 매개변수 & 전개 구문

나머지 매개변수(Rest Parameters) & 전개 구문(Spread Syntax)

자바스크립트에서 나머지 매개변수와 전개 구문은 ES6에서 도입된 기능으로 둘다 ...(spread/rest) 문법을 사용하지만 용도는 다르다.

나머지 매개변수(Rest Parameters)

나머지 매개변수는 함수의 매개변수를 배열로 묶어주는 기능이다.

• 전달된 여러 개의 인수를 하나의 배열로 취합할 수 있다.
• ... 뒤에 오는 매개변수 이름은 임의로 지정할 수 있다.
• 나머지 매개변수는 항상 마지막 매개변수로 와야한다.

  function sum(...numbers) {
      return numbers.reduce((total, num) => total + num, 0);
  }
  
  console.log(sum(1, 2, 3));       // 6
  console.log(sum(10, 20, 30, 40)); // 100
  

전개 구문(Spread Syntax)

전개 구문은 배열이나 객체의 요소를 개별 요소로 풀어주는 기능이다.

• 배열, 객체, 문자열 등 이터러블한 값을 개별 요소로 확장한다.
• 배열 복사

  const arr1 = [1, 2, 3];
  const arr2 = [...arr1]; // 깊은 복사 (Deep Copy)
  arr2.push(4);
  
  console.log(arr1); // [1, 2, 3]
  console.log(arr2); // [1, 2, 3, 4]
  

• 배열 결합

  const arr1 = [1, 2];
  const arr2 = [3, 4];
  const combined = [...arr1, ...arr2];
  
  console.log(combined); // [1, 2, 3, 4]
  

• 객체 복사 및 병합

  const obj1 = { a: 1, b: 2 };
  const obj2 = { c: 3, d: 4 };
  
  const mergedObj = { ...obj1, ...obj2 };
  console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }
  

차이점

기능	설명	사용 예시
나머지 매개변수	전달된 인수를 배열로 묶어 받음	function sum(...args)
전개 구문	배열/객체를 개별 요소로 풀어줌	console.log(...[1, 2, 3])

둘다 ... 문법을 사용하지만, 인수 수집(Rest) 과 요소 확장(Spread) 이라는 차이점을 기억한다면 쉽게 구분할 수 있다.