📝 오늘 한 것

1. 콜백 함수

📚 배운 것

4. 콜백 함수

1) 콜백 함수란?

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

2) 제어권

(1) 호출 시점

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

콜백 함수(cbFunc)의 제어권을 넘겨받은 함수(setInterval)는 콜백 함수 호출 시점에 대한 제어권을 가진다.
→ setInterval 함수가 0.3초 뒤 cbFunc 함수 호출

(2) 인자

콜백 함수를 호출하는 주체는 사용자가 아니라 그 콜백 함수의 제어권을 넘겨받은 함수이다.
따라서, 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인가는 전적으로 그 콜백 함수의 제어권을 넘겨받은 함수에게 달린 것이므로 사용자가 임의로 변경할 수 없다.

(3) this

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

후자의 경우, 콜백 함수의 제어권을 넘겨받을 코드는 '자체적으로' call/apply 메서드의 첫 번째 인자에 콜백 함수 내부에서의 this가 될 대상을 명시적으로 바인딩한다.

예로써 map 메서드를 간단히 구현하면 다음과 같다.
map 메서드 자체적으로 call(thisArg || window)를 통해 thisArg 값이 있을 경우 this를 바인딩하고 있음을 알 수 있다.

Array.prototype.map = function (callback, thisArg) {
  var mappedArr = [];
  for (var i = 0; i < this.length; i++) {
    var mappedValue = callback.call(thisArg || window, this[i], i, this);
    mappedArr[i] = mappedValue;
  }
  return mappedArr;
}

다른 예로 addEventListener는 콜백 함수를 호출할 때 아예 call 메서드의 첫 번째 인자에 addEventListener 메서드의 this를 그대로 넘겨주도록 자체적으로 정의되어 있다.

3) 콜백 함수는 함수다

콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아니라 함수로서 호출된다.
즉, 콜백 함수로 객체의 메서드를 전달한 경우더라도 콜백 함수의 this는 해당 객체가 아니라 전역 개체를 가리키게 된다.

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

그럼에도 불구하고 콜백 함수 내부에서 this가 전역 객체가 아니라 해당 객체를 가리키도록 하려면 어떻게 해야 할까?
map이나 forEach 처럼 별도의 인자로 this를 받는 함수의 경우에는 여기에 원하는 값을 넘겨주면 되지만, 그렇지 않은 경우에는 콜백 함수의 제어권을 넘겨주는 함수에 this의 제어권도 함께 넘겨주게 되므로 사용자가 임의로 값을 바꿀 수 없으므로 다른 방법을 사용해야 한다.
콜백 함수 내부의 this에 다른 값을 바인딩하기 위한 4가지 방법이 있다.

(1) this를 다른 변수에 할당

전통적으로는 this를 다른 변수에 담아 콜백 함수로 활용할 함수에서 this 대신 그 변수를 사용하도록 했다.

var obj1 = {
  name: "obj1".
  func: function () {
    var self = this; // this를 다른 변수에 할당
    return function () {
      console.log(self.name); // 콜백 함수에서 그 변수를 사용
    };
  }
};

var callback = obj1.func();
setTimeout(callback, 1000);

(2) this 대신 해당 객체 사용

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

setTimeout(obj1.func, 1000);

(1)보다 훨씬 직관적이고 간결하지만, 이렇게 작성하면 가리킬 객체가 obj1으로 고정이 되어 다양한 상황에서 재활용할 수 없다.

(3) (1)의 func 함수 재활용

var obj1 = {
  name: "obj1",
  func: function () {
    var self = this; // 2. 여기서 this도 obj2
    return function () {
      console.log(self.name); // obj2
    };
  }
};

var obj2 = {
  name: "obj2",
  func: obj1.func,
};
var callback2 = obj2.func(); // 1. 여기서 func 메서드 내부에서의 this는 obj2이므로
setTimeout(callback2, 1500);

var obj3 = { name: "obj3" };
var callback3 = obj1.func.call(obj3); // call 메서드는 호출 주체 함수(obj1.func)를 즉시 실행
setTimeout(callback3, 1500);

번거롭긴 하지만 this를 우회적으로나마 활용함으로써 다양한 상황에서 원하는 객체를 바라보는 콜백 함수를 만들 수 있다.

(4) bind 메서드 활용

bind 메서드는 call 메서드와 달리 호출 주체 함수를 즉시 실행시키지 않고 새로운 함수를 반환하기 때문에 굳이 obj1.func에서 setTimeout의 콜백 함수로 활용할 함수를 따로 return 해주지 않아도 된다.

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

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

5) 콜백 지옥과 비동기 제어

(1) 콜백 지옥, 비동기적인 코드

콜백 지옥이란 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.
이는 주로 비동기적인 작업을 수행할 때 자주 발생하는 문제이다.

비동기적인 코드란 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 코드를 말한다.
따라서, 비동기적인 코드는 (설령 작업을 완료하는 데 시간이 많이 필요하더라도) 요청과 결과가 동시에 일어나는 동기적인 코드와 달리, 요청과 결과가 동시에 일어나지 않는다.
별도의 요청(fetch, XMLHttpRequest), 실행 대기(addEventListener), 보류(setTimeout) 등과 관련된 코드가 비동기적인 코드이다.

(2) 콜백 지옥 해결 🔥

콜백 지옥을 해결하는 가장 간단한 방법은 익명의 콜백 함수를 기명 함수로 전환하는 것이다.

다른 방법으로 비동기 작업을 동기적으로 혹은 동기적인 것처럼 보이게끔 처리해줄 수도 있다.
이를 위해 ES6에서 Promise와 Generator가 도입되었고, ES2017에서는 async/await이 도입되었다.

[TIL] 211012 (promise / async) / [TIL] 211013 (await) 참고

Promise

new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수(실행 함수)는 호출할 때 바로 실행되지만, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음(then) 또는 오류 구문(catch)로 넘어가지 않는다.
따라서, 비동기 작업이 완료될 때, 비로소 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능하다.

Generator

비동기 작업이 완료되는 시점마다 next 메서드를 호출함으로써 Generator 함수 내부의 소스가 위에서부터 아래로 순차적으로 진행되도록 할 수 있다.

Promise + Async/await

var addCoffee = function (name) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(name);
    }, 500);
  });
};

var coffeeMaker = async function () {
  var coffeeList = "";
  var _addCoffee = async function (name) {
    coffeeList += (coffeeList ? "," : "") + await addCoffee(name);
  };
  await _addCoffee("에스프레소");
  console.log(coffeeList);
  await _addCoffee("아메리카노");
  console.log(coffeeList);
  await _addCoffee("카페모카");
  console.log(coffeeList);
  await _addCoffee("카페라떼");
  console.log(coffeeList);
};

coffeeMaker();

비동기 작업을 수행하고자 하는 함수 앞에 async를 표현하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await을 표기한다.
Promise가 await에 넘겨지면, await은 Promise가 fulfill 되기를 기다렸다가, 해당 값을 return 한다.
이를 통해 promise의 then과 흡사한 효과를 얻을 수 있다.

coffeeMaker()
await _addCoffee("에스프레소")
await addCoffee("에스프레소")
0.5초 뒤에 "에스프레소" 값을 담은 resolve 함수 호출 ( = promise 상태 fullfilled)
_addCoffee 함수의 await addCoffee("에스프레소")가 "에스프레소"를 return

✨ 내일 할 것

1. 클로저