비동기란?

자바스크립트는 비동기 방식으로 동작한다.
그렇다면 비동기는 무엇일까?

동기

우선 동기(synchronous)부터 알아보자
동기라는 말의 의미는 동시에 일어난다는 뜻이다.
무엇이 동시에 일어나는 것인가?
요청과 결과가 동시에 일어난다.

동기방식은 작업들이 순서대로 진행되는 것을 말한다.
예를들어 세탁기 돌리고 빨래 널기, 밥 먹고 30분 후에 약 먹기, 청소기 돌리기
3개의 일이 주어지면 순서대로
세탁기 돌리고 빨래 널기 => 밥 먹고 약 먹기 => 청소기 돌리기를 수행한다.

비동기

비동기(asynchronous)는 동시에 일어나지 않는다는 것이다.
요청과 결과가 동시에 일어나지 않는다는게 무슨 뜻일까

좀 전에 예시를 다시 사용해보자
3가지 일이 주어진다.
비동기는 우선 세탁기를 돌린다.
그리고 끝날 때까지 기다리지 않고 다음 작업을 수행한다.
밥을 먹는다.
그리고 청소기를 돌리고
세탁이 다 된 빨래를 널고
약을 먹는다.

setTimeout을 이용한 비동기 설명

우선 setTimeout이 뭔지 살펴보자
setTimeout은 두 개의 인자를 가진다.
호출될 콜백함수와 지연시간이다.

코드로 보자

1
2
3
4
5

function hi() {
  console.log("hi!!");
}

setTimeout(hi, 1000);

setTimeout함수 안에 hi라는 함수와 1000을 넣었다.
이 말은 hi라는 함수를 1초 후에 실행시키라는 의미이다.

위의 코드는

1
2
3

setTimeout(function () {
  console.log("hi!!");
}, 1000);

이렇게 쓰더라도 똑같다.

그럼 이제

1
2
3
4
5
6
7

console.log("start");

setTimeout(function () {
  console.log("running!");
}, 1000);

console.log("end");

위의 코드는 어떻게 동작할까?

이미 비동기를 알았으니

1
2
3

start
end
running!

라는 결과가 나오는 것을 알 수 있을 것이다.
자바스크립트의 비동기는 이벤트루프까지 알아야
실수없이 코딩을 할 수 있다.
이벤트루프는 나중에 포스팅하기로