[JavaScript] 동기 & 비동기 및 콜백 개념 정리

동기(Synchronous)

- 모든 일을 순차적으로 처리하는 것 (이전 작업이 끝나면 → 다음 작업 시작)
- 어떤 요청을 보내면 그 요청이 끝날 때까지 기다림

console.log('시작')
console.log('중간')
console.log('끝')

/*
시작
중간
끝
*/​

 

비동기(ASynchronous)

- 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬 수행)
- 비동기로 처리 시 먼저 처리되는 부분부터 보여주므로 사용자 경험에 긍정적인 효과
- 비동기 동작은 Call stack, Web API, Task Queue, Event Loop 등으로 구성

Call Stack
- 요청이 들어올 때마다 순차적으로 처리하는 Stack
Web API
- JavaSecript 엔진이 아닌 브라우저에서 제공하는 환경으로 시간이 소요되는 작업을 처리
Task Queue
- 비동기 처리된 Callback 함수가 대기하는 Queue
Event Loop
- Call stack이 비어있는지 확인 후 빈다면 Task Queue에 대기 중인 오래된 작업을 Call stack으로 보냄

처리방식
1. 모든 작업은 Call Stack으로 들어간 후 처리 (LIFO 구조)
2. 오래 걸리는 작업이 Call stack으로 들어오면 Web API로 보내 별도 처리
3. Web API에서 처리가 끝난 작업은 Task Queue에 순서대로 들어감 (FIFO)
4. Event Loop가 call stack이 비어있는 것을 체크하고, 비어있다면 Task Queue의 가장 앞에 있는 작업을 Call stack으로 보냄. 

📌그림으로 보는 비동기 작동 방식

console.log('Hi')

setTimeout(function wait(){
    console.log('waiting')
}, 3000)

console.log('Bye')

/*
Hi
Bye
Waiting
*/

비동기 처리의 단점
- Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리
- 실행 결과를 예상하면서 코드를 작성할 수 없게 함

콜백 함수 (Callback)

콜백 함수
- 콜백함수는 다른 함수에 매개변수로 넘겨준 함수
- 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 하는 역할

콜백 지옥
- 비동기 처리를 위한 콜백을 작성할 때 마주하는 문제

tep1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        step7(function (value7) {
                        // 내용 작성
                        })
                    })
                })
            })
        })
    })
})​

// 가독성이 매우 떨어지고 코드 수정 하기 어려움

Promise

- 콜백 지옥을 해결하기 위한 비동기 처리 객체
- 비동기 작업의 완료 또는 실패를 나타내는 객체

then // 요청한 작업이 성공하면 콜백 실행
catch // then이 하나라도 실패하면 콜백 실행

work1()
  .then((result1) => {
  // work2
  return result2
  })
  .then((result2) => {
  // work3
  return result3
  })
  .catch((error) => {
  // error
  })​

- 콜백 함수는 Event Loop가 현재 실행 중인 Call stack을 완료하기 이전에 호출되지 않음을 보장함
- then 메서드를 이용하여 추가한 경우에도 위 내용을 보장
- then을 여러 번 사용하여 여러 개의 콜백 함수를 추가할 수 있음(Chaining)