apply, call

이번주 공부 과제

1. this

2. bind

3. apply
4. call
5. es6 arrow function VS es5 function
6. hoisting(let, var, const)

apply, call

apply,call은 함수를 호출하는 방법이다. 일반적으로 사용되는 함수 () 말고도 apply와 call을 통해서 역시 함수를 호출 할 수 있다.

function func(num1, num2){
    return num1 + num2;
};

func(1, 2) // 3
func.call(null, 1, 2) // 3
func.apply(null, [1, 2]) // 3

허허 이래서 뭐 어쩌라는걸까 ?? 언제 call을 스고 언제 apply를 쓰고 무슨 차이가 있길래 그럴까 ??

일단 apply와 call의 차이점부터 보자면

• call : 인자가 따로 떨어져 있네요
• apply : 인자가 배열로 들어가 있네요

배열이냐 아니냐 차이가 있다.

• 그렇다면 왜 call과 apply같은 호출방법이 있을까 ???

우선 call과 apply의 첫번째 인자로 null이 들어갔는데, 이 자리는 원래 this가 들어가는 자리이다. 이 전 포스팅에서도 다뤘던 그 this 말이다. 정리하자면…

호출 된 함수의 this가 가리킬 객체가 들어간다

이 말이 무슨 말일까 ???

this가 가리킬 객체라 …

호출하는 함수에서 this를 표현해야 하는데, 이 때 this로 가르키고 싶은 객체를 넣어줄 수 있다는 것!!

   1  let name = {
   2      name : 'Wecode',
   3      printName : function() { console.log(this.name) }
   4  }
   5
   6  let KYJ = {
   7      name : 'Kim Young Jun',
   8  }
   9
   10  let YBM = {
   11      name : 'Yoo Byeong Min',
   12  }
   13
   14  name.printName()            // Wecode
   15  name.printName.call(KYJ)    // Kim Young Jun
   16  name.printName.apply(YBM)    // Yoo Byeong Min

• 15번째 줄의 call에 KYJ 라는 객체를 넣어주게 되니 name.printName에서 가리키는 this가 KYJ가 되었다 !! 그 결과 KYJ.name인 Kim Young Jun을 표현하게 되었다.
• 16번째 줄 역시 분석해보자. name.printName에서 console.log(this.name)을 실행 하게 되는데, .apply(YBM)을 적용했다. 그 결과 name.printName 에서의 this가 YBM을 가리키게 되었고, YBM.name인 Yoo Byeong Min을 콘솔로그로 찍게 되었다.

1. apply와 call은 배열이냐 아니냐의 차이가 있다.

2. apply와 call은 this를 가리킬 객체를 넣어 줄 수 있다. (약간 function 훔쳐쓰는 도둑 같은 느낌)

• 참고 여기서 참고했어요

1. this

2. bind

3. apply

4. call

5. es6 arrow function VS es5 function
6. hoisting(let, var, const)