[함수지향] 함수의 호출

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743 )

---

 함수 호출 

아래코드는 함수를 호출하는 가장 기본적인 방법이다.

function func(){
}
func();

 

자바스크립트에서 함수라는 것은 일종의 객체이다.

객체는 속성을 가지고 있는데, 그 속성에 함수가 들어있다면 그것을 '메소드'라고 부른다.

---

위 코드와 같이 선언을 하면은 func.apply 또는 func.call이라는 메소드에 접근할 수 있다.

.apply와 .call은 func라는 함수를 호출하는 역할을 한다.

 

위의 예제에서 함수 func는 Function이라는 객체의 인스턴스다.

따라서, func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다.

즉, apply는 함수 객체에 담겨있는 메소드라는 뜻이다.

---

아래 예제에서 .apply를 사용해보자.

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

위 예제에서 sum.apply(null, [1,2])는 sum(1,2)와 같은 의미이다.

apply의 첫번째 인자값이 null이면, apply가 실행된 함수 인스턴스는 전역객체(브라우저는 window)를 맥락으로 실행하기 때문이다.

 

따라서, 예제의 결과값은 3이 나온다.

 

참고로, apply의 첫번째 인자에 null을 넣으려면 사용하지 않는 것이 좋다.

null을 넣어서 apply를 사용하는 것보다 함수호출을 하는 것이 더 복잡하지도 않고 가독성이 편하기 때문이다.

---

아래 예제를 통해서 apply의 첫번째 인자에 값을 대입해보자.

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

위 소스 코드에서 sum 함수는 this라는 객체에 담겨있는 값들을 하나씩 꺼내서, 지역변수 _sum에 더해준  후 그 값을 return해주고 있다. 여기서 this는 현재 정해져 있지 않지만, 이것은 호출할 때 정해진다.

 

위 코드에서 sum.apply(o1)명령어를 통해 sum 함수를 호출하는데 인자 값으로 o1객체를 전달하고 있다.

 

즉, sum.apply(o1)가 실행되고 있을 순간에는 o1이라는 객체에 sum이라는 메소드가 되는 것이다.

그래서 해당 명령어가 실행되면 sum함수에서 this는 o1이다.

 

따라서, 위 예제의 결과 값은 6과 185가 출력된다.

---

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

하지만, JavaScript에서 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다.