[JS] 나머지 매개변수(Rest Parameter)와 전개 연산자(Spread Operator)

728x90

안녕하세요. 오늘은 나머지 매개변수와 전개 연산자에 대해 포스팅하겠습니다.

나머지 매개변수(Rest Parameter)

나머지 매개변수란?

함수의 인수를 처리하는 데 사용됨
매개변수 목록 중 나머지 인수들을 배열로 모아서 함수 내에서 사용할 수 있게 해줌

사용법

함수 정의에서 매개변수 목록의 마지막에 '...'를 붙여 사용함
전달된 나머지 인수들은 배열 형태로 묶여서 함수 내에서 처리됨

function multiply(multiplier, ...numbers) {
    return numbers.map(number => miltiplier * number);
}

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

위 코드에서 첫 번째 인수는 muitiplier로 사용되고 나머지 인수들은 ...numbers 배열에 담김. 이 배열을 map을 이용해 각 숫자에 multiplier를 곱하는 연산을 처리함

특징

함수에 전달되는 인수의 수가 가변적일 때 주로 사용
고정된 매개변수 외에 나머지 인수를 묶어 처리해야 할 때 사용
나머지 매개변수는 반드시 마지막에 위치해야함
나머지 매개변수로 전달된 인수들은 배열로 묶여서 전달됨
기존 매개변수와 구별되어 사용할 수 있음

전개 연산자(Spread Operator)

전개 연산자란?

배열이나 객체의 값을 펼쳐서 개별 요소로 분리하는 역할
배열이나 객체를 복사하거나 병합하고 함수에 인수로 전달할 때 사용함

사용법

배열이나 객체 앞에 '...'을 붙여 사용하며 배열 또는 객체의 모든 요소가 펼쳐짐

예시 1) 배열 결합 및 복사

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

const coppiedArr = [...arr1];
console.log(coppiedArr); // [1, 2]

예시 2) 객체 병합

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

예시 3) 함수의 인수로 사용

function sum(a, b, c) {
    return a + b + c;
}

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

특징

배열이나 객체를 복사하거나 결합할 때 사용
함수에 배열을 전달할 때 배열의 요소를 개별 인수로 처리하고 싶을 때 사용
객체의 병합 또는 속성 확장 시 사용
배열이나 객체를 전개하여 새로운 배열이나 객체를 만들 수 있음
기존 데이터를 수정하지 않고 복사하는 데 유용

나머지 매개변수와 전개 연산자의 차이

구분	나머지 매개변수(Rest Parameter)	전개 연산자(Spread Operator)
사용 위치	함수의 매개변수 목록에서 사용 인수를 배열로 모아 처리	배열, 객체, 함수 호출에서 사용 배열 또는 객체를 개별 요소로 펼침
역할	함수에 전달된 나머지 인수를 배열로 묶어 처리	배열이나 객체를 개별 요소로 분리 또는 병합
주요 목적	가변적인 수의 인수를 하나의 배열로 받아 처리	배열이나 객체의 요소를 개별적으로 처리하거나 새로운 배열, 객체 생성
형태	function(...args)	[...arr], {...obj}, sum(...arr)

✔️ ...이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 전개 연산자

✔️ ...이 함수 매개변수 끝에 있으면 나머지 인수들을 배열로 모아주는 나머지 매개변수