코어자바스크립트 강의정리 - 4. 콜백함수

a라는 함수가 있다. b라는 함수에게 a라는 함수를 넘겨주며 'a라는 함수를 알아서 잘 작동시켜주세요' 라고 하면 b 함수가 a 함수의 제어권을 갖는다. 그리고 a 함수를 콜백함수라고 한다. b함수가 a 함수의 제어권을 갖게 되면 a 함수의 실행시점, 매개변수의 내용, 순서, this(특별히 바인드 하지 않는 이상) 는 모두 b 함수가 결정한다. arr.forEach 매서드의 첫번째 인자는 콜백함수인데, 그 콜백함수의 첫번째 인자는 배열의 요소, 두번쨰 인자는 인덱스 이런식으로 정해져 있는 것이 그 예이다. 참고로 forEach의 두번째 인자는 thisArg이고 생략가능하다. 이를 이용해 forEach내부에서 사용할 this값을 정해줄 수 있다.

추가로 주의해야할 점이 있다. 콜백함수는 '함수' 라는 것이다. 당연한 이야기 같지만 예시를 보며 살펴보자

var arr=[1,2,3,4,5]
var obj={
  vals:[1,2,3],
  logValues:function(v,i){
    if(this.vals){
      console.log(this.vals,v,i);
    }else{
      console.log(this,v,i)
    }
  }
}

이 코드에서

obj.logValues(1, 2)

를 실행하면 3 강에서 배웠듯이 매서드로 호출했으니까 this는 obj가 되고 this가 존재하므로 [1, 2, 3] 1, 2 가 출력된다.

그러나

arr.forEach(obj.logValues)

와 같이 사용하면 obj.logValues는 메서드로 호출한게 아니라 forEach의 콜백으로 넘긴 것이 되고 this는 forEach가 결정하는 값이 된다. 이상황에서 this는 전역 객체가 된다. 만약에 obj를 this로 하고 싶다면

arr.forEach(obj.logValues.bind(obj))
arr.forEach(obj.logValues,obj)

의 두가지 방법이 있다. 콜백함수에 obj를 바인드 해주거나, forEach에 명시된대로 두번째 인자로 obj를 넘겨주어 this를 설정하거나