1. 의미

핵심 키워드: "기다리지 않는다."

• 코드가 순차적으로 실행하되, 작업이 오래 걸리거나 무거운 일을 차례대로 하기까지 기다리지 않고 다음 이벤트도 동시다발적으로 실행된다.
• But 여기서 '동시다발적'이라는 말은 'Multi-tasking'의 의미보다는, 힘든 일을 어디엔가 위임해 주고 나는 다른 일을 한다는 의미에 가깝다.

2. 코드 예시

2-1. 동기적인 코드 실행의 예시

// sync.js
const meSync = {
  laundry: () => {
    console.log('세탁기 돌리기 시작')
    let percentage = 25

    while (percentage !== 100) {
      console.log(`${percentage}% 완료`)
      percentage += 25
    }

    console.log(`${percentage}% 빨래 완료`)
  },
  dishes: () => console.log('설거지 하기'),
  toilet: () => console.log('화장실 청소 하기'),
}

const doWorkSync = () => {
  meSync.laundry()
  meSync.dishes()
  meSync.toilet()
}

doWorkSync()

// node sync.js
세탁기 돌리기 시작
25% 완료
50% 완료
75% 완료
100% 빨래 완료
설거지 하기
화장실 청소 하기

meSync 객체에 있는 laundry 함수를 보면, 세탁기를 100% 돌린 후에 완료되었다는 메시지를 띄우도록 하고 있고, 이전 작업이 모두 끝난 후 차례로 설거지, 화장실 청소를 하도록 코드가 짜여 있다.

2-2. 비동기적인 코드의 예시

// async.js
const meAsync = {
  laundry: () => {
    // setInterval => 비동기적으로 수행하는 코드
    console.log('세탁기 돌리기 시작')
    let percentage = 25

    const intervalId = setInterval(() => {
      console.log(`${percentage}% 완료`)
      percentage += 25

      if (percentage === 100) {
        clearInterval(intervalId)
        console.log(`${percentage}% 빨래 완료`)
        resolve()
      }
    }, 100)
  },
  dishes: () => console.log('설거지 하기'),
  toilet: () => console.log('화장실 청소 하기'),
}

const doWorkAsync = () => {
  meAsync.laundry()
  meAsync.dishes()
  meAsync.toilet()
}

doWorkAsync()

// node async.js
세탁기 돌리기 시작
설거지 하기
화장실 청소 하기
25% 완료
50% 완료
75% 완료
100% 빨래 완료

setInterval 함수는 대표적인 비동기함수 중 하나다. 세탁기를 돌리기 시작하면서 동시에 다음 작업을 순차적으로 실행함으로써 시간을 단축할 수 있다. laundry 함수가 동기적인 작업을 할 수 있도록 하려면 Promise 함수로 변환해주어야 한다.

2-3. 비동기 작업을 수행하는 함수를 동기적인 작업을 하도록 만들기

const meAsync = {
  laundry: () =>
    new Promise((resolve, reject) => {
      // setInterval => 비동기적으로 수행하는 코드
      console.log('세탁기 돌리기 시작')
      let percentage = 25

      const intervalId = setInterval(() => {
        console.log(`${percentage}% 완료`)
        percentage += 25

        if (percentage === 100) {
          clearInterval(intervalId)
          console.log(`${percentage}% 빨래 완료`)
          resolve()
        }
      }, 100)
    }),
  dishes: () => console.log('설거지 하기'),
  toilet: () => console.log('화장실 청소 하기'),
}

const doWorkAsync = async () => {
  await meAsync.laundry()
  meAsync.dishes()
  meAsync.toilet()
}

doWorkAsync()

// node async.js
25% 완료
50% 완료
75% 완료
100% 빨래 완료
설거지 하기
화장실 청소 하기

동기적인 작업을 수행하도록 해 주는 async/await은 fetch 함수의 .then과 비슷한 역할을 한다. 앞의 코드가 모두 실행된 후 뒤의 코드를 순차적으로 실행할 수 있도록 한다. 위 예시에서는 세탁기를 모두 돌리고 난 후에 설거지와 화장실 청소를 수행하도록 하고 있다.

3. 어떻게 가능하게 되는가?

• 무거운 일을 맡고 있는 아이들이 뒷받침해주고 있기 때문에 코드를 실행하는 싱글 쓰레드가 계속해서 일을 처리할 수 있다.