JavaScript: Understanding the Weird Parts - Closures and Callbacks

우리는 클로저, 실행컨텍스트, 일급함수도 다 알았다
처음 알았으면 머리가 어지러울수도 있다
그러나 setTimeout이나 제이쿼리 이벤트가 전부 클로저를 사용하는 거라고 얘기해주면 어떤 생각이 들까?
클로저와 콜백에 대해 알아보자.

function sayHiLater() {
  var greeting = 'Hi!'
  setTimeout(function() {
    console.log(greeting)
  }, 3000) // ms단위
}

sayHiLater()

이것은 콜백 함수이다.

실행하고 3초를 기다려본다.
console에 잘 뜬다.

함수 표현식이 클로저를 이용하는것이라고 생각하자.
greeting은 전형적인 클로저이다. 스코프 체인을 따라 올라가기 때문이다.

클로저 덕분에, 3초 뒤에 실행 스택이 pop되어도 잘 동작할 수 있다.
이제 제이쿼리를 보자.

$("button").click(function() {
  
})

함수 표현식을 파라미터로 넘기고 있다. 즉 일급 함수를 사용했다.

콜백 함수란 무엇인가?

콜백 함수란 다른 함수에게 인자로 넘기는 함수를 말한다.
즉, 다른 함수의 수행이 끝났을 때 실행되는 함수이다. calls back이라는 의미에서 callback이라는 이름이 붙었다.

직접 콜백 함수를 사용하는 함수를 만들어보자.

function tellMeWhenDone(callback) {
  const a = 1000 // some work
  const b = 2000 // some work
  callback()
}

tellMeWhenDone(function() {
  console.log("i am done!")
})

tellMeWhenDone(function() {
  console.log("All done...")
})

수행이 끝난 뒤 받은 함수를 실행한다.