Javascript 엔진 : 우리가 만든 코드를 어떻게 이해할까?

HTML parser

html에 이런 스크립트를 넣고 크롬으로 열어본다고 가정해볼거야.

<script>
function sum(a,b){
	return a+b;
};
sum(1,2);
</script>

어떤 일이 발생할까?

HTML parser가 script 태그를 소스코드에서 읽어서 네트워크, 캐시, 또는 서비스 워커에서 읽혀서 byte stream decoder에 보내!
byte stream decoder : UTF-16 byte stream을 컴퓨터가 읽고 해석하는 byte코드로 변환해.

byte stream decoder 는 decoding한 byte로 토큰을 만들어.
예를 들어 0066 ->(decode) f , 0075 -> u, 등.
이렇게 변환된 토큰은 parser에게 보내. (pre-parse).

JS 엔진은 두 가지 종류의 parser가 있어 : pre-parser와 parser.
웹페이지 로딩시간을 최소화하려면 바로 필요하지 않은 코드는 parsing하지 않아.
preparser 는 나중에 로드해도 되는 코드를 제어하고
parser는 즉각적으로 필요한 코드를 제어해.
예를 들어서 사용자가 버튼을 눌렀을 경우에만 실행할 코드는 즉각적인 compile이 필요 없잖아? 클릭 했을 때 이벤트 함수를 parser에 보내는 구조야.

AST(Abstract Syntax Tree)

그럼 parser는 토큰 코드를 받아서 각각 node를 만들어. 이렇게 node를 갖고 AST(Abstract Syntax Tree)를 구성해.

AST가 만들어지면 interpreter(통역가)가 필요해!
interpreter는 AST를 읽어서 byte code를 만들어. byte code (기계어 / 컴퓨터 모국어)가 만들어지면 AST를 지우면서 디스크 공간을 확보해!

그럼 이제 끝일까? 아니/, byte code 최적화가 필요해. 이 작업은 optimizing compiler에서 처리하는데 byte code를 받아서 각 종류를 분류하고 최적화된 코드로 바꿔줘.

JS는 타입 지정이 자유로운 언어야. (typescript 사용 안할 때) 그래서 타입을 계속해서 확인하려면 JS 엔진이 매우 느리지 않을까.
그래서 코드를 해석(interpret)하는 시간을 줄이려고, 최적화된 코드는 기존에 실행된 방식 그대로 코드가 실행될거라고 가정해. 예를 들어서 100번을 동일한 함수로 동일한 값을 조회했으면 101번째도 동일한 값을 조회할 거라고 가정한 상태여서 동일한 코드를 사용해. 이 가정이 틀렸을 경우 기존 최적화된 기계언어를 사용하지 않고 기존 byte code를 사용해서 다시 해석해.

---

Abstract syntax tree (추상 구문 트리) : 프로그래밍 언어의 소스 코드의 추상적인 구문 구조를 나타내는 데이터 구조야.
무슨 말이야?

• 트리는 컴파일러나 인터프리터가 컴파일하거나 해석하는 동안 만들어지고, 코드의 구문적 구조의 계층을 표현해.
• 트리에는 표현식, 문장, 선언, 프로그램 구조 및 다른 언어 구성 요소를 나타내는 노드가 포함되는데 각 노드는 소스 코드의 특정 요소를 갖고 있고, 자식 노드는 해당 요소를 구성하는 요소를 갖고 있어.
• AST는 일반적으로 코드가 구문 분석된 후에 생성되고, 코드의 후속 분석, 최적화 또는 변환에 사용돼! 그리고 이후 코드 생성의 기반으로 사용되어 AST를 탐색해 실행 가능한 코드를 생성하거든.
• AST는 Python, C++, Java, JavaScript 등의 프로그래밍 언어에서 널리 사용되고 있어.

예)

그래서 이게 왜 유용한데?

• AST는 소스 코드의 구문 구조를 계층적으로 표현하기 때문에 유용해
• 계층적 표현은 컴파일러와 인터프리터가 코드의 구조를 더 쉽게 이해할 수 있게 해줘.
• AST는 또한 원본 코드의 형식과 독립적인데
• 간결하게 작성되었든 장황하게 작성되었든 관계없이 AST를 사용하여 코드를 분석할 수 있어
• 정적 분석 도구는 AST를 사용하여 잠재적인 보안 취약성, 성능 문제 및 기타 코드 품질 문제를 찾아.
• AST는 데드 코드 제거나 상수 폴딩과 같은 프로그램 최적화에도 사용할 수 있고 코드 변환에도 사용해
• 리팩토링 도구는 AST를 사용하여 변수 이름 바꾸기나 함수 추출과 같은 코드 변경을 자동화해.
• 어쨋든 전반적으로 AST는 다양한 자동화 시스템에서 소스 코드를 분석, 최적화 및 변환할 수 있는 유용한 도구로 사용되거든.

참고

https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

https://en.wikipedia.org/wiki/Abstract_syntax_tree

https://stackoverflow.com/questions/3860147/whats-the-use-of-abstract-syntax-trees

Source code icons created by Pixel perfect - Flaticon