![](https://blog.kakaocdn.net/dn/d7tPOx/btsJfB9Y3cE/lzT6vM5PTOa79EwjS31knK/img.png)
Rest parameter란 함수의 마지막 매개변수 앞에 점 세 개( ... )를 붙여서 정의한 매개변수로 나머지 매개변수라고도 한다. 여기서 '나머지'라는 용어는 영어로 rest에 대비되는데, 함수에 전달된 추가적인 인수들을 나타낸다. 따라서 Rest 파라미터부터는 사용자가 Rest 파라미터에 할당되는 인수를 계속 추가할 수 있다.
function myFunc(a, b, ...numbers){
console.log('a: ', a); // a: 1
console.log('b: ', b); // b: 2
console.log('나머지: ', numbers); // 나머지: [3, 4, 5, 6, 7, 8, 9, 0]
}
myFunc(1, 2, 3, 4, 5, 6, 7, 8, 9, 0);
위는 자바스크립트에서 Rest 파라미터를 사용한 예시이다. Rest 파라미터는 함수에 전달된 인수들 중에서 명시적으로 선언된 파라미터 이후의 모든 인수를 배열로 수집한다.
위 예에서 myFunc()는 a , b , ...numbers 라는 3개의 파라미터를 받는데 a와 b는 각각 첫 번째와 두 번째 인수를 나타내며 numbers는 numbers라는 배열에 나머지 모든 인수를 저장한다. 따라서 myFunc(1, 2, 3, 4, 5, 6, 7, 8, 9, 0) 를 호출하면 a에는 1, b에는 2가 각각 할당되고 나머지 인수들은 Rest parameter인 numbers에 저장되어 출력되는 것이다.
Rest parameter를 사용할 때에는 몇 가지 주의해야 할 점이 있는데 그중 첫 번째는 함수를 정의할 때에는 Rest parameter가 하나만 있어야 한다는 것이다. 그러므로 둘 이상의 Rest parameter를 선언할 경우 아래와 같이 오류가 발생한다.
![](https://blog.kakaocdn.net/dn/x3iea/btsJeEfwIw0/SrpBKP0pfGCgHzIMABVukK/img.png)
또한 Rest parameter는 함수를 정의할 때 매개변수의 수가 하나든 여러 개든 어떤 경우에도 반드시 매개변수의 가장 마지막에 위치해야 한다.
![](https://blog.kakaocdn.net/dn/q1FJU/btsJemTLSo8/k7EkBmlunrziemsO4fp9XK/img.png)
마지막으로 Rest parameter는 함수의 length 속성에 포함되지 않는다.
cf) 자바스크립트에서 Function 객체의 length 속성은 함수가 얼마나 많은 파라미터를 가지고 있는지 나타냄.
![](https://blog.kakaocdn.net/dn/tkOGv/btsJeQGLeSB/Hmu17iEiz8XOZIeiVwxtJ0/img.png)
가변항 함수
가변항 함수(Variable-arity Function)는 함수가 다양한 개수의 인수(arguments)를 받아서 처리할 수 있는 함수를 말한다. 이러한 함수는 호출될 때 전달되는 인수의 개수가 고정되지 않으며 필요한 만큼의 인수를 받아 처리할 수 있다. Rest 파라미터는 자바스크립트에서 가변항 함수를 표현하는 강력한 도구이다. 이를 통해 함수는 다양한 수의 인수를 처리하고 다툴 수 있으며 console.log() 함수와 같이 가면항 함수로 사용된다.
// 가변항 함수 console.log() 예시
console.log('Hello', 'World', '!'); // 'Hello World !'
// Rest 파라미터를 활용한 가변항 함수 예제
function sum(...numbers){
let total = 0;
for (let number of numbers){
total += number;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // 15
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] 쉼표 연산자(Comma Operator) (0) | 2024.09.05 |
---|---|
[Javascript] window.onload 문제 (3) | 2024.09.04 |
[Javascript] Console 객체(2) (0) | 2024.08.29 |
[Javascript] Console 객체(1) (1) | 2024.08.19 |
[jQuery] jQuery의 과거와 현재 그리고 미래 (0) | 2024.08.14 |