프론트엔드/Javascript

[Javascript] rest parameter 란?

프흐프좋아 2023. 2. 21. 20:35

3개의 인자를 입력받으면, 입력받은 3개의 값을 출력해주는 함수가 있습니다.

 

가장 기본적인 형태는 아래의 형태가 있습니다.

function 함수(a,b,c) 
{
  console.log(a);
  console.log(b);
  console.log(c);
}

함수(1,2,3);

es6 문법이 나오기 이전에는 arguments를 이용해서 출력할 수 있습니다.

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

함수(1,2,3);

 

하지만 es6 문법이 나온 후에는 아래와 같은 방법으로 출력해줄 수 있습니다.

바로 rest parameter인데요, 생긴건 spread operator랑 비슷해서 헷갈릴 수 있습니다

예제코드를 보여드릴게요

 

function 함수(...냠냠) 
{
  for(var i=0;i<냠냠.length;i++)
  {
    console.log(냠냠[i]);
  }
}

함수(1,2,3);

바로 함수의 인자에 "...[변수명]" 을 사용하는 것을 rest parameter라고 합니다.

spread operator 와의 차이점은 rest parameter는 함수의 인자안에서만 쓰이고, 그 외는 모두 spread operator라고 보면됩니다.

 

rest parameter는 꼭 맨 뒤에서만 쓸 수 있습니다.

function 함수(a,b,...냠냠) 
{
  for(var i=0;i<냠냠.length;i++)
  {
    console.log(냠냠[i]);
  }
}

함수(1,2,3);