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