[JavaScript] 함수의 Arguments 유사 배열, ...rest 파라미터

iberis2·2023년 1월 4일
0

arguments

arguments 객체는 함수 내부의 유사 배열로,
파라미터의 수와 관계 없이 argument 들을 유연하게 다룰 수 있게 해준다.

parameter 보다 적은 argument를 전달하는 경우 undefined가 출력되고,
parameter 보다 많은 argument를 전달하면 무시된다.

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


printArgument(1); // 1, undefined, undefined
printArgument(1, 2, 3, 4, 5) //1, 2, 3

함수 내 arguments는 argument들을 요소로 가지는 유사 배열처럼 동작한다.

function printArgument(a, b, c) {
  console.table(arguments);
  console.log(arguments.length); // argument들의 개수 확인
  console.log(arguments[0]); //index 번호로 argument에 접근

  console.log("--------");
  
  for (arg of arguments) {  // for of 문으로 전체 arguments 확인
    console.log(arg);
  }
}

printArgument("a", "b", "c", "d", "e");
/*
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│    0    │  'a'   │
│    1    │  'b'   │
│    2    │  'c'   │
│    3    │  'd'   │
│    4    │  'e'   │
└─────────┴────────┘
5
a
--------
a
b
c
d
e
*/

단 arguments 객체는 유사 배열 이므로 배열의 매서드는 사용할 수 없다.

function printArgument(a, b, c) {
 console.log(arguments.splice(0, 2));
}

printArgument("a", "b", "c", "d", "e");
// TypeError: arguments.splice is not a function

💡arguments 주의사항

  • arguments를 파라미터의 이름으로 사용하거나
  • 함수 내부에서 arguments라는 이름의 변수나 함수를 만드는 것은 피해야한다.

rest 파라미터

...parameter 점 3개 + 파라미터 이름으로 rest parameter를 사용할 수 있다.
rest parameter는 배열이므로, 배열의 매소드도 사용할 수 있다.

function printArgument(...arg) {
  console.log(arg); 
  console.log(...arg); // 배열의 요소들을 풀어 놓는 sprad
  console.log(arg.splice(0, 2));
}

printArgument("a", "b", "c", "d", "e");
// [ 'a', 'b', 'c', 'd', 'e' ]
// a b c d e
// [ 'a', 'b']

일반 파라미터와도 함께 사용할 수 있다.
파라미터로 지정된 argument 외 나머지 argument 들은 하나의 배열로 묶여서 전달된다.

function playRank(first, second, ...others) {
  console.log(`1등 : ${first}`);
  console.log(`2등 : ${second}`);
  for (const player of others) {
    console.log(`참가자 : ${player} `);
  }
}

playRank("김빛나", "오현수", "이아람", "김동식", "박해커", "유객체", "한배열");
/* 1등 : 김빛나
2등 : 오현수
참가자 : 이아람 
참가자 : 김동식 
참가자 : 박해커 
참가자 : 유객체 
참가자 : 한배열 */
profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글