비동기 처리를 시작하지 - 그게 뭔데?

자바스크립트는 동기적 언어이고 싱글 쓰레드 언어이다.

동기(Synchronous)?
호이스팅 된 이후, 코드가 하나하나씩 동기적으로 처리되는 언어다.
서버에서 요청을 보낸 뒤 해당 요청에 대한 응답이 돌아올 때까지 다른 작업을 수행할 수 없다.

console.log(1);
console.log(2);
console.log(3);

결과는,
1
2
3
코드가 위에서부터 아래로 순차적으로 실행되는 것을 확인할 수 있다.

비동기(Asynchronous)?
요청을 보냈을 때 응답이 언제오든 다음 작업을 수행할 수 있다.

setTimeout이라는 web api로 예시를 들어보자.
setTimeout은 내가 지정한 시간이 됐을 때 callback 함수를 전달해주는 api로 Timehandler로 callback 함수를 지정하고 시간을 지정해주는 timeout 인자가 있다. 이때 시간의 단위는 ms로 1초를 표현하고 싶다면 1000으로 지정해 줘야 한다.

console.log(1);
setTimeout(function() {
	console.log(2);
    }, 1000);
console.log(3);

결과는,
1
3
2
동기적 처리였다면 1을 출력하고 1000ms를 기다리고 2를 출력하고 3을 출력했을 텐데, 비동기 처리이므로 1초를 기다리는 동안 밑에 있는 2를 출력한 것이다.

그렇다면 비동기적인 처리를 위해 콜백 함수를 달아 콜백 지옥을 체험해보자!