자바스크립트 (5) - Asynchronous & callback

1) 비동기(Asynchronous) 함수

저번 포스트에서 Non-block function에 대해서 소개를 했습니다.

그런데, Non-block이라는 용어와 비동기(Asynchronous)를 혼용해서 사용했는데요.

사실 두개는 아예 다른 차원의 뜻이지만,

자바스크립트에서는 Non-block function이면 비동기함수이기 때문에 두개를 혼용해도 무리가 없었던 것입니다.

1-1. setTimeout 요약

저번에 Non-block function의 예시로 setTimeout 함수를 들고 왔는데요.

이 함수가 작동하는 원리를 요약하면 다음과 같습니다.

1. setTimeout(fnc, time) 함수가 call stack에 추가된다.
2. setTimeout(fnc, time)이 Web API의 Timer에게 일을 대신 맡긴다 : Asynchronous
   • Timer가 담당할 업무
     1. 주어진 time만큼의 시간을 기다린다.
     2. 그 시간이 끝나고, Task Queue에게 fnc를 넘겨준다.
3. setTimeout(fnc, time) 함수가 call stack에서 제거된다 : Non-block
4. Task Queue에서는, 현재 진행중인 최상단의 call stack이 비워지면 Task Queue에 있는 fnc를 다시 call stack에 넣어서 실행시킨다.

1-2. 비동기함수와 non-block function의 차이점

결론적으로,

• Non-block function : call stack에 추가되자 마자 바로 제거됨.

  => 다음 함수가 실행될 수 있음.

• Asynchronous : Javascript 실행 컨텍스트가 아닌 다른 프로세스(여기서는 Web API) 에 일을 맡김

  => 자바스크립트가 시간이 오래 걸리는 일(파일 I/O, 타이머, Ajax 통신..)을 직접 하지 않아도 됨.

그러다보니,

비동기함수를 요청할 때는 외부 프로세스가 일을 잘 끝냈는지 확인 하기 위하여

추가적인 절차가 필요한데, 그것을 위해 인자로 함수를 더 넣어주는 경우가 많습니다.

그러한 함수를 callback function이라고 합니다.

1-3. 아쉬운점

아쉽지만 우리가 자체적으로 custom asynchronous function을 만들 수는 없습니다.

그래서 실질적으로 비동기함수는 built-in function들 뿐인데요.

예를 들면 이런 것들이 있습니다.

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Some HTML5 APIs such as the File API, Web Database API
• Technologies that support onload

1-4. Call-back hell (콜백 지옥)

그렇지만 call back function은 한번으로 끝나지 않는 경우가 많습니다.

왜냐하면 비동기함수에는 setTimeout 이외에도 결과물을 받아오는 함수도 있기 때문입니다.

예를 들면, XMLHttpRequest와 같은 함수 말이죠.

이 함수를 이용해서 외부 API에 GET 요청을 해서 데이터를 받아오는 상황을 생각해봅시다.

데이터를 성공적으로 받았다면, 데이터가 json 형태이기 때문에 자바스크립트가 인식하기 좋게 Object로 바꿔야 할것이고, 그 이후에 특정 키워드가 포함된다면 특정한 로직을 수행하고 싶을 수도 있습니다.

그런데, 콜백을 한번만 사용한다면, 비동기적인 함수의 특성상 위의 작업 순서가 꼬일 수가 있습니다. 가령, Object로 바꾸지 않았는데 특정 키워드를 판별하는 로직이 작동할 수도 있을 것입니다.

이 순서를 제어하기 위해서 보통 callback 함수 내부에 callback 함수를 넣는 방식을 사용하는데요,

그것을 많이 하면 가독성이 안좋은 경우가 많습니다.

그래서 이것을 극복하기 위해서 다음에 소개할 Promise와 Async-await라는 개념이 등장했습니다.