코어 자바스크립트 정리 - [4] 콜백함수

01 - 콜백 함수란?

콜백함수 : 다른코드의 인자로 넘겨주는 함수.

콜백함수를 전달받은 코드는 적절한 시점에 필요에 따라 실행.

 

02 - 제어권

1) 호출 시점

콜백함수 예제)

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

// 실행결과
// 0 (0.3초)
// 1 (0.6초)
// 2 (0.9초)
// 3 (1.2초)
// 4 (1.5초)

실행방식 및 제어권

code	호출 주체	제어권
cbFunc	사용자	사용자
setInterval(cbFunc, 300);	setInterval	setInterval

 

2) 인자

콜백 함수를 호출하는 주체는 사용자가 아닌 특정 메소드( or 함수) 이므로 메소드가 콜백함수를 호출할때 인자를 넘겨주는 방식( 어떤 값, 어떤순서로 넘길것인지)은 메소드에 종속된다.

 

콜백 함수 인자 예제)

Array.prototype.map 메서드는 콜백함수의 첫번째 인자로 현재 값, 두번째 인자로 인덱스를 넘긴다.

var newArr = [10, 20, 30].map(function (currentValue, index) {
    console.log(currentValue, index);
    return currentValue + 5;
});
// 실행결과
// 10 0
// 20 1
// 30 2
// [15, 25, 35]

// 콜백함수의 두번째 인자명이 currentValue 이지만, map 매소드는 해당 인자로 현재 인덱스를 전달
var newArr2 = [10, 20, 30].map(function (index, currentValue) {
    console.log(index, currentValue);
    return currentValue + 5;
});
// 실행결과
// 10 0
// 20 1
// 30 2
// [5, 6, 7]

 

3) this

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

하지만 제어권을 가진 코드에서 별도로 콜백함수에 this를 지정하는 경우가 있음.

 

 

03 - 콜백 함수는 함수다

콜백 함수로 어떤 객체의 메서드를 전달하더라고, 그 메서드는 함수로서 호출된다.
원래 객체와의 직접적인 연관이 없어짐.

 

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

bind 예제)

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

var obj2 = {name: 'obj2'};
setTimeout(obj1.func.bind(obj2), 1000);
// 출력 "obj2"

 

05 - 콜백 지옥과 비동기 제어

동기적인 코드 : 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행

비동기적인 코드 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감.

( I/O 작업, XMLHttpRequest 등 )

 

콜백 지옥을 해결하는 여러가지 방법.

ES6 : Promise

ES6 : Generator

ES2017 : async / await

 

---

참조 : 코어 자바스크립트 ( 정재남 )