[JavaScript] 코드 인터프리터 작동 원리 및 순서 ( 비동기 vs 동기)

기본적으로
컴퓨터는, 그리고 인터프리터는 작성된 코드를 위에서부터 읽고 순차적으로 코드를 실행시킨다.
즉 위에서 아래로 코드 실행 순서가 정해진다는 뜻이다.

하지만! 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 어떻게 될까?
예를 들어 1분이 걸린다고 가정해보자.
그러면 아래 줄의 코드는 전혀 실행되지 않는 병목 현상이 생기게 되는 것!

이해를 돕기 위한 도로 위 병목현상 그림

언제 그럴까?

1. 네트워크 통신
2. 복잡한 계산을 실행하는 코드
3. 타이머를 정해두고 그 시간이 만료되면 코드를 실행하는 함수를 쓴 경우 (예: setTimeout(), setInterval() ) 가
대표적인 케이스이다.

위와 같은 상황을 방지하고 빨리빨리 실행할 수 있는 것부터 실행하기 위해서
자바스크립트는 비.동.기 방식을 지원한다.


비동기 방식이란?
어떠한 코드를 실행하는데 결과를 얻기까지 시간이 소요되는 경우 일단 임시 저장소에 비동기화를 시켜 보낸다.
한마디로 죽이는 것.

그리고 아래의 코드를 먼저 실행한 뒤 실행이 완료되면 다시 임시 저장소에 가서 비동기화된 코드를 불러와서
실행하는 것이다.

이렇게 되면 효율적이지만
순서가 꼬인다는 단점이 있다.

그렇다면 동기 방식이란?
어떠한 코드가 오래 걸리든 말든 일단 기다린다.
그렇게 결과가 나오면? 원래대로 다음 코드를 실행해나간다.

이렇게 되면 비효율적이지만
순서는 꼬이지 않는다.

그렇다면 setTimeout(), setInterval() 와 같은 함수를 사용하여 그렇게 오래 걸리진 않지만
어쩔 수 없이 비동기가 된 경우 순서가 꼬일 텐데
어떻게 순서를 맞출 수 있을까?

간단하다.
아래의 코드 또한 비동기화를 시켜서 모조리 임시저장소에 보내 놓고
그 임시저장소에서 가장 먼저 들어간 녀석부터 실행해주게 되면
순서는 꼬이지 않게 된다.
모두 아오지 탄광으로..

이것을 도와주는 함수가 바로 CallBack이라는 함수인데 이 함수는 다음 시간에 다뤄보자.