[JavaScript] Rest Parameter & Spread Operator

예진·2023년 7월 21일

JavaScript

목록 보기

5/6

🍒자바스크립트에서 ... 이 뭘까?

...은 함수의 파라미터에서 사용되며, 나머지 인자들을 배열로 받을 때 사용되거나(Rest Parameter), 또는 ...은 배열이나 객체를 분해하여 개별 요소로 확장하는 역할을 가집니다. (Spread Operator)

🍊Rest 파라미터(Rest Parameter)의 개념

Rest 파라미터란?

함수의 파라미터에서 사용되는 문법으로, 함수에 전달된 인자들 중에서 명시적으로 정의되지 않은 나머지 인자들을 배열로 받을 때 사용됩니다.
매개변수 이름 앞에 ...을 붙여서 정의한 매개변수이다.

함수 정의 시에 Rest 파라미터를 사용하면, 함수 내에서 해당 파라미터는 배열로 취급됩니다.
Rest 파라미터는 함수의 매개변수 목록에서 마지막에 위치해야 합니다.
먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당됩니다.

Rest 파라미터의 특징

함수 정의 시 사용되며, 파라미터 목록의 마지막에 위치해야 합니다.
함수에 전달된 인자들 중에서 명시적으로 정의되지 않은 나머지 인자들을 배열로 모아 처리하는 방법으로 가변 인자를 다룹니다.

함수 정의 시 사용
: Rest 파라미터는 함수를 정의할 때 사용되며, 함수의 파라미터 목록에서 마지막에 위치해야 합니다.
나머지 인자 수집
: 함수에 전달된 인자들 중에서 명시적으로 정의되지 않은 나머지 인자들을 Rest 파라미터로 모아 배열로 받습니다.
배열 형태
: Rest 파라미터를 사용하면 함수 내에서 해당 파라미터는 배열로 취급되어 사용됩니다.
가변 인자 처리
: Rest 파라미터를 통해 함수가 가변 인자의 수를 동적으로 처리할 수 있습니다.
Arguments 객체 대체
: Rest 파라미터는 ES6 이전에 사용되던 arguments 객체를 대체하여 인자들을 배열로 쉽게 다룰 수 있게 합니다.

Rest 파라미터 주요역할

: Rest의 역할을 하는 함수 파라미터입니다. ES2015(ES6) 에서 처음 도입된 것으로, 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아 줍니다

Rest 파라미터 문법

Rest 파라미터는 함수의 파라미터 목록에서 마지막에 위치해야 하며, ... 키워드 뒤에 파라미터 이름을 작성

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

//실행결과
true
[ 1, 2, 3, 4, 5 ]

foo 함수가 Rest 파라미터인 ...rest를 사용하여 정의되었습니다.
foo 함수는 호출될 때 1부터 5까지의 인자들을 전달받고, ...rest는 이러한 인자들을 배열로 모아서 처리합니다. 이때, ...rest에는 배열로 묶인 인자들이 할당되므로 Array.isArray(rest)는 true를 반환하며, rest를 출력하면 [1, 2, 3, 4, 5] 배열이 출력됩니다.

Rest 파라미터 사용 예시

function printNumbers(...numbers) {
  for (const number of numbers) {
    console.log(number);
  }
}

printNumbers(1, 2, 3, 4, 5);

위의 코드에서 printNumbers 함수는 Rest 파라미터 ...numbers를 사용하여 정의되었습니다. 이 함수는 호출될 때 전달된 모든 인자들을 배열로 모아서 받아옵니다.
printNumbers 함수를 호출할 때 인자로 1부터 5까지의 숫자들을 전달했습니다. 함수 내에서 ...numbers는 전달된 인자들을 배열로 묶어주기 때문에 반복문을 통해 배열의 요소들을 출력할 수 있습니다.

🍋스프레드 연산자(Spread Operator)의 개념

스프레드 연산자란?

배열이나 객체를 분해하여 개별 요소로 확장하는 문법입니다. ...을 사용하여 배열이나 객체를 펼쳐서 새로운 배열이나 객체를 만들거나, 함수 호출 시 인수로 사용할 수 있습니다.

스프레드 연산자의 특징과 역할

배열이나 객체의 요소 또는 속성들을 확장하여 새로운 배열 또는 객체를 만들거나 결합할 수 있습니다.
함수 호출 시 인수로 사용하여 배열이나 객체의 요소들을 편리하게 전달할 수 있으며, 깊은 복사를 수행합니다.

