자바스크립트 동작 원리

자바스크립트

자바스크립트는 웹페이지에 생동감을 주기 위한 프로그래밍 언어이다. 웹페이지를 그리기 위한 HTML, CSS는

정적인 언어이다. 정적이라는 것은 이 언어들은 브라우저를 통해서 웹페이지를 화면에 그려주고 나서 이 화면을

변경할 수 있는 방법이 없다는 의미이다. 어떤 버튼을 클릭했을 때 경고창을 띄우는 등 이벤트를 스스로 발생시킬 수

없다. 이러한 역할을 하는게 자바스크립트 이다.

 

자바스크립트를 실행시키기 위해선 자바스크립트 런타임 환경이 필요하다.

런타임 환경이라는건 프로그래밍 언어를 실행시키기 위한 환경을 말한다. 이러한 자바스크립트 런타임 환경을

만들기 위해선 자바스크립트 엔진이 필요하다.

대표적인 예로는 Chrome 웹브라우저와 Nodejs에서 사용하는 Google의 V8 엔진이다.

모든 웹브라우저에서 자바스크립트가 실행되는 이유는 자바스크립트 엔진이 있기 때문에 실행 가능하다.

 

동작 원리

일단은 예를 들어보자

아래의 코드를 보고 결과를 확인하기전 예상해보면 출력값은 2, 4, 6이 될 것이다.

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

하지만 결과는 2, 6, 4 가 나온다. 이유는 아래의 이미지를 보면서 설명하겠다.

 

 

자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글쓰레드라고 부른다.

아래의 그림과 같이 자바스크립트는 스택이라는 공간에서 코드를 실행시키고 힙(Heap)이라는 공간에

실행할 코드에 필요한 변수 데이터들이 저장되는 공간이다.

 

이러한 스택이라는 공간에서 코드를 실행시키는데 setTimeout 같은 바로 실행시킬수 없는 코드는 대기실로 보내고

바로 실행 가능한 console.log(1+1), console.log(3+3)를 실행 시킨다.

그런 다음 대기실에 있던 setTimeout이 실행시킬수 있을때 바로 스택공간으로 들어오는게 아니고 대기실에 있다가

큐(Queue)라는 공간으로 들어가 대기 한다. 큐라는 공간에서 스택으로 이동할때에는 조건이 있다.

스택 공간이 모두 비어있을때 큐 공간에서 실행 시킬 코드가 올라와 실행된다.

이러한 이유때문에 아래의 스택공간의 코드는 1. console.log(1+1) 2. console.log(3+3), 3. console.log(2+2) 가 된다.

 

대기실로 이동하는 코드는 주로 실행시간에 텀을 주는 setTimeout(),

API 요청을 하는 Ajax 코드, 버튼을 클릭했을 때 이벤트를 처리하는 등 이벤트리스너이다.

 

요약하자면

1. 스택이라는 공간에서 코드를 실행한다.

2. 바로 실행 가능한 console.log(1+1), console.log(3+3) 부터 실행된다.

3. 바로 실행 불가능한 코드인 setTimeout()은 대기실로 이동했다가 실행 가능할때 큐 공간으로 이동된다.

4. 큐 공간에서 대기하다가 스택 공간이 완전히 비었을때 순서대로 큐 대기 코드가 스택코드로 이동하여 실행된다.

 

 

일단 자바스크립트는 단일 쓰레드이기 때문에 한번에 한 코드만 실행 가능하다.

그래서 한번 실행될 때 오래걸리는 연산이 있을 경우 브라우저가 느려지거나 다른 이벤트가 처리가 안된다.

예를 들어 10초 걸리는 연산이 스택공간에서 실행되고 있을 때 버튼을 클릭했을 때도 반응이 없을 것이다.

그러므로 오래걸리는 연산은 최대한 안하는게 좋다.