콜백 함수

 🧐 콜백 함수란?

👉 콜백함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한다. 

👉 쉽게 예를 들어보자, 내가 좋아하는 친구의 생일 파티에 초대를 받았다. 그래서 나는 부모님한테 "친구가 나를 파티에 초대했어, 파티가 끝나면 나를 학교로 데려다 줄 수 있을까?"라고 부탁했다. 여기서 "나를 학교로 데려다 줄 수 있을까?"라는 부탁이 콜백 함수와 비슷하다. 

이 상황에서 부모님에게 콜백을 전단했고, 파티가 끝나는 시점은 모르지만, 그 시점이 되면 부모님은 전달한 요청 (나를 학교로 데려다 주는 것)을 수행하게 된다. 

👉 콜백 함수는 어떤 이벤트가 발생하거나 특정 작업이 완료되었을 때 실행되어야 하는 함수이다. 콜백 함수는 이벤트나 작업이 완료되는 시점에 실행되도록 "나중에 호출하라고" 예약해 놓는 방법을 제공한다. 

👉 callback은 "호출하다"는 의미인 call과, "되돌다"는 의미인 back의 합성어로, "되돌아 호출해달라"는 명령이다. 

👉 어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 나에게 알려달라는 요청을 함께 보낸다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 스스로 판단하고 Y를 직접 호출한다. 이처럼 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것이다.

 

1️⃣ - 1️⃣ 호출시점

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

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

👉 timer 변수에는 setInterval의 ID 값이 담긴다. setInterval에 전달한 첫 번째 인자인 cbFunc 함수(이 함수가 곧 콜백 함수이다)는 0.3초 마다 자동으로 실행된다. 

👉 콜백 함수 내부에서는 count 값을 출력하고, count를 1만큼 증가시킨 다음, 그 값이 4보다 크면 반복 실행을 종료하라고 한다. 

👉 코드 실행 방식과 제어권

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

이 코드를 실행하면 0.3초에 한 번씩 숫자가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종료된다. setInterval이라고 하는 '다른 코드'에 첫 번째 인자로서 cbFunc 함수를 넘겨주자 제어권을 넘겨받은 setInterval 이 스스로의 판단에 따라 적절한 시점에(0.3초마다) 이 익명 함수를 실행했다. 이처럼 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다. 

 

1️⃣ - 2️⃣ 인자

👉 콜백 함수 예제(Array.prototype.map)

let newArr = [10, 20, 30].map((currentValue, index) => {
    console.log(currentValue, index);
    return currentValue + 5;
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [15, 25, 35]

👉 map 메서드는 첫 번째 인자로 callback 함수를 받고, 생략 가능한 두 번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 특정할 수 있다. thisArg를 생략할 경우에는 일반적인 함수와 마찬가지로 전역객체가 바인딩된다. map 메서드는 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 하나씩 꺼내어 콜백 함수를 반복 호출하고, 콜백 함수의 실행 결과들을 모아 새로운 배열을 만든다. 

 

👉 콜백 함수의 첫 번째 인자에는 배열의 요소 중 현재값이, 두 번째 인자에는 현재값의 인덱스가, 세 번째 인자에는 map 메서드의 대상이 되는 배열 자체가 담긴다. 

 

👉 첫 번째(인덱스 0)에 대한 콜백 함수는 currentValue에 10이, index에는 인덱스 0이 담긴 채 실행된다. 각 값을 출력한 다음, 15 (10 + 5)를 반환한다. 그리고 두 번째(인덱스 1)에 대한 콜백 함수는 currentValue에 20이, index에는 1이 담긴 채로 실행된다. 25 (20 + 5)를 반환한다. [10, 15, 25]이라는 새로운 배열이 반환된다. 

 

👉 인자의 순서를 바꿔도 컴퓨터는 순서에 의해서만 각각을 구분하고 인식한다. 

 

👉 map 메서드를 호출해서 원하는 배열을 얻으려면 map 메서드에 정의된 규칙에 따라 함수를 작성해야 한다. map 메서드에 정의된 규칙에는 콜백 함수의 인자로 넘어올 값들 및 그 순서도 포함돼 있다. 콜백 함수를 호출하는 주체가 사용자가 아닌 map 메서드이므로 map 메서드가 콜백 함수를 호출할 때 인자가 어떤 값들을 어떤 순서로 넘길 것인지가 전적으로 map 메서드에게 달렸다. 이처럼 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가진다. 

 

2️⃣ 콜백 함수는 함수다

👉  메서드를 콜백 함수로 전달한 경우

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

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

👉 위에 obj.logValues는 앞에 점이 붙어서 메서드로서 호출했다. this는 obj을 가리키고 인자로 넘어온 1, 2가 출력된다.

👉 반면에 그 밑에 forEach 함수의 콜백 함수로서 전달했다. obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj.logValues가 가리키는 함수만 전달했다. obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj와 직접적인 연관이 없어진다. forEach에 의해 콜백 함수로서 호출이 되고, this를 별도로 지정하지 않아서 전역객체를 바라보게 된다. 

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

 

3️⃣ 콜백 함수 내부의 this에 다른 값을 바인딩하는 좋은 방법

👉 bind 메서드 활용

let obj1 = {
    name: "obj1",
    func: function () {
        console.log(this.name);
    }
};

// this.name = obj1을 출력
setTimeout(obj1.func.bind(obj1), 1000);

// this.name = obj2를 출력
let obj2 = { name: "obj2" };
setTimeout(obj1.func.bind(obj2), 1500);