1. 동작원리
자바스크립트는 싱글스레드 언어이다.
싱글스레드란?
스레드가 하나라는 의미로 자바스크립트에는 콜스택이 하나이기 때문에 붙혀졌다.
콜스택이란?
코드를 실행해주는 곳이라고 생각하면 되며 콜스택은 무조건 비워지려는 특성이 있다.
예시
console.log(1+1)
setTimeout(function(){console.log(2+2)}, 1000)
console.log(3+3)
// 2
// 6
// 4위에서 부터 하나하나 실행이 되기 때문에 2, 1초쉬고 4, 6이 나와야 하는데 그렇지 않은 이유가 무엇일까?
바로 자바스크립트의 동작원리 때문이다.
가. 첫 번째
우선 첫번째로 console.log(1+1)이 콜스택에 쌓인다.
콜스택은 무조건 비워지려고 하는 특성이 있기 때문에 console.log(1+1)을 실행하고 비워준다.
나. 두 번째
그 후에 setTimeout(function(){console.log(2+2)}, 1000)을 만나는데 이 함수의 경우는 바로 콜스택에서 처리를 할 수 없기 때문에 따로 대기실에서 대기한다.
그 대기실이 web APIs들을 처리하는 공간이다.
여기에는 setTimeout등 타이머 관련 함수, 이벤트, AJAX요청등의 종류들이 대기한다.
다. 세 번째
console.log(3+3)이 콜스택에 쌓이고 실행되어 사라진다.
라. 네 번째
1초가 지났기 때문에 setTimeout(function(){console.log(2+2)}, 1000)가 실행이 되어야 하는데 그냥 콜스택으로 옮겨오지 않고 Queue라는 곳에 대기를 시켜놓는다.
이후 콜스택이 비어있을 경우에 대기가 끝난 코드들을 올려보낸다.
즉 세 번째에서 console.log(3+3)이 실행되고 비어졌기 때문에 setTimeout(function(){console.log(2+2)}, 1000)이 콜스택으로 올라가고 실행되어 사라진다.
이때 콜스택이 비어있는 것을 확인하는 것이 이벤트 루프이다.
이벤트 루프는 항상 콜스택을 보고 있으며 콜스택이 비워졌을 때 Queue의 대기중이던 함수를 콜스택으로 올려보내는 역할을 한다.
자바스크립트는 한 줄씩 처리하는 동기적 언어이지만 setTimeout, 이벤트리스너 등등을 이용해서 비동기적으로 처리할 수 있다.
