[JavaScript/개발] arguments 객체 이해하기

//argument 이해하기

function sum() {
    var total = 0;
    for (var i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    console.log(arguments instanceof Array);
    return total;
}

var sumOf1to3 = sum(1, 2, 3);
console.log(sumOf1to3);

function testArg() {
    var newArr = Array.prototype.slice.call(arguments);
    console.log(newArr);
    console.log(newArr.indexOf('b'));
    console.log(arguments.indexOf('b'));
}

testArg('a', 'b');


// 결과

// false
// 6
// [ 'a', 'b' ]
// 1

// c:\Users\Code guy\Desktop\코드\036.js:19
//     console.log(arguments.indexOf('b'));
//                           ^

// TypeError: arguments.indexOf is not a function

자바스크립트상에서 함수는 매개변수를 가진다.여기서 매개변수와 같이 사용되는 것이 전달인자(arguments) 인데, 자바스크립트는 전달 인자의 개수와 매개변수의 개수가 달라도 에러를 발생하지 않는다.

 

그래서 매개변수와 무관하게 함수 호출 시 더 많은 인자를 전달할 수 있는데, 매개변수 외에 함수에서만 사용 가능한 특별한 객체를 제공한다

 

이 특별한 객체가 바로 arguments 객체이다.

 

sum 함수를 정의하면서 내부에 arguments 객체를 통해 전달된 인자의 합을 반환하게 된다.

 

arguments 객체는 배열과 유사하게 인덱스를 토해 접근할 수 있다.하지만 length속성 외에는 배열의 어떠한 속성과 메소드를 가지고 있지 않는다.

 

instanceof 연산자를 이용하여 arguments객체가 배열이 아님을 console.log(arguments instanceof Array); 파트에서 확인이 가능했다. 해당 사항의 결과 값이 false로 떴다.

 

var sumOf1to3 = sum(1, 2, 3);

console.log(sumOf1to3);

 

위의 부분에에서 sum 함수는 매개변수를 정의하고 있지 않지만 전달인자로는 1, 2, 3 으로써 전달하고 있고 이때 별도의 에러가 발생하지 않음을 결과가 6이 나옴을 보면서 확인 할 수 있었다.

 

var newArr = Array.prototype.slice.call(arguments);

console.log(newArr);

 

위의 부분에서는 객체를 배열로 바꾸기 위해 배열의 프로토타입에 정의된 slice 메소드를 호출한다. 이렇게 하면 arguments 객체의 요소들을 복사하는 새로운 배열이 만들어진다.

 

위의 코드는 배열이기 때문에 이를 indexOf 메소드를 사용하여 문자열 b의 인덱스를 반환하게 된다

 

arguments 객체는 배열이 아니기 때문에 결론적으로 에러가 발생하게 된다.