javascript

[javascript] 나머지 매개변수 (rest parameter)

미 성 2024. 3. 2. 20:15

 

안녕하세요. 저번 포스팅에서는 객체 혹은 배열의 요소들을 전개해주는 구문인 전개구문에 대해서 다루어 보았는데요,

 


- 전개구문 개념 다시보기 

https://with-mimi.tistory.com/entry/javascript-%EC%A0%84%EA%B0%9C%EA%B5%AC%EB%AC%B8spread-syntax-%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98

 


 

오늘은 이어서 나머지 매개변수 ( rest parameter )에 대하여 알아보겠습니다.


그 이전에 잠시, 혼용하기 쉬운 "매개변수" "인수" 개념을 짚고 넘어가겠습니다.

 

"매개변수"  : 함수에서 전달된 값을 받는 변수

"인수" : 함수를 호출할 때 매개변수에 실제로 담기는 값


보통 우리는 함수를 호출할 때 해당 함수의 매개변수 개수에 맞게 인수를 실어 보냅니다. 그런데 사실, javascript에서 인수의 개수는 제한이 없다는 것 알고 계셨나요? 물론 이처럼 만일 매개변수보다 인수의 개수가 더 많은 경우, 개수를 넘어서는 인수들은 함수가 받아낼 수가 없습니다. 즉, 우리 눈으로 인식하지 못하게 되겠죠. 이 초과된 인수들까지 모두 볼 수 있게 하는 방법이 바로 " 나머지 매개변수 " 입니다. 기존 매개변수 앞에 점을 세 개 찍어 ( = 전개구문 형태 ) 함수를 선언하면, 모든 인수가 함수로 전달될 수 있게 됩니다. 나머지 매개변수는 전달받은 모든 인수들을 배열로 수집합니다.

 

나머지 매개변수

 

 

add 함수의 매개변수가 나머지 매개변수 형태입니다. 즉, numbers 매개변수는 하나 이상의 인수들을 전달받을 수 있으며, 이 인수들을 배열로 수집한 형태가 됩니다. numbers 변수에 forEach 함수를 쓸 수 있는 것은 numbers가 배열이기 때문이겠죠.

 


 

주의할 점은, 매개변수가 여러 개일 때, 나머지 매개변수는 항상 가장 마지막에 있어야만 합니다.

function add(x1,x2,x3,...numbers)와 같이 말이죠.

 

 


 

 

마지막 코드를 함께 살펴보며 포스팅을 마무리하도록 하겠습니다.

 

 

 

 

User 생성자 함수를 이용하여 객체 user1, user2, user3을 만드는 모습이네요.

User 함수의 name, age 매개변수는 각각 하나의 인수밖에 전달받지 못하지만, skills 매개변수는 나머지 매개변수의 형태를 하고 있으므로 제한없는 개수의 인수들을 전달받을 수 있습니다. 3개의 객체를 만드는 코드를 보시면, 3개의 객체 모두 (user1, user2, user3) 각각 다른 개수의 인수를 전달받고 있는 모습을 확인하실 수 있습니다. 

 

나머지 매개변수 : " 너가 몇 개의 인수를 보낼 진 모르겠지만 그게 몇 개든 나는 다 받을 준비가 되어있다. "

 

 

 


 

앞서 배웠던 전개구문과 같은 형태를 띄는( 점 3개 붙인 형태 ) 나머지 매개변수에 대해 배워보았습니다.

 

*******

[ 정리 ]

- 전개구문 : 배열 혹은 객체를 개별적인 요소들로 전개해주는 구문.

- 나머지 매개변수 : 여러 개의 인수들을 전달받아 하나의 배열로 수집.

*******

 

 

읽어주셔서 감사합니다 !