동기(synchronous), 비동기(asynchronous) 개념
'동기' 라는 것은 코드가 위에서 부터 아래로 순차적으로 실행이 된다는 의미이고, '비동기' 라는 것은 순차적으로 실행이 되지 않고, 병렬적으로 실행이 되며, 언제 실행 될 것인지 예측 할 수 없는 것을 의미한다.
먼저 자바스크립트는 선언된 변수,함수 등이 호이스팅이 되고 입력한 코드가 위에서 부터 아래로 실행이 되는 동기적인 언어이다.동기적인 언어는 코드가 언제 실행이 될지 예측할 수 있다는 점이 장점이 있지만, 하나의 코드가 전부 실행이 끝나야 다음 코드로 넘어가게 되므로 하나의 코드가 실행이 완료되기 전 까지는 아무 것도 하지 못하는 점과, 이에 따라 모든 코드가 실행이 완료되는 데 시간이 많이 소요 된다는 단점이 있다.
반면 비동기는 Web Api를 활용하여 순차적이 아닌 병렬적으로, 독립적으로 실행이 되게 만드는 것이다. 무슨 말이냐면 아래의 예시를 보자.
console.log(1);
//setTimeout이라는 web Api를 통해 2초뒤에 코드를 실행하라고 명령 하였다.
setTimeout(() => {
console.log(2);
}, 2000);
console.log(3);위의 예시에서 어떤 순서로 1,2,3이 출력이 될까? 먼저 자바스크립트는 순차적으로 코드를 실행시키기 때문에 가장 위에 있는 1이 출력이 될 것이고, 그 다음으로 정해준 시간 뒤에 코드를 실행시킬 수 있는 setTimeout이라는 Web Api를 만나서 브라우저에게 입력받은 콜백함수(2를 출력해라)와 시간을 보내 놓고, 그 다음 코드를 읽어 3이 출력이 된 다음 그 와중에 정해준 시간인 2초가 지나면 2가 출력이 될 것이다. 이처럼 setTimeout이 console.log(3)보다 위에 있지만 먼저 출력이 되지 않고 나중에 정해진 시간이 지나면 console.log(3) 다음에 출력이 되기 때문에 이것을 순차적,동기적이 아닌 비동기 적으로 실행이 되었다고 하는 것이다.
