14.2 콜백

콜백은 자바스크립트에서 가장 오래된 비동기적 메커니즘입니다.
우리는 사용자 입력과 타임아웃을 처리하면서 이미 콜백을 사용했습니다.
콜백은 간단히 말해 나중에 호출할 함수입니다.
콜백 함수 자체에는 특별한 것이 전혀 없습니다.
콜백 함수도 일반적인 자바스크립트 함수일 뿐입니다.
콜백 함수는 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용합니다.
드물게는 배열에 넣어서 쓸 때도 있습니다.
항상 그런 건 아니지만, 콜백은 보통 익명 함수로 사용합니다.

먼저 setTimeout을 사용하는 단순한 예제로 시작합니다.
setTimeout은 콜백의 실행을 지정된 밀리초만큼 지연하는 내장 함수입니다.

console.log("Before timeout: " + new Date());
function f() {
    console.log("After timeout: " + new Date());
}
setTimeout(f, 60 * 1000) // 1분
console.log("I happen after setTimeout!");
console.log("Me too!");

(독수리 타법을 사용하지 않는 한) 콘솔에서 이 코드를 실행하면 다음과 같은 결과를 보게 될 겁니다.

초보자들은 우리가 작성하는 코드와 실제 실행되는 코드의 순서가 다르다는 사실에 종종 당황하곤 합니다.
우리는 컴퓨터가 우리가 작성한 코드를 정확히 그 순서대로 실행할 거라고 기대합니다.
달리 말하면, 다음과 같은 결과를 예상합니다.

Before timeout: ~~~~
After timeout: ~~~~
I happen after setTimeout!
Me too!

기대대로 된다면 좋겠지만, 그것은 비동기적이지 않습니다.
비동기적 실행의 가장 큰 목적, 가장 중요한 요점은 어떤 것도 차단하지 않는다는 것입니다.
자바스크립트는 싱글 스레드를 사용하므로, 우리가 컴퓨터에 60초 동안 대기한 후 코드를 실행하라고 지시하다면, 그리고 그 실행이 동기적으로 이루어진다면 꽤 골치 아픈 일이 벌어집니다.
프로그램이 멈추고, 사용자 입력을 받아들이지 않고, 화면도 업데이트하지 않을 겁니다.
이런 일을 한 번씩으 겪어봤을 테고 절대 유쾌한 경험은 아닐 겁니다.
비동기적 테크닉은 프로그램이 이런 식으로 멈추는 일을 막아줍니다.

이 예제에서는 명확하게 표현하기 위해 이름 붙은 함수 f를 setTimeout에 넘겼습니다.
이름 붙은 함수를 써야 하는 타당한 이유가 없다면, 일반적으로는 다음과 같이 익명 함수를 사용합니다.

setTimeout(function() {
    console.log("After timeout: " + new Date());
}, 60*1000)

setTimeout에는 문법적인 불편함이 하나 있습니다.
지연 시간을 정하는 숫자 매개변수가 마지막 매개변수이기 때문에 익명 함수를 사용할 때, 특히 그 함수가 길다면 시간 매개변수를 찾기 어렵거나 익명 함수의 일부분처럼 보일 때가 있습니다.
게다가 setTimeout과 setInterval은 대부분 익명 함수와 함께 사용합니다.
지연 매개변수는 마지막 행에 쓴다는 원칙을 세워 두면 이런 혼란을 피할 수 있습니다.