배열에서의 사용
: 배열의 요소들을 펼쳐서 개별 요소로 확장합니다.
새로운 배열을 만들거나, 기존 배열과 결합하여 사용할 수 있습니다.
객체에서의 사용
: 객체의 속성을 펼쳐서 개별 속성으로 확장합니다.
새로운 객체를 만들거나, 기존 객체와 병합하여 사용할 수 있습니다.
함수 호출 시 인수로 사용
: Spread Operator를 사용하여 배열이나 객체의 요소들을 함수의 인수로 전달할 수 있습니다.
깊은 복사
: Spread Operator를 사용하여 배열이나 객체를 복사할 때, 얕은 복사가 아닌 깊은 복사를 수행합니다.
ES6(ES2015) 이상에서 지원
: Spread Operator는 ES6 이상에서 도입된 문법으로, 최신 버전의 브라우저 및 Node.js에서 지원됩니다.

스프레드 연산자 문법

배열에서의 기본 문법

배열을 펼치는 경우, ...을 사용합니다.
[...arr]와 같이 사용하여 배열 arr의 요소들을 펼쳐서 새로운 배열을 생성합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); 

//실행결과
[1, 2, 3, 4, 5, 6]

객체에서의 기본 문법

객체의 속성을 펼치는 경우, {...obj}와 같이 사용합니다.
{...obj1, ...obj2}와 같이 여러 개의 객체를 병합하여 새로운 객체를 생성합니다.

const obj1 = { name: "Yejin", age: 17 };
const obj2 = { email: "hraniee@naver.com" };

const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); 

//실행결과
{ name: "Yejin", age: 17, email: "hraniee@naver.com" }

스프레드 연산자 사용 예시

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2];
console.log(mergedArray);

//실행결과
[1, 2, 3, 4, 5, 6]

arr1과 arr2 두 개의 배열을 ...을 사용하여 새로운 배열 mergedArray로 병합했습니다.
=> 스프레드 연산자를 사용하면 기존의 배열을 수정하지 않고, 간편하게 배열을 확장하여 새로운 배열을 만들 수 있습니다.
mergedArray에는 arr1과 arr2의 요소들이 모두 펼쳐져서 들어갑니다.
이 코드를 실행하면 콘솔에 [1, 2, 3, 4, 5, 6]이 출력되며, mergedArray에는 두 개의 배열이 병합된 결과가 저장됩니다.

🍐Rest 파라미터 VS 스프레드 연산자

Rest 파라미터와 스프레드 연산자는 모두 ...을 사용하지만,
함수의 매개변수에서 Rest 파라미터로 사용하면 인자를 배열로 수집하고, 배열이나 객체에서 스프레드 연산자로 사용하면 요소들을 확장하여 새로운 배열이나 객체를 생성한다는 큰 차이가 있습니다.

1. Rest 파라미터와 스프레드 연산자의 공통점

Rest 파라미터와 스프레드 연산자는 모두 ...을 사용합니다

2. Rest 파라미터와 스프레드 연산자의 차이점

Rest 파라미터

함수 정의 시 사용되며, 마지막 매개변수에만 사용할 수 있습니다.

함수 호출 시 넘겨진 인자들 중에서 나머지 인자들을 배열로 수집합니다.

함수 내에서 ...rest와 같이 사용합니다.

스프레드 연산자

배열이나 객체를 확장하여 분해합니다.

배열에서는 요소들을 펼치고, 객체에서는 속성들을 펼칩니다.

배열 리터럴이나 객체 리터럴, 함수 호출 시 인수로 사용됩니다.

⭐Rest 파라미터와 스프레드 연산자 요약

Rest 파라미터와 스프레드 연산자

Rest 파라미터

함수 정의 시 사용되며, 마지막 매개변수에만 사용 가능.

함수 호출 시 넘겨진 인자들 중에서 나머지 인자들을 배열로 수집.

함수 내에서 ...rest와 같이 사용.

스프레드 연산자

배열이나 객체를 확장하여 분해.

배열에서는 요소들을 펼치고, 객체에서는 속성들을 펼침.

배열 리터럴, 객체 리터럴, 함수 호출 시 인수로 사용.

공통점과 차이점

공통점

둘 다 ... 문법을 사용하여 동작.

자바스크립트의 ES6 이상에서 지원됨.

차이점

Rest 파라미터는 함수 정의에서 사용되고, 함수 호출 시 인자 수집에 사용되며, 배열 형태로 반환.

스프레드 연산자는 배열이나 객체를 확장하거나 분해하여 사용되며, 새로운 배열이나 객체를 생성.

=> Rest 파라미터와 스프레드 연산자는 모두 ...을 사용하지만, 각각의 문맥에서 다른 역할을 수행합니다. Rest 파라미터는 함수 정의에서 사용되어 인자 수집에 활용되고, 스프레드 연산자는 배열이나 객체를 확장하여 새로운 배열이나 객체를 만드는데 사용됩니다.