Async와 Callback

Asynchronous (비동기성)

  • 절차적으로 진행되지 않는 특성
  • 실행 결과가 반환되기 전에 다른 코드를 실행 가능

예제

setTimeout(() => {
  console.log('안녕하세요')
}, 2000)

console.log('안녕히가세요')

console.log("안녕하세요")console.log("안녕히가세요")보다
먼저 작성되어 있지만 아래와 같이 안녕히가세요먼저 출력된다.

아직 안만듬

비동기성의 이유

  • 자바스크립트에 치중되어 있다.
  • 인터넷 속도의존적이다.
  • 사용자의 인터랙션존재한다.

속도가 느려도 인터랙션은 되어야 한다.

Call back

다른 코드인수로서 넘겨주는 실행 가능한 코드
콜백으로 넘겨받은 코드는 즉시 실행할 수도 있고, 나중에 실행될 수도 있다.
콜백 함수는 보통 아래와 같은 구조를 가진다.

function doSomethingElseAsync(callback) {
  console.log('doSomethingElseAsync : Wait for half a sec.')
  setTimeout(function() {
    callback()
  }, 500)
}

예제

function sayHello(sayGoodbye) {
  setTimeout(() => {
    console.log('안녕하세요')
    sayGoodbye()
  }, 2000)
}

sayHello(() => console.log('안녕히 가세요'))

비동기성의 예제와 다르게 안녕하세요가 먼저 출력되고 안녕히 가세요가 출력된다.
여기서 인자로 받은 sayGoodbyecallback함수로서 받아졌다.

아직 안만듬

Callback Hell

비동기 로직 처리를 위해 콜백 함수연속적으로 사용할 때 발생하는 문제
아래와 같은 연속적인 콜백 함수의 사용으로 가독성을 해친다.

a(function(resultFromA) {
  b(resultFromA, function(resultFromB) {
    c(resultFromB, function(resultFromC) {
      d(resultFromC, function(resultFromD) {
        e(resultFromD, function(resultFromE) {
          f(resultFromE, function(resultFromF) {
            console.log(resultFromF)
          })
        })
      })
    })
  })
})

해결 방법으로는 Promiseasync - Await Func이 존재한다.


Written by@[Minsu Kim]
🌈22살 대학생 학생 개발자🙂