04 콜백 함수

4-1 콜백 함수란?

• 콜백 함수: 다른 코드의 인자로 넘겨주는 함수. 그 제어권도 함께 위임한다.

4-2 제어권

4-2-1 호출 시점

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

• 적절한 시점에(0.3초마다) 익명 함수 실행

4-2-2 인자

• map 메서드는 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 하나씩 꺼내어 콜백 함수를 반복 호출하고, 콜백 함수의 실행 결과들을 모아 새로운 배열을 만든다.
• 인자의 이름은 상관없이 순서에 의해서만 각각을 구분하고 인식한다.

4-2-3 this

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

4-3 콜백 함수는 함수다

• 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됩니다.

4-4 콜백 함수 내부의 this에 다른 값 바인딩하기

var obj1 = {
	name: 'obj1',
	func: function () {
		console.log(this.name);
	}
};
setTimeout(obj1.func.bind(obj1), 1000);

var obj2 = { name: 'obj2' };
setTimeout(obj1.func.bind(obj2), 1500);

4-5 콜백 지옥과 비동기 제어

• 동기적인 코드 : 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행
• 비동기적인 코드 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. (setTiemout, addEventListener, XMLHttpRequest 등 별도의 요청, 실행 대기, 보류 등과 관련된 코드들)
• 가장 간단한 방법? → 기명함수로 변환
• ES6의 Promise, Generator, ES2017의 async/await