Callback & This with javascript

콜백 함수란?

콜백 함수callback function는 다른 코드의 인자로 넘겨주는 함수입니다.

콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 것입니다.

 

콜백 함수는 제어권과 관련이 깊습니다.

콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 

콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것입니다.

 

function printHello() {
	console.log("Hello");
}

function doIt(fn) {
	fn()
}

doIt(printHello);

 

printHello 를 doIt 의 인자로 넘겨줌으로써 제어권이 넘어간 상태입니다.

 

This

콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만,

제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 된다

 

Array.prototype.map = function (callback, thisArg) {
	var mappedArr = [];
    for (var i = 0; i < this.length; i ++) {
    	var mappedValue = callback.call(thisArg || window, this[i], i, this);
    	mappedArr[i] = mappedValue;
    }
    return mappedArr;
};

 

메서드 구현의 핵심은 call/apply 메서드에 있습니다. this에는 thisArg 값이 있을 경우에는 그 값을

없을 경우에는 전역객체를 지정하고, 첫 번째 인자에는 메서드의 this가 배열을 가리킬 것이므로 배열의 i번째 요소 값을, 두 번째 인자에는 i 값을, 세 번째 인자에는 배열 자체를 지정해 호출합니다.

 

그 결과가 변수 mappedValue에 담겨 mappedArr의 i번째 인자에 할당됩니다.
이제 this에 다른 값이 담기는 이유를 정확히 알 수 있겠네요. 바로 제어권을 넘겨받을 코드에서 call/apply 메서드의 첫 번째 인자에 콜백 함수 내부에서의 this가 될 대상을 명시적으로 바인딩하기 때문입니다.