본문 바로가기
쿤즈 Dev/JS HTML CSS

[Javascript] 연산자 Spread 사용 방법(2): Rest Parameter

by :)Koon 2021. 5. 17.

지난 포스팅에서는 Spread 연산자에 대해서 알아보았습니다. Spread 연산자는 ... 키워드를 이용해서 배열을 손쉽게 복사하고 추가할 수 있는 키워드입니다.

이번 포스팅에서는 Spread 연산자를 이어서 Rest Parameter에 대해서 알아보도록 하겠습니다.


Javascript Rest Parameter

일반적으로 Javascript의 함수 사용시 parameter로 값을 넣을 때에는 아래와 같이 사용합니다.

let myFunc = function ( arg1, arg2, arg3 ) {
  ...
}

받을 parameter의 개수를 파악하여 입력받을때 만들어줍니다. 그렇다면 Spread 연산자를 이용해 보면 어떨까요?

let myFunc = function ( ...args ) {
  ...
}

위와 같이 Spread 연산자를 사용하면 parameter의 개수에 영향을 받지 않고 받을 수 있습니다.

let myFunc = function ( ...args ) {
  console.log(args);
}

myFunc('a'); // ['a']
myFunc('a', 'b', 'c'); //['a', 'b', 'c']

단, args로 받은 parameter는 배열(array)의 형태입니다.

 

이러한 문법의 사용은 기존 배열의 값에 함수로 받은 parameter를 추가할 때 많이 사용합니다. 기존 메모리에 값을 가지고 있다가 새로운 데이터를 추가하여 다시 화면에 뿌릴 수 있기 때문입니다.


이번 포스팅에서는 Spread 연산자의 두 번째인 Rest parameter에 대해서 알아보았습니다. 저도 굉장히 자주 사용하는 ES6 문법 중 하나입니다. 도움이 되셨으면 합니다. 이상입니다.

댓글