Rest 파라미터를 알아보자

최문길·2023년 11월 4일
1

JavascriptES6

목록 보기
9/23

저번시간에 배운 arguments 문법에 사실 단점아닌 단점이 있다.


function 함수(임시,a,b,c) {
  for(var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}
함수('임시',2,3,4)

▲ 위 코드에서 '임시'라는 파라미터는 출력하지 않고 a,b,c만 반복문을 돌리고 싶은데 힘이 너무 든다..

그래서 더 보안하여 나온 문법이

rest(나머지) 파라미터

함수를 만들 때 ... 이라는 기호를 파라미터 왼쪽에 추가가 가능한데,
그러면 마법같은 일이 일어난다.

function func(...parameters){
  console.log(parameters)//Array(5) [1,2,3,4,5]
}
func(1,2,3,4,5)

배열이 출력 된다. ㅇ.ㅇ

모든 파라미터를 [] array 안에 담고 있고
이것이 파로 rest 파라미터 이다.

원하는 파라미터 왼쪽에 ... 기호를 붙여주면
'이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터' 라는 의미이다.

따라서 arguments는 유사배열이므로 오직 for문으로만 요소를 순환 했다면,

rest 파라미터는 배열로 받으므로, forEach 등과 같은 배열 메소드를 사용 할 수 있다.

그런데

'...' 뜻이 spread Operator 아닌가? 🙄

사실 '...'의 뜻이 2개 이다.

  1. spread operator spread연산자가 궁금하면 (거) 클릭하쇼
  2. rest parameter


function restFunc(a,b, ...rest){
  console.log(rest)//[3,4,5,6]
}
restFunc(1,2,3,4,5,6)

arguments는 모든 파라미터를 담아주지만

rest의 장점은 특정 짓거나 혹은 모든 파라미터를 '배열'로 담을 수 있다는 장점이 있다.

function restAll(...rest) {
  console.log(rest)// [1,2,3,4,5,6,7,8,9]
}
restAll(1,2,3,4,5,6,7,8,9);

function rest(str,...number) {
  console.log(number)// [90,50]
}
rest('str',90,50)


...rest 주의 할 점

1. 파라미터 자리 가장 맨 뒤에 써야함

function caution1(...rest,a) {
  return console.log('안됨')
}

2. 여러번 못 쓴다.

function caution2(a,...rest1, ...rest2) {
  return console.log('안됨')
}

0개의 댓글