Programming/JavaScript

함수의 호출 apply

잇나우 2019. 12. 16. 17:59
반응형

자바스크립트에서 함수라고 하는것은 일종의 객체이다. 객체는 속성을 가지고 있고 그 속성에 '값'이 저장되어 있다면 그냥 속성(property)라고 하고, 그 속성(property)에 함수가 저장되어 있다면 메소드(method)라고 한다.

함수의 가장 기본적인 호출 방법이다. func라는 변수에 담겨있는 자바스크립트 호출하게 된다. 

function func(){
}
func();

func라는 이름의 함수는 객체이기 때문에, 저 함수는 메소드를 가지고 있다. 저 메소드는 기본적으로 가지고 있는 내장된 메소드, 내장된 객체이다.

func라는 이름의 함수를 정의하게 되면 func.apply혹은 func.call 이라고 하는 메소드에 접근을 할 수가 있다. 메소드들이 하는 역할은 정의한 함수를 호출하는 역할을 한다. apply와 call은 같은 취지이지만 사용방법이 조금 다르다.

function sum(arg1, arg2){
    return arg1+arg2;
}

sum(1, 2);			// 1번 함수를 호출할때 기본 방법
sum(4, 2);			// 2번

sum.apply(null, [1, 2]);  // 3번
sum.apply(null, [4, 2]);  // 4번

sum이라는 함수가 있을때 기본적으로 sum을 호출할때 쓰는 방법은 1번이나 2번과 같은 식으로 호출할 수가 있다. 하지만 또다른 방법이 있다. 3번 혹은 4번처럼 작성하였을때 각각 1번과 2번과 값이 같게 나온다. sum(1, 2)를 한것과 sum.apply를 하고 첫번째 값은 null 두번째 인자로 배열을 주고 sum의 첫번째 인자는 이 배열의 첫번째 값, 두번째 인자는 배열의 두번째 값으로 배열을 넣으면 같은 결과를 호출한다. apply 메소드는 두번째 인자에 원래 오리지널 함수 호출의 인자를 배열에 순서대로 담으면 똑같은 결과가 나온다. 위와 경우에는 apply메소드를 사용하면 복잡하기만 하기 때문에 안좋다. apply메소드를 사용하는 이유는 첫번째 인자에 있다.

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

 

for in문으로 this라고 하는 객체에 있는 값들을 하나씩 꺼내서 그것을 _sum이라고 하는 지역변수에 더해서 그 결과를 리턴해주고 있다. 함수자체에서 this는 무엇인지 정해져 있지 않다. this는 호출할때 정해진다. sum이란 함수를 호출하기 위해 o1이라고 하는 객체를 첫번째 인자로 주었다. sum.apply를 하게되면 sum이 호출이 되는데 o1이라고 하는 객체를 apply에 인자로 주게되면 o1이 sum이라고 하는 함수의 this가 된다. 이것을 코드로 바꾸면 중간에 1번코드가 암시적으로 들어간것이라고 생각하면 된다. sum.apply(o1)이 실행되는 그 순간에는 o1이라고 하는 객체에 sum이라고 하는 메소드가 되는것이다.(o1.sum) this값을 프로그래밍적으로 변경해서 마치 sum이라는 함수가 o1이라고 하는 객체의 속성인것 처럼 실행되게 할 수 있다.

반응형

'Programming > JavaScript' 카테고리의 다른 글

this  (0) 2019.12.20
생성자와 new  (0) 2019.12.17
arguments  (0) 2019.12.16
클로저(closure)  (0) 2019.12.15
유효범위(Scope)  (0) 2019.12.14