자바스크립트를 공부하면 비동기라는 익숙하지 않은 단어를 마주한다. 다른 언어에서 흔히 들을 수 없었던 이 단어는 무슨 뜻일까?
비동기의 국어사전적 의미는 앞에서 행하여진 사상이나 연산이 완료되었다는 신호를 받고 비로소 특정한 사상이나 연산이 시작되는 방식을 뜻한다.
잘 모르겠다.
위키피디아 영영사전에서의 비동기(asynchronous)의 의미는 (computing, communication) Having many actions occurring at a time, in any order, without waiting for each other로 소개되어있다.
한번에 발생하는 많은 행동들이 있을 때, 서로를 기다리지 않고 수행한다.
Client
의 요청 후 Server
는 요청에 대한 응답을 생성해 응답한다. 이 때, 응답까지 Client
는 다른 동작 없이 대기한다.
동기적인 경우 요청 후 응답까지 대기시간이 존재한다.
한가지 요청과 응답이 수행된 이후에 다음 요청과 응답이 수행된다.
사전적 정의와 같이 비동기적인 경우 요청 이후 응답을 기다리지 않고 다음 요청을 보낸다.
요청과 요청 사이에 기다림이 적다.
웹사이트의 로딩같은 경우 모든 파일을 불러와 로딩하면 기다리는 시간이 많아진다. 요청을 분리해 여러 요청을 보내고 응답이 오는대로 화면을 구성한다면 기다리는 시간이 줄어드는 것 같은 느낌을 줄 수 있다.
코드를 작성하다보면, 특정 코드의 실행 결과가 다음 코드에서 사용되는 경우가 있다. 만약, 비동기적으로 실행되는 A, B 코드가 존재할 때, B에서 A의 결과가 필요하다. 다른 언어에서 고민할 이유 없던 고민을 하게 되었다.
function A() {
// 0초 후 10을 리턴, 비동기적 처리
setTimeout(()=> {
return 10;
}, 0)
}
function B(num) {
// num이라는 값을 받아와 0초 후 출력, 비동기적 처리
setTimeout(() => {
console.log(num);
}, 0)
}
// 원하는 것은 10을 출력하는 것
var number = A();
B(number); // undefined
나열된 코드로 실행하게 되면, B는 A의 결과를 기다리지 않고, 실행된다. 그렇다면 B에서는 A의 결과 없이 진행되고, 정상적으로 동작하지 못한다. (아마 A의 결과에 대해 undefined
라는 값으로 처리하게 될 것.)
우리는 A를 수행한 이후 B를 수행하고 싶다.
그 때, 콜백함수를 사용한다.
자바스크립트의 함수는 일급 객체임을 기억하자.
변수에 저장할 수 있고, 반환할 수 있고, 파라미터로 전달할 수 있다.
함수를 특정 함수의 파라미터로 전달해 함수를 호출한다.
function A(callback) {
setTimeout(()=> {
callback(10);
}, 0)
}
function B(num) {
setTimeout(() => {
console.log(num);
}, 0)
}
A(B); // 10
아마 이러한 코드를 짤 일은 없겠지만, A는 콜백함수를 파라미터로 받는다. 그리고 결과 값을 콜백함수에 전달한다.
결과, undefined
가 아니라 원래 의도한 대로 10
을 출력할 수 있다.
꼭 값을 전달하지 않더라도 특정 코드 이후에 실행되어야 할 코드를 콜백으로 전달할 수 있다.
자바스크립트에서 비동기를 처리하는 콜백함수를 봤다.
아마 콜백함수를 들어본다면 콜백 지옥에 대해서도 들을 것이다.
흔히 보는 짤
Promise와 async/await으로 탈출해보자.