[ JavaScript ] 자바스크립트 기본 문법 | 함수의 호출(apply)

이미지 출처 :  https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

 

 

기본적으로 우리가 함수를 정의하고 호출하는 방법은 아래 예제와 같습니다.

 

function func(){
}
func();

 

 

 

JavaScript는 함수를 호출하는 특별한 방법을 제공합니다.

함수는 객체이고, 함수 func는 Function이라는 객체의 인스턴스입니다.

 

따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다고 얘기할 수 있습니다.

 

이 포스팅에서 다뤄볼 메소드는 Function.apply과 Function.call 입니다.

 

 

이 메소드들을 이용해서 함수를 호출해봅시다.

 

 

 

 

 

자바스크립트 기본 문법  ::  apply

 

 

function sum(arg1, arg2){
    return arg1+arg2;
}
console.log(sum(1,2));
console.log(sum.apply(null, [1,2]));

 

 

 

 

 

함수 sum은 Function 객체의 인스턴스 입니다.

 

그렇기 때문에 객체 Function 의 메소드 apply를 호출 할 수 있습니다.

 

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;
}
console.log(sum.apply(o1)) // 6
console.log(sum.apply(o2)) // 185

 

 

 

 

 

 

우선 o1 과 o2 라는 두개의 객체를 만들었습니다.

 

o1는 3개의 속성을 가지고 있고, 각각의 이름은 val1, val2,val3 입니다.

 

o2는 4개의 속성을 가지고 있고, o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다릅니다.

 

그 다음엔 함수 sum을 만들었습니다.

 

이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서

객체 자신(this)의 값을 열거한 후에

각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있는 함수입니다.

 

 

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이라고 했쥬?.

 

sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고

sum을 호출한 후에 sum을 삭제합니다.

 

 

 

sum이 o1 소속의 메소드가 된다는 것은 이렇게 바꿔 말할 수 있습니다.

 

함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미입니다.

 

일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 됩니다.

 

하지만 JavaScript에서 함수는 독립적인 객체로서 존재하고,

apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있게 되는 것입니다.

 

만약 apply의 첫번째 인자로 null을 전달하면,

 

apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 됩니다.