JS 동작 원리

내가 개발을 하면서 자바스크립트와 타입스크립트를 주구장창 사용을 하면서 어떻게 동작을 하는지도 모르고 사용을

하는 것 같아서 이번 계기에 내가 사용하는 언어가 어떻게 동작을 하고 어떤 원리를 가지고 있는지 알아보려고 한다.

 

 

그러면 제일 먼저 자바스크립트의 동작 구조부터 알아봐야겠지 않는가.

먼저 자바스크립트를 실행하기 위해서는 자바스크립트의 엔진이 반! 드! 시!

필요한데 자바스크립트의 엔진은 엄청 많지만 그 중에서 대표적인 Google에서

만든 V8 엔진이다. 자바스크립트의 엔진에는 크게 Memory Heap, Call Stack

이 존재합니다. (사파리도 있다!! JavaScriptCore)

 

 

 

 

Memory Heap 그게 뭔데?

간단하게 설명하자면, Memory Heap이란 데이터를 임시적으로 저장하는 곳으로 함수나

변수, 함수를 실행할 때 필요한 데이터 값을 저장하는 것이다.

 

Call Stack 그건 또 뭐야?

Call Stack이란 코드가 실행되면 코드의 내부의 실행 순서를 기록하여, 하나씩 순차적으로 진행하도록 도와주는 곳입니다.

 

 

그럼 한번 예시를 통해서 봐볼까? 

진짜! 쉽게 알아보는 자바스크립트 동작 원리

(자료 출처)

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

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

printSquare(5);

 

위와 같이 코드를 실행을 하면 Call Stack이라는 개념이 성립이 된다.
다음에 실행되어야 할 코드를 순서대로 기록을 하며, 순차적으로 코드를 실행 할 수 있게 도와준다.

 

자바스크립트는 싱글 쓰레드!!!

자바스크립트는 싱글 쓰레드이다. 싱글 스레드란 한 번에 하나의 일만 수행할 수 있는 것을 말합니다 .

자바스크립트의 모든 코드들은 쉽게 설명하자면 어떤 한 카페에서 사람이 줄을 서서 결제를 한 다음 다음 사람이 결제를

할 수 있고, 한번 결제한 사람은 다시 줄을 못 선다 .. 

 

또 자바스크립트는 비동기이기 때문에 user들이 예를 들어서 파일을 다운로드 할 때 기다리는 동안 다른 걸 하잖아?
그렇게 때문에 자바스크립트를 비동기를 통한 유연성을 더 확장 시킬 수 있는 장점을 가지고 있습니다 ~ 🥹

인터프리터인 자바스크립트

자바스크립트는 또 인터프리터인 언어 아닙니까?!?
그리하여 자바스크립트는 코드를 한 줄씩 실행하면서 실시간으로 해석하고 실행합니다.
코드를 직접 실행하기 때문에 컴파일이 필어서 빠른 개발과 실행이 가능하는 장점을 가지고 있고, 플랫폼이 독립적이다. 
또 인터프리터는 수정에 용이하기 때문에 개발자가 개발 도중에 바로 수정이 가능하다는 장점을 가지고 있다!!

더 추가적은 WebAPI를 이야기 할까 하는데 이미 내 블로그에 있기 때문에 보고 오는 것을 추천드린다 .. 좋은 자료에요!!

JS .. API❓도대체 그게 뭐야❓

 WebAPI는 개발자들이 개발를 하는데 있어서 필요한 Web Server, Web browser를 위한 API이다.

Callback Queue와 Event Loop

CallBackQueue는 web API에서 비동기처리가 완료된 후 실행될 call-back 함수들이 여기로 이동되어 대기를 한다.

 

Event Loop는 현재 실행중인 컨텍스트가 존재하는지 그리고 콜 스택에 대기 중인 작업들이 있는지 반복적으로

확인하고 만약 없다면 callback queue에 있는 작업들을 콜 스택에 순차적으로 이동시키는 작업을 하는 곳이다.

 

 

 

더 좋은 예시와 코드로 작성을 하고 싶었는데 아직 이해되는 내용이 적어서 조금 더 살펴보고 여기 블로그에 추가를 하려고 한다 .. 😂

 

 

느낀 점

지금 이제 면접을 준비하면서 js 동작 원리를 알아보고 있었는데 .. 어디서 한번쯤은 들어봤을 것 같은 내용이지만

실제로 조사하면서 몰랐던 내용도 정말 많았다. 앞으로 이 블로그에 js 동작 원리에 대한 내용을 내가 찾아보고 이해한

내용을 추가적으로 작성을 하려고 한다. 아직 Callback Queue와 Event Loop에 대해서 잘 모르는 것 같아 .. 더 찾아보려고 한다..ㅠ