콜백 함수란?

콜백함수는 다른 코드의 인자로 넘겨주는 함수다. 콜백 함수를 넘겨받은 코드는 적절한 때에 따라 콜백 함수를 실행시킬 것이다. 콜백 함수에서 중요한 점은 제어권에 있다.

어떤 함수 X 를 호출하면서 ‘특정 조건일 때 함수 Y 를 실행해라’ 즉 호출 주체가 나 자신이 아닌 X가 되기때문에 제어권을 위임한 것이다.

제어권

setInterval 예제

var count = 0;
var timer = setInterval(function () {
	console.log(count);
	if(++count > 4) clearInterval(timer);
}, 300);

setInterval 메서드는 특정 조건에 따라 반복 되는 함수이다. setInterval(callback, ms) 형태이고,

ms 마다 callback 함수를 실행하라 라는 것이다. timer에 할당한 이유는 setInterval 메서드는 실행결과로 고유한 ID값을 반환한다. 이 id값을 이용해 반복실행되는 중간에 종료 할 수 있게 하기 위해서다.

여기서 3초마다 callback 함수를 실행하는 것은 내가 아닌 setInterval 메서드이다. 즉, 호출 주체와 제어권인 setInterval 이 된다.

map

Array.prototype.map(callback[, thisArg])
callback: function(currentValue, index, array) 

map 메서드는 배열의 인자를 하나씩 콜백함수를 실행하는 것이다.

callback 함수를 호출하는 주체가 사용자가 아닌 map 메서드이므로 map 메서드가 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지는 map 메서드에게 달린 것이다.

this

콜백 함수도 함수이기 때문에 기본적으로 this는 전역 객체를 참조한다. 단, 제어권을 넘겨받을 코드에서 콜백함수에 별도로 this 가 될 대상을 지정한 경우 그 대상을 참조한다.

map 메서드 구현 예제

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;
	}
}

음 . . 이거 callback.call 부분에 this바인딩이라하고 .., map 에서의 value, index를 지정해주는건가?

콜백 함수는 함수다.

콜백 함수로 어떤 객체의 메서드를 전달하더라고 메서드로서 호출이 아닌 일반 함수로서 호출이 된다.(this 바인딩 x) 즉, 메서드가 실행되는 것 뿐이다.

var obj = {
	vals: [1, 2, 3],
	logValues: function (v, i) {
		console.log(this, v, i);
	}
};
obj.logValues(1, 2);    // 여기서 this는 obj이다.
[4,5,6].forEach(obj.logValues);// 콜백함수 자리에 메서드로서 전달했지만 this는 window이다. 
//  obj를 this 로 전달하는 것이 아니라, obj.logValues가 가키리는 함수만 전달한 것이다.

어떤 함수의 인자에 객체의 메서드를 전달하더라도 결국 메서드가 아닌 함수일 뿐이다.

콜백 지옥

콜백 지옥이란 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상이다. 이를 해결하기위해 기명함수로 전환하고 Promise, Generator, async await 을 사용한다.

학습할 키워드

• Promise
• Generator
• async await