[JS] 함수의 호출과 arguments객체

자바스크립트 역시 다른 언어들처럼 함수를 선언하고 이를 호출함으로써 원하는 로직을 구현하고 실행하게 됩니다. 이전 포스팅까지는 함수의 선언에 대해서 알아보았습니다. 이번 포스팅에서는 함수의 호출과 이때 전달되는 arguments객체에 대해서 살펴보도록 하겠습니다.

 

자바스크립트에서의 함수 호출

모든 언어에서 함수의 기본적인 작동 원리는 호출에 의한 동작입니다. Java에서 함수를 호출할 때 보다 자바스크립트에서의 함수 호출은 자유롭습니다. 물론, 타입스크립트가 최근에는 많이 사용되고 있고 이때 함수 호출의 자유도는 Java와 유사하다고 볼 수 있습니다.

 

참고로 자유도가 높다고 좋은 것은 아닙니다. 왜냐하면 자유도가 높을수록 불필요한 에러가 많이 발생할 수 있고 이에 따른 예외처리도 더 많이 해줘야 하기 때문입니다.

 

Java vs 자바스크립트

//Java
class TestMain {
   public static void main(String[] args) {
        System.out.println(add(2, 3)); //5
        System.out.println(add()); //Error
        System.out.println(add(2, 3, 4)); //Error
   }

   public add(x, y) {
       return x + y;
   }
}

 

//JavaScript
function add(x, y) {
    return x + y;
};

console.log(add(2,3)); //5
console.log(add(2,3,4)); //5
console.log(add()); //NaN

Java에서는 정의된 함수의 인자 개수만큼 함수를 호출할 때 매개변수를 넘기지 않으면 에러가 발생합니다.

 

하지만, 자바스크립트에서는 인자의 개수보다 적게 넘길 경우 undefined가 할당됩니다.(add();를 호출할 경우, 인자 x, y에 undefined가 할당되고 NaN(Not a Number)가 반환됩니다.)

 

반대로 많이 넘길 경우엔 앞에서부터 함수의 인자 개수만큼만 할당하게 됩니다.(add(2,3,4));를 호출할 경우, 앞의 2, 3만 인자로 할당하여 함수를 동작시킵니다.)

 

자바스크립트에서 함수의 호출이 이루어졌을 때 동적으로 인자의 개수에 따라 다르게 결과 값을 반환할 경우, arguments 객체를 사용할 수 있습니다.

 

arguments 객체

function add() {
    var result = 0;

    for(var i=0; i<arguments.length; i++) {
        result += arguments[i];
    }

    return result;
}

console.log(add(2,3)); //5
console.log(add(2,3,4)); //9
console.log(add()); //0

arguments 객체는 함수가 호출되면, 자바스크립트가 자동으로 생성하고 매개변수와 함께 함수 내부로 전달됩니다. arguments 객체를 이용해서 매개변수의 개수에 따라 다른 처리를 해야 하는 함수를 구현할 수 있습니다.

 

arguments 객체는 유사배열객체입니다. 유사배열객체이기 때문에 위의 코드처럼 배열 형태로 접근할 수 있습니다. 단, 유사배열객체는 궁극적으로 배열은 아니기 때문에 배열의 메서드는 사용할 수 없기 때문에 배열로 변환하는 과정이 필요합니다.

 

추후 다루게 될 ES6이상의 모던 자바스크립트에서는 이를 rest파라미터로 대체하기도 합니다.

 

Reference

인사이드 자바스크립트 (송형주, 고형준)