JavaScript) arguments / apply&call

arguments

함수를 호출할때 전달한 인자가 담긴 배열
(사실은 배열이 아니라, arguments 객체의 인스턴스이며, arguments 변수에 담긴 숨겨진 유사배열로 보자)

사용할 수 있도록 이름과 특성이 미리 약속된 특수한 배열로,
arguments[0]을 통해 함수로 전달된 첫번째 인자를 알아낼수있다.
또한 arguments.length를 통해 함수로 전달된 인자의 개수도 알아낼수있다.

예제 1

function sum(){
    var i, _sum = 0;    
    for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }   
    return _sum;
}
document.write('result : ' + sum(1,2,3,4));

함수 sum은 0개의 인자로 정의되었으나, 실제로는 4개의 인자를 전달하며 사용되었다.
arguments를 통해 전달된 인자 값과 개수를 알아내고있다.
타 언어라면 당연히 오류겠지만, JS는 상대적으로 자유로움을 알수있다.

예제 2

function zero(){
    console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
    );
}
function one(arg1){
    console.log(
        'one.length', one.length,
        'arguments', arguments.length
    );
}
function two(arg1, arg2){
    console.log(
        'two.length', two.length,
        'arguments', arguments.length
    );
}
zero(); // zero.length 0 arguments 0 
one('val1', 'val2');  // one.length 1 arguments 2 
two('val1');  // two.length 2 arguments 1

arguments.length - 함수로 전달된 실제 인자의 개수
함수.length - 함수에 정의된 인자의 개수

---

apply & call

Javascript에서 함수를 정의하면, 모든 함수는 사실 Function 객체의 인스턴스이다.
따라서 자연스럽게 Function 객체가 갖고있는 기본적인 메소드들을 상속한다.
이 중에 Fn.apply와 Fn.call이 있다.

function sum(arg1, arg2){
    return arg1+arg2;
}
alert(sum(1,2)); //3
alert(sum.apply(null, [1,2])); //3

출력결과도 같고, 그냥 위처럼 함수를 실행해도 되지만
아래의 경우, 함수가 실행되는 context를 설정할수있다.
apply의 1번째 인자는 sum함수가 실행될 context를 의미한다. 이와 관련해 아래에서 다시 언급한다.
apply의 2번째 인자는 배열로, 이 배열에 담긴 원소가 sum함수의 인자로 순차적으로 대입된다.

o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
    var _sum = 0;
    for(name in this){
        _sum += this[name];
    }
    return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

2개의 객체를 만들고, 함수를 만든다.
다시한번, 객체 Function의 메소드 apply의 1번째 인자는 함수가 실행될 context이다.
함수 sum의 this값이 전역객체(브라우저에선 window)가 아닌 다른 객체(o1, o2)가 되는것이다.
(1번째 인자값으로 null을 전달하면, 전역객체를 context로 인식)

좀더 예리한 관점으로 보면, JS에서 함수는 독립적인 객체로 존재하고 apply&call과 같은 메소드를 통해 다른 객체의 소유물인것처럼 실행되고 있는것이다.