비동기 처리에 대한 고찰

비동기처리란 한명의 사람이 마치 한꺼번에 2가지 3가지 일을 하는 것처럼 보이게 할 수 있는 기술입니다. 조금 더 상세하게 설명을 하면 비동기함수가 처리되는 동안에 다른 일을 하면서 비동기함수가 처리되는 것을 기다리게 되고 오래 걸리는 작업을 비동기처리 함으로써 매끄럽게 프로그램이 작동하게 할 수 있습니다.

자바스크립트는 싱글스레드 언어이므로 비동기처리가 필수불가결합니다.

비동기 처리의 예

• ajax 호출과 같은 네트워크 요청
• 파일을 읽고 쓰는 작업
• 의도적으로 시간을 지연시키는 작업(setTimeOut)

비동기 처리하는 방법

1. 콜백

콜백 함수란 다른 함수의 인자로써 이용되는 함수 혹은 어떤 이벤트에 의해 호출되어지는 함수를 일컫습니다.

• 함수의 인자로써 이용되는 함수의 예

  function printAnumber(number, callbackFucntion) {
      console.log(`number is ${number}`)
  	callbackFunction()
  }
  
  function printFinish () {
      console.log('number printing is Finish')
  }
  
  printAnumber(6, printFinish)
  

• 이벤트에 의해 호출되어지는 함수의 예

  function hadleClick() {
      console.log('clicked!')
  }
  
  onClick(handleClick)
  

  클릭이 될때마다 handleClick을 실행합니다

비동기 처리에서의 콜백

function asyncPrintFunction () {
    setTimeOut(function() {
        console.log('now print')
    }, 500)
}

ayncPrintFunction()
conosole.log('print finish')
// print finish
// 0.5초후
// now print

이와 같이 비동기 함수를 사용하다 보면 생각과는 다르게 동작할 수 있습니다.

function getUser() {
    let user
    setTimeout(function() {
    	user = {
            name: 'john',
            age: 30,
        }    
    }, 100)
    return user
}

const user = getUser()
console.log(user)

// undefined

유저 정보를 불러오는 함수를 비동기 처리 하였지만 비동기 처리가 끝나지 않은채로 리턴하여서 undefined가 리턴 되었습니다. 이를 해결하기 위해 우리는 콜백 함수를 이용할 수 있습니다.

function gerUser(callbackFunction) {
    let user
    setTimeout(function(callbackFunction) {
        user = {
            name: 'john',
            age: 30
        }
        callbackFunction(user)
    }, 100)
}

getUser(function(user){
    console.log(user)
})

// 0.1초 후
// { name: 'john', age: 30 }

콜백함수를 이용하면 이와 같이 우리가 원하던 결과를 얻어 낼 수 있습니다.

이런 결과를 얻을 수 있는 것은 비동기 처리를 한 후에 콜백 함수를 실행하기 때문에 다음과 같은 결과를 얻을 수 있습니다. 이는 Event Loop에 관해 이해가 필요하므로 다음에 한번 다뤄 보도록 하겠습니다.

참고 사이트

https://www.daleseo.com/js-async-callback/

참고 도서

Learning Javascript (한빛미디어)