[JavaScript-14]가변인자와 arguments

본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.

완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.

특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.

참고:

javascript docs

ecmascript specification

개발을 하다보면 가변인자, 즉 함수의 파라메터의 갯수가 가변적이여야할 때가 있다.

가령 아래 같은 함수를 만든다고 가정하자.

console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4));

우리는 인자들을 모두 더하는 sum이라는 함수가 만들고 싶다.

그런데 인자의 갯수가 정해져 있지 않다면 어떻게 해결해야할까?

이를 위하여 제공되는 문법이 있다.

바로 가변인자이다.

function sum() {
    let res = 0;
    for (let i = 0; i < arguments.length; i++) {
        res += arguments[i];
    }
    return res;
}

가변인자는 함수내에서 arguments로 정의된다.

함수내에서 arguments는 특별히 선언하지 않아도 그냥 사용할 수 있다.

arguments['넣은 순서']같은 방식으로 사용할 수 있다.

정말 간단한 문법이고 좋은 문법이지만 사용때 주의해야할 점이있다.

바로 arguments의 정체는 배열이 아니라 Object라는 점이다.

코드를 조금 수정해서 다시보도록 하자.

function sum() {
    let res = 0;
    console.log(arguments);
    for (let i = 0; i < arguments.length; i++) {
        res += arguments[i];
    }
    return res;
}

arguments를 한번 출력해보도록하자.

{ '0': 1, '1': 2, '2': 3 }
6
{ '0': 1, '1': 2, '2': 3, '3': 4 }
10

그러면 이 녀석의 정체가 Object라는 것을 알 수 있다.

이렇게 배열이 아니면서 Object가 배열인척 하는것을 유사배열이라고 부른다.

그렇기 때문에 이 녀석을 배열이라고 생각하고 배열 메소드를 쓸 수가 없다는 아주 치명적인 문제점이 존재한다.

물론 꼼수를 이용해서 쓸 수는 있다.

그런데 요즘은 이녀석(arguments)을 점점 안쓰는 추세이다.

뭐 나쁜 문법인건 아니지만 spread연산자(필자 포스팅 참조)를 사용하면 훨씬 직관적이고 깔끔하게 짤 수 있기 때문이다.

function sum(...args) {
    let res = 0;
    console.log(args);
    for (let i = 0; i < args.length; i++) {
        res += args[i];
    }
    return res;
}

이렇게 spread로 받아주면된다.

그리고 여러분은 spread의 결과가 배열이라는것도 알고 있다.

[ 1, 2, 3 ]
6     
[ 1, 2, 3, 4 ]
10

유사배열보다는 당연히 그냥배열이 나으므로 여러분들도 특별한 이유가 없다면 spread연산자를 사용하는 것이 낫다.