[JavaScript] arguments(유사배열객체)와 Rest parameter

JUNHO YEOM·2023년 1월 17일

Javascript

목록 보기

9/9

자바스크립트의 이상한 특징

자바스크립트의 코드를 살펴볼게요

function func(a, b) {
  return a + b;
}
func(10, 20, 30, 40); // 30

Parameter가 2개인데 Argument가 4개에요!!
JavaScript에서는 이런 코드가 동작합니다.
심지어 30이라는 값을 return 값을 내보냅니다.
어떻게 이런 코드가 동작할까요?

일단 arguments라는 녀석이 이것을 가능하게 합니다.

지금부터 하나하나 알아봅시다.
console.dir(func)이라는 코드를 적고
구글 크롬 개발자 모드에서 실행해 보았습니다.

첫번째 줄에 arguments: null이라는 친구가 있네요.
우리가 알아볼 녀석 입니다.
이 친구는 어떤 역할을 할까요?

function func(a, b) {
  console.dir(arguments); // arguments를 보여줘!
  return a + b;
}
func(10, 20, 30, 40); // 30

console.dir()

갑자기 이상한게 하나 나왔어요. console.log() 밖에 쓴적 없었는데
console.dir()은 개발자가 객체의 속성을 쉽게 얻을 수 있도록 지정된 JavaScript 객체의 모든 속성을 콘솔에서 볼 수 있는 방법입니다.

Arguments를 살펴보니까
배열처럼 index를 부여하고, 값이 매칭되어 있는 것을 알 수 있어요
아... 뭔가 느낌이 와요

arguments[0]: 10
arguments[2]: 20
return a + b; // 이 코드가
return arguments[0] + arguments[1]; // 이렇게 동작했겠네요

arguments는 배열같이 동작했어요.
아직 안끝났나 봐요... 배열이 아니라 배열같이 동작한다네요?

배열하고 동작 방법이 비슷하잖아요?
근데 배열은 아니에요 왜냐하면 배열의 기능을 전부 사용할 수는 없는 녀석이기 때문이에요

유사배열객체 arguments

유사배열 객체는 말그대로 배열과 유사한 객체에요
배열과 생긴건 똑같고, 사용도 비슷하게 할 수 있어요
하지만, 배열이 가지는 여러가지 유용한 기능들을 다 가지고 있지는 않아요
이거 어디다써요?? => 가변인자 함수를 구현하기 위해 사용할 수 있어요

가변인자 함수 : 매개변수(가변 인자)를 개수를 미리 고정시키지않고 임의대로 허용할 수 있는 함수

이상한거 하나 더있는데

function sum() { // 파라미터도 없지롱
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}
console.log(sum(10, 20, 30, 40));

짜잔! 코드를 하나 더 가져왔어요
이번에는 parameter도 없어요!
그냥 sum이라는 함수에 그냥 값(arguments)을 4개나 넣었어요
이상해 보이지만 우리는 느낌적인 느낌으로 이 코드가 동작할 것이라는 것을 알 수 있어요

앞에서 본것같이 JavaScript에서 함수에는 arguments라는 녀석이 있는데 이녀석은 sum에 값으로 들어온 10,20,30,40 를 알아서 정리해 주거든요

sum(10,20,30,40)을 하는순간 arguments라는 녀석이
0 : 10
1 : 20
2 : 30
3 : 40
라는 형태로 값을 가지게 되는거죠
그래서 10+20+30+40을 한 100이 출력 됩니다.

근데 제가 팔 물건은 이게 아닙니다.

Rest parameter

오늘 제가 가져온 물건은 Rest parameter입니다.
ECMAScript 2015버전(ES6)에서 생겼어요

arguments는 유사배열 객체라고 설명 드렸어요
그래서 배열의 유용한 기능들을 사용할 수 없을수도 있는거에요
(배열과 비슷한 친구지만 배열은 아니니까 못쓰는 기능이 있어요)

function sum(...args) {
  let result = 0;
  for (let i = 0; i < args.length; i++) {
    result += args[i];
  }
  return result;
}
console.log(sum(10, 20, 30, 40));