JavaScript의 동작 원리

JavaScript의 동작 원리

 

• 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다.
• 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다.

 

 

JavaScript 엔진

 

• 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다.
• 자바스크립트를 사용하다 보면 setTimeOut() 같은 수많은 API를 사용하고는 합니다. 이런 API들은 자바스크립트 엔진에서 제공해주는 요소가 아닌 Web API라고 해서 웹 브라우저 혹은 node js 같은 자바스크립트 런타임에서 지원해주는 API입니다. 그래서 어떤 브라우저에서는 지원을 해줄 수도 있고, 안 해 줄 수도 있습니다.

 

Memory Heap

 

•  데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장합니다.

 

 

Call Stack

 

• 코드가 실행되면 코드의 내부의 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳입니다.

 

function multiplyNumber(num1, num2) {
	return num1 * num2;
}

function printSquare(x) {
	let n = multiplyNumber(x, x);
	console.log(n);
}

printSquare(5);

 

예를 들어 위의 함수를 실행하면 아래와 같은 Call Stack이 차례대로 생기게 됩니다.

 

 

즉 실제로 코드를 실행했을 때, 다음에 실행되어야 할 코드를 순서대로 기록을 하며, 순차적으로 코드를 실행 할 수 있게 도와 줍니다.

 

 

 

 

 

Web API / Callback Queue / Callback Function

 

 

• 만약에 Call Stack에 들어간 코드 중 노랑색으로 칠해진 코드가 어떠한 이유로 시간이 오래걸리게 된다면 당연히 다음에 호출되어야 코드는 실행에 시간이 걸릴 수 밖에 없습니다. 이와 같은 상황이 서두에서 이야기했던 특정 코드가 오래 걸려 다른 코드를 실행하지 못하게 되어 block이 된 상태입니다.
• 이 때 효과적으로 event를 관리하기 위해 필요한 것이 바로 web API와 Callback Queue, event loop입니다.

 

 

callback Function

 

• 자바스크립트에서는 함수가 실행이 끝나면, 다음에 실행할 일을 정할 수 있는데 이 것을 Callback이라고 부릅니다.
• 마치 사람이 어떤 일을 할때 규정대로 정해진 일의 순서의 차례대로 움직인다고 예를 들어 생각 할 수 있습니다.

 

setTimeout(function(){
console.log('1초')
}, 1000)

 

 

• setTimeout 함수는 첫번째 인자로 callback function을 받고, 두번째 인자로 기다릴 시간을 받는 함수입니다.
• 위 코드를 실행해보면 1초 후에 function(){ console.log('1초')} 가 실행 됨을 알 수 있습니다.
• 즉, callback Function은 함수가 정해놓은 일이 끝난 뒤, 후속으로 하는 일을 알려주는 함수입니다. setTimeout 이외에도 Callback 함수는 AJAX, Dom을 관리하는 event 등에 사용되며, javascript를 효과적으로 사용하기 위해선 반드시 알아야 하는 개념입니다.

 

 

 

브라우저의 web APIs

 

• browser web API 는 브라우저 안에 C++ 구현된 쓰레드로 주로 DOM event, AJAX request, setTimeout 등 비동기 이벤트를 처리합니다. javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있습니다.
• 일상 생활을 예를 들자면 토스트기 없이 프라이팬에 빵을 구우면, 빵을 굽는 동안은 식탁을 셋팅 한다거나, 음료를 준비하는 등 다른 일을 할 수가 없습니다. 반면에 토스트기가 있다면 토스트기에 빵 굽는 일은 시키고, 저는 다른 일을 할 수 있습니다.

 

 

 

Callback Queue

 

• 사람이 어떠한 일을 하고 있는 도중 다음 할 일을 기억속에 기억하고 있는 것처럼 브라우저의 경우  Callback Queue 에 저장 해놓고 사용합니다.
• 즉, Callback Queue 는 browser web API에 있는 event가 실행되고 나면 javascript에서 실행할 callback을 저장하고 있는 저장소입니다.

 

setTimeout(function(){
console.log('1초')
}, 1000)

 

• 예를 들어 위 코드를 실행하게 되면 1초가 지나면 Callback Queue에 function(){console.log(‘1초’)} 함수가 담기게 됩니다.

 

 

 

 

event loop

 

• 사람은 일을 하고 있는 도중 갑자기 새로운 일이 들어오면 현재 상황을 판단하여 더 효율적인 일의 순서를 생각해보게 됩니다. 예를 들어 지금 현재 진행중인 하고 있는 일을 마져 끝내고 방금 새로 들어온 일을 하려는 판단을 도출해내는 능률적인 생각하게 됩니다.
• 이와 같이 Javascript 작동 내에서도 Web API / CallBack Funtion / Callback Queue을 관련지어 능률적인 효과 처리를 하고 있습니다.

 

 

 

 

• event loop는 Call Stack 비어있는지를 주기적으로 확인하여 Callback Queue에서 Callback function을 가져와 Call Stack에서 Javascript 코드가 실행될 수 있도록 돕는 역할을 합니다

 

console.log('Start');
setTimeout(function timeout(){
	console.log('1초');
});
console.log(End');

 

 

1. 처음 코드를 실행하면 console.log(‘Start’)코드가 call stack에 들어가게 되고 실행이 됩니다.

2. Call Stack에 setTimeout 함수가 들어갑니다.

3. setTimeout 함수가 비동기 함수이기 때문에 Call Stack 에서 바로 실행되지 않고, web API로 콜백 함수 timeout()이 들어 갑니다.

4. 다음 코드인 console.log('End')을 실행합니다. 아직 1초가 지나지 않아 timeout() 함수는 여전히 web API에 있습니다.

5. 1초가 지나 callback Queue에 timeout()함수가 들어 옵니다.

6. event loop가 Call Stack이 비어있는지 확인하고, timeout()함수를 call Stack으로 보냅니다.

7. timeout함수 안에 있던 console.log(‘1초’)코드가 호출됩니다.

8. 모든 함수가 호출되고 Call Stack이 비워집니다.

 

• 이처럼 사람이 일을 하는 것처럼 능률적으로 일하기 위하여 처리하는 것이 Javascript 내에서도 효과적으로 일을 처리하기 위한 비슷한 매커니즘이 있는데 이를 event loop라고 부릅니다.

 

더 자세한 참고:

https://velog.io/@gil0127/JS-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-Event-Loop

JS 비동기의 핵심 Event Loop