비동기 - 콜백과 프로미스 객체의 이해

 

동기

 

동기 방식 (Synchronous)

- 코드를 작성한 순서대로 동작하는 것

function a() {
  console.log('A')
}
function b() {
  console.log('B')
}

a()
b()

/* 실행 결과 */
A
B

 

비동기 방식 (Asynchronous)
- 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행

- 실행 순서가 보장되지 않는다

- 비동기 처리의 방식은 setTimeOut, callback, promise 등이 있다

 

비동기 - 콜백과 프로미스 객체의 이해

 

콜백 함수 (callback)

- 특정 함수에 매개변수로 전달되는 함수 (데이터처럼 사용되는 함수)

- 실행 순서를 보장

- 콜백이 많아지면 관리하기가 불편해진다 (콜백 지옥)

function a(callback) {
  setTimeout(() => {
    console.log('A')
    callback()
  }, 1000)
}
function b() {
  console.log('B')
}

a(function () {
  b()
})

/* 실행결과 */
A
B

 

Promise 객체

- 자바스크립트 비동기 처리에 사용되는 객체

- 비동기 연산 결과를 알려주기 위해서 사용

- Callback 보다 코드가 간결해지고 가독성이 좋아진다

- async & await 키워드를 통해서 비동기의 내용 처리 가능 (실행 순서 보장)

function a() {
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('A')
      resolve()
    }, 1000)
  })
}
function b() {
  console.log('B')
}
async function test() {
  await a()
  b()
}
test()

/* 실행결과 */
A
B

 

---

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN