위 글은 modern javascript deep dive 42장을 참고하였습니다.

Javascript = single thread

자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖습니다. 이것을 single thread 방식의 동작이라고 합니다. 단 하나의 실행 컨텍스트를 갖는다는 의미는 한번에 한 가지 일만 처리할 수 있다는 의미입니다.

때문에 시간이 걸리는 작업을 하는 경우 작업 중단(Blocking)이 발생하게 됩니다.

synchronous vs asynchronous

A라는 작업을 통하여 3초 뒤 B라는 작업을 수행시키는 함수가 있다고 가정해 봅시다.

위의 그림에서 첫번째처럼, 3초간 다른 업무를 실행시키기 않고 기다리는 것을 동기 처리방식이라고 합니다.

반면 두 번째 그림에서 처럼, c라는 업무를 3초간 처리한 후, 3초 뒤에 B라는 업무를 실해앟는 방식을 비동기 처리라고 합니다.

Asynchronous function

비동기 함수에는
1. 타이머 함수인 setTimeout, setInterval
2. HTTP요청
3. 이벤트 핸들러

가 존재합니다.

비동기 처리를 수행하는 함수들은 callback papttern을 사용합니다.(두번째 그림에서 A를 통해 B를 불러온 것처럼요).

Callback function (12.7.4)

그렇다면 callback 패턴, callback 함수란 무엇일까요?

function repeat(n, f) {
blahblah
f(n)
  blahblah
}

const callbackF = function (i) {
어쩌구저쩌구
}

repeat (5, callbackF)

위의 구조처럼, 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수(=callbackF)를 callback 함수라고 합니다.
매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수(Higher-order-function, HOF, =repeat)라 합니다.

콜백함수는 고차함수에 의해 호출되며, 고차함수는 필요에 따라 콜백 함수에 인수를 넣을 수 있습니다.

❗️함수에 인수를 넣다 실행시키지 않도록 주의하세요!

옛날 옛적 첫번째 프로젝트 때, 콜백 함수에 인수를 전달하기 위해 아래와 같은 코드를 사용한 적이 있습니다.

function repeat(n, f) { ... }
const callbackF(i) { ... }

repeat(5, callbackF(x))

위의 코드의 경우, callbackF에 x을 넣어 실행한 결과 값이 repeat로 전달됩니다. 저는 아래와 같은 방식으로 우회하였습니다.

repeat(5, ()=>callback(x))