[Javascript] 함수지향 : 함수의 호출(apply, call)

SJ·2022년 10월 15일
0

Javascript

목록 보기
5/13

함수 호출

function func(){
}
func();

원래 함수는 선언한 후 호출해야 실행된다. 위는 함수를 호출하는 가장 기본적인 방법이다.
함수를 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call 또는 apply하는 방법이 있다.

apply()

JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서 함수를 객체라고 했다. JavaScript에서 아래의 sum과 같은 함수는 Function이라는 객체의 인스턴스다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다. 그 중 함수를 호출할 수 있는 Function.apply와 Function.call이라는 메소드가 있는데, 둘의 사용법은 거의 비슷하다.

apply 메소드는 두개의 인자를 가질 수 있는데, 첫번째 인자는 함수(sum)가 실행될 맥락이다. (맥락의 의미는 다음 예제를 통해서 살펴보자.) 두번째 인자는 배열인데, 이 배열의 담겨있는 원소가 함수(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

JavaScript에서 this는 함수를 호출할 때 결정된다. 위처럼 this를 따로 지정하지 않았으면 this는 전역객체가 되는데, apply 메소드의 첫번째 인자는 함수가 실행될 맥락이기 때문에 sum.apply(o1)을 실행하면 sum이라는 함수의 this는 o1이 되어 for in문으로 _sum에 객체 o1의 속성값들을 전부 더해 리턴한다.

++

어렵다면 이렇게 생각하자. sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다. 아래와 비슷하다. (실행결과가 조금 다를 것이다. 그것은 함수 for in문으로 객체 o1의 값을 열거할 때 함수 sum도 포함되기 때문이다.)

o1.sum = sum;
alert(o1.sum());
// 6function sum(){
//    var _sum = 0;
//    for(name in this){
//        _sum += this[name];
//    }
//    return _sum;
// }
delete o1.sum();

sum의 o1 소속의 메소드가 된다는 것은 이렇게 바꿔 말할 수 있다. 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미다. 일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 된다. 하지만 JavaScript에서 함수는 독립적인 객체로써 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다. 흥미롭다.

apply(null)

만약 apply의 첫번째 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다.

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

출처 : 생활코딩 - Javascript

0개의 댓글