[JS] 자바스크립트 동작원리

자바 스크립트는 누가 실행시켜줄까?
답은 브라우저이다.

크롬, 인터넷 익스플로러등의 브라우저가 자바스크립트를 실행시켜주는데, 자바스크립트를 해석해주는 엔진이 브라우저라고 생각하면 된다.

자바스크립트는 몇가지 특징을 갖고 있는데, 그중 가장 대표적인게 동기(syncronized) 언어라는 것이다.

비전공자 출신 개발자로서 동기와 비동기라는 언어가 굉장히 헷갈렸는데, 한마디로 표현하자면 동기란 한번에 한가지 일만 가능하다 라는것이고, 비동기는 한번에 여러가지 일이 처리 가능하다 라는것이다.

이해가 조금 더 쉽게 하기위해,
1+1을 하고, 1초를 쉬고 2+2를 하고, 3더하기 3을 해라 라는 코드를 만들었을때,

python

print (1+1)
time.sleep(1)
print (2+2)
print (3+3)

console

2
1초쉬고
4
6

javaScript

console.log(1+1)
setTimeOut(function(){
	console.log(2+2);
}, 1000)
console.log(3+3)

console

2
6
1초쉬고
4

왜 결과가 다르게 나오는 것일까?

답은 자바스크립트의 동작원리에 있는데, 자바스크립트는 Single threaded language, 즉 한번에 한가지 일만 처리가 가능하다.

일을 처리할때 stack, heap, queue가 나눠서 일처리를 하는데, 앞서 나온 예제처럼

console.log(1+1)
setTimeOut(function(){
console.log(2+2);
}, 1000)
console.log(3+3)

이 3개의 요청이 stack에 들어왔을때, 스택에서는 지금 처리 가능한 일만 처리하고 나중에 처리해야할 일 (setTimeOut, eventListener, Ajax)등은 모두 queue로 넘긴다.

이때, queue에서 stack으로 테스크를 넘길땐 반드시 stack이 비어 있을때만 테스크를 넘긴다.

그렇다면
javaScript

console.log(1+1)
setTimeOut(function(){
	console.log(2+2);
}, 0)
console.log(3+3)

이 코드는 어떤 결과를 출력할까?

답은
console

2
6
0초쉬고
4

이것이다.

자바스크립트 안에서 setTimeOut function을 본 순간 해당 테스크를 queue로 넘기기 때문에 발생되는 현상이다.

이러한 특징을 고려해서 코드를 짜는게 웹에서 중요한 이유는 웹이 freeze되는것을 막아줄수 있기 때문이다. 복잡한 연산이라던가 시간이 3초가 넘게 걸리는 테스크는 backend쪽이나 api서버쪽으로 빼서 작업을 진행한 후에 나온 변수만 처리를 하는게 stack을 가볍게 하는 방법이고, 그래야 유저가 웹사이트에서 어떤 동작을 할때 끊김 없이 사용할 수 있을것이다.