자바스크립트의 가장 큰 자산 중 하나는, '비 차단' 속성이거나 '비동기' 언어라는 것이다.
신문 웹 사이트와 같은 웹 사이트는 이러한 비 차단 속성을 활용하여, 더 나은 사용자 경험을 제공한다. 일반적으로 사이트의 코드는 사용자가 실제로 기사를 쓰기 전에, 큰 이미지가 될 때까지 기다릴 필요없이 텍스트가 먼저 렌더링된 다음, 이미지가 백그라운드에서 로드될 수 있도록 작성된다.
자바스크립트는 이벤트 루프를 사용하여, 비동기 함수 호출을 처리한다. 프로그램이 실행되면 함수 호출이 작성되어 스택에 추가된다.
서버가 응답할 때까지 기다려야하는 요청을 작성하고, 별도의 큐로 전송하는 기능이다.
스택이 지워지면, 대기열의 기능이 실행된다.
웹 개발자는 이벤트 루프를 사용하여, 함수를 호출할 시기와 비동기 이벤트를 처리하는 방법을 결정하여 보다 원활한 탐색 환경을 만든다.
비동기 JavaScript 및 XML 또는 AJAX 라는 하나으 기술 시스템을 탐색할 것이다.
이벤트 루프에 대해서 자세한 설명을 보려면, MDN 설명서를 읽어보도록 한다.
Concurrency model and the event loop
console.log('First message!');
setTimeout(() => {
console.log('This message will always run last...');
}, 2500);
console.log('Second message!');
/*
Output:
First message!
Second message!
This message will always run last...
*/
해당 코드에서는, setTimeout() 으로 인해 2.5초를 기다리고 출력하기 때문에, setTimeout()의 console.log() 가 제일 마지막에 찍히게된다.
만약, 2500 을 0으로 바꾸면 결과값이 과연 바뀔까?
console.log('First message!');
setTimeout(() => {
console.log('This message will always run last...');
}, 0);
console.log('Second message!');
/*
Output:
First message!
Second message!
This message will always run last...
*/
0으로 변경해도 나오는 값의 순서는 동일한 것을 볼 수 있다. 왜 그런 것일까?