JavaScript 동기 비동기

동기(Synchronous)와 비동기(Asynchronous)

 

동기적 처리

• 서버에 요청을 보냈을 때 응답이 돌아와야 다음 동작을 처리할 수 있다. 
• 먼저 요청을 보낸 순서대로 작업을 실행한다. 

console.log(1)
console.log(2)
console.log(3)

>> 1
   2
   3

 

비동기적 처리

• 서버에 요청을 보냈을 때 응답 여부에 관계 없이 다음 작업을 실행한다. 
• 요청을 보낸 작업은 결과가 나오는 즉시 실행한다. 
• 짜장면 배달을 예로 들어보면, 짜장면 배달을 받고 식사를 다 마칠때까지 배달부가 기다려야 한다면 다른 배달을 할 수 없기 때문에 비효율적일 것이다. 때문에 짜장면을 전달하고 손님이 식사를 하는 동안 다른 배달을 하면 효율적으로 배달을 할 수 있다. 

function asyncTimer(seconds){
    console.log("짜장면 배달됨")
    setTimeout(()=>{
        console.log("식사 완료")
        },
        seconds*1000
    ) 
    console.log("배달부 떠남")
}

asyncTimer(5)

• asyncTimer 함수를 보면, 짜장면이 배달된 후 setTimeout()을 사용해 식사 완료 시간을 뒤로 늦추고, 식사를 하는 동안 배달부는 떠난다. 
• asyncTimer(5) 를 실행함으로써 약 5초 뒤 식사 완료 메시지를 보낸다.
• 즉, 비동기로 작업을 마친 후에 setTimeout()함수를 실행하도록 추후 업무를 맡겨놓는다. 
• 작업을 마친 뒤에 '식사완료' 라고 callback 해달라고 알려준다.