[4장] 코어 자바스크립트 콜백 함수

4장 콜백 함수

4-1. 콜백 함수란?

콜백 함수 (callback function)

• 다른 코드의 인자로 넘겨주는 함수(with 제어권)
• 함수의 제어권이 위임받은 코드에게 있음
  • 제어권 - 호출 시점, 인자
• callback : 부르다, 실행하다 call + 뒤돌아오다, 되돌다 back → 되돌아 호출해달라.
• 콜백 함수를 위임받은 코드가 자체적인 내부 로직에 의해 콜백 함수를 적절한 시점에 실행

4-2. 제어권

4-2-1. 호출 시점

콜백 함수 예제 - setInterval()

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);

• scope : window 객체 (생략하고 함수처럼 사용)
• delay(밀리초)마다 func 실행하며 리턴값 없음
• 반복적으로 실행되는 내용 자체를 특정할 수 있는 고유한 ID 값 반환
  • 반복 실행되는 중간에 종료하기 위함 clearInterval

var count = 0;

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

var timer = setInterval(cbFunc, 300); // 0 1 2 3 4

• timer에는 setInterval의 ID 값 담김
• cbFunc가 콜백 함수, 그 제어권은 setInterval이 가짐
• 콜백 함수의 제어권을 넘겨받은 코드가 콜백 함수 호출 시점에 대한 제어권을 가짐

4-2-2. 인자

콜백 함수 예제 - map()

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

• 배열을 순회하며 콜백 함수 반복 호출하고 함수의 실행 결과들을 모아 새로운 배열 리턴
• 컴퓨터는 변수명이 아닌 순서에 의해 각각을 구분하고 인식
• 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권 가짐

4-2-3. this

setTimeout(function(){console.log(this)}, 300); // window {...}

[1, 2, 3, 4, 5].forEach(fuction(x){
    console.log(this);
}); // window {...}

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e){
   console.log(this, e); 
}); // <button id="a">클릭</button>

• (1) setTimeout은 내부에서 콜백 함수를 호출할 때 전역객체를 넘김
• (2) forEach는 별도의 인자로 this를받지 않았기에 전역 객체
• (3) addEventListener는 호출한 주체인 HTML 엘리먼트

4-3. 콜백 함수는 함수다

• 콜백 함수로 어떤 객체의 메서드를 전달하더라도 메서드가 아닌 함수로서 호출되는 것

var obj = {
    vals: [1, 2, 3],
    logValues: function(v, i){
        console.log(this, v, i)
    }
};

(1) obj.logValues(1, 2); // {vals: Array(3), logValues: ƒ} 1 2

(2) [4, 5, 6].forEach(obj.logValues);
// window {...} 4 0 
// window {...} 5 1
// window {...} 6 2

• (1) 은 메서드로서 호출
• (2)는 메서드로서 호출한 것이 아닌 함수만 전달한 것

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

• 콜백 함수 내부에서 this가 객체를 바라보게 하는 법
  • this르르 다른 변수에 담아 콜백 함수로 활용할 함수 내에서 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

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

콜백 지옥(callback hell)

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 깊어지는 현상
• 주로 비동기적 작업에서 발생
  • 현재 실행 중인 코드의 완료 여부와 무관하게 다음 코드가 실행
  • setTimeout , addEventListener , XMLHttpRequest 등
  • 별도의 요청, 실행 대기, 보류 등과 관련된 코드

콜백 지옥 해결

• 익명의 콜백 함수를 기명함수로 전환

비동기 작업의 동기적 표현

• Promise + async/await
• 비동기 작업을 수행하고자 하는 함수 앞에 async
• 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await 을 표기하는 것만으로도 뒤의 내용을 자동으로 Promise로 전환

4-6. 정리

콜백함수란?

• 다른 코드에 인자로 넘겨줌으로써 제어권도 함께 위임한 함수

제어권을 넘겨받은 코드는 다음과 같은 제어권 가짐

• 콜백 함수 호출 시점
• 콜백 함수 호출할 때 인자로 넘겨줄 값들 및 순서가 정해져 있음
• 콜백 함수의 this를 임의로 바꿀 수 있음