[JS] 동기와 비동기 (1)

• 동기 (Synchronous) : 작성한 순서대로 실행되는 코드
• 비동기 (Asynchronous) : 작성한 순서대로 실행되지 않는 코드
  • ex) setTimeout addEventListner fetch 함수
  • 서버의 응답을 기다리는 동안 다른 일이 수행된다.

const a = () => {
  setTimeout( () => {
    console.log(1)
  }, 1000)
}
const b = () => console.log(2)

a()
b()

// 2 1

a 함수에서 1초를 기다리는 동안, b가 먼저 실행되어 2가 먼저 출력된다
하지만 a와 b를 순차적으로 실행하고 싶다면 비동기 처리가 필요하다.

콜백 패턴

가장 기본적으로 콜백 함수를 사용하여 실행 순서를 처리할 수 있다

const a = (callback) => {
  setTimeout( () => {
    console.log(1)
    callback()    // 콜백함수 (b 함수) 를 실행
  }, 1000)
}
const b = (callback) => {
  setTimeout( () => {
    console.log(2)
    callback()    // 콜백함수 (b 함수) 를 실행
  }, 1000)
}
const c = () => console.log(3)

a(() => {
  b(() => {
    c()
  })
}) // 콜백지옥

// 1 2 3

하지만 콜백 지옥이 발생하게 되어 코드가 복잡해지는 단점이 있다.