비동기 작업에서 콜백 함수의 역할

비동기 처리란?

작업 1을 진행하다가 이 일이 끝나는걸 기다렸다가 다음 작업 2를 진행하는 게 아니라

작업 1 진행 - 이 일이 끝나던 말던 다음 작업 2를 진행하는 것

JS 런타임이 싱글 스레드라 어쩌고.... non-blocking 어쩌고....

 

여기서 콜백함수는 ? 다른 함수에 매개변수로 넘겨준 함수

콜백함수가 비동기 함수다 X

콜백함수는 비동기 함수의 처리 결과에 대한 후속 처리를 도와주는 함수다 O

콜백함수는 비동기 처리할때만 쓴다 X

function A(callback){callback() }
A(() => console.log(1)) 
1, 2 이런거 대신에 그냥 함수를 넘겨줘서 함수 안에서 넘겨준 함수가 실행되는거
콜백함수는 클로저이기 때문에 함수가 선언되었을 때의 환경을 기억한다고 함

 

아주 대표적인 비동기함수인 setTimeout을 예로 들어보면
let a = 0
setTimeout(() => {a++},1000)
console.log(a) // 0

 

왜 0일까?
setTimeout은 실행되면 Web API를 호출하고(Timer API라고 한다고 함)여기에 타이머와 콜백함수를 등록해놓고 
자신은 id값을 리턴하면서 함수는 종료됨 - 그다음 호출스택에 console.log(a)가 들어오기 때문에 a는 아직 0이고
타이머 지나고 + 호출스택 다 비워진 후에 setTimeout의 콜백함수가 들어와서 a++을 해주는 것

 

그렇다면 타이머가 지난 후에 변화된 a값을 가지고 뭔가를 하고 싶다면 ? 콜백 함수를 쓰면 가능함

let a = 1
function b(callback){
 setTimeout(() => {
  a++
  callback()},1000)
    }
b(() => console.log(a)) //1초 후에 2

이렇게 코드를 짜면 타이머가 지나고 a의 값이 바뀐 뒤에 callback으로 넣은 함수가 실행되기 때문에 a의 값이 2가 됨