비동기, 콜백

동기 / 비동기 처리

동기(Synchronous)

: 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다린다

동작 방식

1. 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓임 - push
2. 쌓인 반대 순서대로 함수가 실행 - LIFO
3. 실행이 된 함수는 Call Stack에서 제거 - pop

비동기(Asynchronous)

: 어떤 요청을 보냈을 때 그 요청이 끝날 때까지 기다리는 것이 아니라, 다음 동작이 실행된다

동작 방식

1. Call Stack 에서 비동기 함수가 호출되면 Call Stack 에 먼저 쌓였다가 백그라운드(Web API)로 이동한 후에 해당 함수가 등록되고 Call Stack 에서 사라진다
2. 백그라운드(Web API) 에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 이동 된다 - push
3. 이벤트 루프(Event Loop)가 Call Stack이 비어있는지 확인을 한 후에 비어 있으면, Call Stack 에 Callback Queue 에 있는 콜백 함수를 넘겨준다 - push
4. Call Stack에 들어온 함수 실행, 실행이 끝나면 Call Stack 에서 사라진다 - pop

• console.log(1)
  
  setTimeout(function() {
      console.log(2)
  }, 2000)
  
  console.log(3)

  : 2 를 기다리지 않고 3을 먼저 실행한 후에 2가 출력된다

---

Call back

: 다른 함수가 실행을 끝낸 뒤 실행되는 함수
-> 자바스크립트에서 함수는 object.
--> 다른 함수의 인자로 넘겨지는 함수를 콜백 함수 라고 한다

Call back 이 필요한 이유

: 자바스크립트는 이벤트 기반 언어이기 때문 -> 이벤트들을 기다리며 명령을 수행하게 된다

Call back 만들기

function a(test, callback) {
    console.log(test)
    callback()
}

function print() {
    console.log('print 함수')
}

a(1, print)

function a(test, callback) {
    console.log(test)
    callback()
}


a(1, function() {
    console.log("print 함수")
})

Call back 지옥

: Call back 함수를 여러번 중첩해서 사용하면 코드 가독성이 안좋아진다

Promise, Async를 활용해서 해결한다