JavaScript rest 파라미터

Rest

지난번에 spread 연산자에 대해서 알아봤다.

https://duyaan.tistory.com/68

JavaScript spread 연산자

 

spread 연산자에서 '...' 문자를 통해 나타냈었는데, 이와 생김새가 같은 rest 파라미터에 대해서 알아보려고 한다.

 

rest 파라미터는 함수의 매개변수로 사용되어 함수에 전달된 인수들 중에서 일부를 배열로 모아 저장한다.

말했듯이 '...' 문자를 통해 사용한다.

 

아래는 간단한 예시이다.

function sum(...numbers) {
    console.log(numbers); // [1, 2, 3, 4]
     return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

 

sum이라는 함수에 1, 2, 3, 4를 파라미터로 넘겨주었다.

이때, sum에서 받을 때 '...numbers'는 rest 파라미터로서 함수에 전달된 모든 인수를 numbers에 할당한 것이다.

 

rest 파라미터로 할당된 인수들은 배열의 형태로 나타나게 된다.

콘솔에 numbers를 찍어보면 [1, 2, 3, 4]가 출력되는 것을 알 수 있다.

이렇게 rest 파라미터를 통해 전달받은 인수들을 배열로 함수 내에서 처리할 수 있게 된다.

 

함수 정의 시에 rest 파라미터를 쓰려면 다른 매개변수는 사용할 수 없느냐?라고 묻는다면 그건 아니다.

다음과 같이 작성할 수도 있다.

function person(name, age, ...phone){
    console.log(name); // Kang
    console.log(age); // 20
    console.log(phone); // ['010-1234-5678', '010-1111-2222']
}

person('Kang', '20', '010-1234-5678', '010-1111-2222');

 

첫 번째 인자는 name에, 두 번째 인자는 20, 그 외의 나머지 인자는 phone에 담은 것이다.

 

이때, person에 여러 가짓수의 인자를 전달해 보면 조금 놀라운 결과가 나온다.

function person(name, age, ...phone){
    console.log(name); // Kang
    console.log(age); // 20
    console.log(phone); // ['010-1234-5678']
}

person('Kang', '20', '010-1234-5678');

 

rest 파라미터에 할당되는 인자가 한 개의 경우에는

인자가 여러 가지인 경우와 동일하게 배열에 담긴다.

콘솔에 phone을 찍어보면 '010-1234-5678'이라는 문자열이 배열에 담겨 나오는 것을 볼 수 있다.

 

function person(name, age, ...phone){
    console.log(name); // Kang
    console.log(age); // 20
    console.log(phone); // []
}

person('Kang', '20');

 

이번에는 rest 파라미터에 할당되는 인자가 하나도 없는 경우이다.

이 때는 오류를 출력하는 것이 아닌, phone에는 빈 배열이 담기는 것을 확인할 수 있다.

 

 

주의할 점

rest 파라미터를 사용할 때 주의할 점은 두 가지가 있다.

우선, 함수의 정의에는 한 가지의 rest 파라미터만 존재할 수 있다.

 

즉, 아래와 같이 사용할 수 없다.

function sum(...numbers, ...indexs){
    // 함수 본문
}

 

두 번째는, 

rest 파라미터는 항상 매개변수들의 가장 마지막에 와야 한다.

즉, 아래와 같이 사용할 수 없다.

function person(...phone, age, name){
    // 함수 본문
}

 

 

 

배열에서의 rest

rest 파라미터는 함수에서만 사용되는 것이 아니라, 배열에서도 활용될 수 있다.

const [first, second, ...numbers] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(numbers); // [3, 4, 5]

 

함수에서 매개변수로 쓰일 때랑 같은 맥락이고, 주의할 점도 같다.

 

 

객체에서의 rest

rest 파라미터 객체에서도 동일하게 활용될 수 있다.

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

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)