[코어 자바스크립트 북스터디 4주차] 4장. 콜백 함수

✅ 삼색 볼펜법 활용
빨간색: 핵심내용
파란색: 핵심은 아니지만 중요하다고 생각되는 내용
초록색: 흥미로운 내용

4장 콜백 함수

1. 콜백 함수란?

콜백 함수: 다른 코드의 인자로 넘겨주는 함수, 제어권과 관련이 깊음

callback(되돌아 호출해달라) = call(부르다, 호출하다) + back(되돌아오다, 되돌다)

어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것
이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단. Y를 직접 호출함

→ 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수

2. 제어권

2-1. 호출 시점

콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수의 호출 시점에 대한 제어권을 가짐

2-2. 인자

map의 callback 함수 인자 → callback(currentValue, index, array)
- 첫 번째 인자: 배열의 요소 중 현재값(currentValue)
- 두 번째 인자: 현재값의 인덱스(index)
- 세 번째 인자: map 메서드의 대상이 되는 배열 자체(array)

콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가짐

2-3. this

바로 제어권을 넘겨받을 코드에서 call/apply 메서드의 첫 번째 인자에 콜백 함수 내부에서의 this가 될 대상을 명시적으로 바인딩하기 때문

3. 콜백 함수는 함수다

콜백 함수는 함수다. 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다.
그러니까 어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 함수일 뿐.

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

전통적으로는 this를 다른 변수에 담아(var self = this;) 콜백 함수로 활용할 함수에서는 this 대신 그 변수를 사용하게 하고, 이를 클로저로 만드는 방식이 많이 쓰였음.

하지만 위의 방법은 조금 아쉬운 부분이 있었기 때문에, 이제는 ES5에 발표된 bind 메서드를 사용함.

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

콜백 지옥: 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여 쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상.

비동기는 동기의 반대말.
- 동기적인 코드: 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
- 비동기적인 코드: 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감

콜백 지옥 해결 방법
1. 익명의 콜백 함수들을 모두 기명 함수로 전환하는 방식
2. ES6의 Promise
3. ES6의 Generator
4. ES2017 async/await

4주 차 회고

콜백 함수라는 게 1차원적으로 그냥 '콜백 함수'로만 생각하고 사용했는데, 이렇게 많은 내용이 얽혀 있는 건지는 오늘에서야 알았다. 그동안 내가 정말 자바스크립트를 겉핥기로만 공부를 했구나 다시금 반성했던 하루였다. 사실 오늘 내용은 완벽하게 와닿지는 않아서 여러 번 읽어봐야 할 것 같다. 특히 Generator는 예전부터 어려웠는데 Generator와 Iterator는 한번 추가적으로 포스팅을 해봐야겠다. 그래도 한 가지, 1주 차에는 코드를 읽었을 때 한 번에 이해가 가지 않아 한참을 다시 보곤 했는데 확실히 책과 코드를 읽는 속도가 빨라진 것을 느낀다.(물론 오늘만 집중력이 좋았던 걸 수도 있지만..🥲)