[ JavaScript ] JS 함수의 메소드 호출 (feat. apply)

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

아래의 예제는 우리가 평소에 알고있는 함수의 형식입니다.

 

function func(){
}
func();

 

 

하지만 자바스크립트는 함수를 호출할때 특별한 방법을 제공합니다.

 

함수는 객체로 취급하고 func는 Function 이라는 객체의 인스턴스 입니다.

 

즉 func는  객체 Function이 가지고 있는 메소드들을 상속하고 있습니다.

 

이번글에선 Function.apply을 알아보겠습니다.

 

- 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은 3개의속성을 가지고있고

각각의 이름은  val1, val2,val3입니다.

 

o2는 4개의 속성을 가지고있고

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

 

 

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)를 맥락으로 실행되게 됩니다.

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.