소개
자바스크립트는 웹 프로그래밍 언어다. 자바스크립트는 자체적으로 실행되지 않으며, 자바스크립트 코드를 컴파일하고 실행하려면 자바스크립트 엔진이 필요하다. 또한, 브라우저는 자바스크립트 인터프리터를 내장하고 있다.
인터프리터(interpreter)
고급 언어(사람이 이해하고 작성하기 쉬운 코드)로 작성된 프로그램을 한 줄 단위로 받아들여 번역하고, 번역과 동시에 프로그램을 한 줄 단위로 즉시 실행시키는 프로그램이다.
프로그램을 바로 실행할 수 있고 동작을 확인해가며 프로그램을 개발할 수 있으나, 한 줄마다 기계어로 번역하여 실행하기 때문에 컴파일 언어보다 처리 속도가 느리다.
개발자 도구 콘솔(F12)에서 스크립트를 작성해 실행하는데 컴파일이 필요하지 않다.
자바스크립트는 기본적으로 인터프리터 언어이다. 자바스크립트 인터프리터는 메모리 관리를 위해 자동으로 가지비 컬렉션(garbage collection)을 수행한다. 프로그램이 필요할 때 객체를 생성할 수 있고, 프로그래머는 이 객체를 어떻게 해제할지 걱정할 필요가 없다. 객체에 더이상 접근할 수 없을 때(프로그램이 더이상 객체를 참조하지 않을 때) 인터프리터는 그 객체가 다시 사용되지 않을거라 판단하고 자동으로 메모리에서 해제한다.
자바스크립트 엔진
최신 웹 브라우저의 자바스크립트 엔진인 V8은 인터프리터 방식과 컴파일 방식을 함께 사용한다. 비교적 처리 속도가 느린 인터프리터의 단점을 해결하여 최적화된 성능(속도 향상)을 구현하기 위해, V8은 엔진 내부에서 실행 중 컴파일이 필요한 경우에 내부에서 컴파일을 한다. 코드를 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일하는 방법을 JIT(Just-In-Time) compiler라고 한다.
자바스크립트 엔진 동작 방식
자바스크립트 엔진의 동작 방식은 다음과 같다.
- 자바스크립트 코드를 의미있는 최소 단위인 토큰(token)으로 분해한다. -> 이를 토크나이징(tokenizing)이라고 한다.
- 분해한 토큰(token)을 분석하여 문법적으로 의미를 갖는 트리 자료구조인 AST(추상구문트리, Abstract Syntax Tree)로 만든다. -> 이를 파싱(parsing)이라고 한다.
- 파싱된 결과물인 AST를 byte code로 변환한다. -> 이를 인터프리트(interprete)라고 한다.
자바스크립트 엔진에서 중요한 개념
자바스크립트 엔진은 복잡한 구조를 가지고 있으나, 메모리, 실행컨텍스트, 콜스택이 제일 중요한 개념이다.
브라우저의 자바스크립트 엔진은 자바스크립트 코드를 실행하면 다음과 같은 동작을 한다.
- 변수, 함수 선언을 메모리에 저장한다.
- 자바스크립트 코드가 실행되면 전역 실행 컨텍스트와 더불어 함수 호출 시 로컬 실행 컨텍스트를 생성한다.
- 자바스크립트는 단일 실행 스레드를 가지며, 함수 실행을 수행한다. 이 때, 실행 스레드는 함수 호출 시 생성되는 로컬 실행 컨텍스트에 출입한다.
- 콜스택은 실행 스레드가 여러 실행 컨텍스트 중 어디에 있는지 위치를 찾는다.
자바스크립트의 성능을 올리는 방법
웹 브라우저에서 자바스크립트의 성능을 올리고 싶으면, 강타입 언어라고 생각하여 코드를 작성한다.
특히, 배열과 객체의 생성과 접근 시 성능우위 코드스타일 문법을 참고하도록 하자.
자바스크립트는 동적이고 약타입 언어인 인터프리터 언어로서 객체지향 프로그래밍 스타일과 함수형 프로그래밍 스타일을 잘 표현할 수 있는 언어이다.
함수형 프로그래밍 vs. 객체지향 프로그래밍
함수형 프로그래밍은 사이드 이펙트가 없는 순수 함수와 동작의 결과를 강조하는 방식이다.
순수 함수는 동일한 인자를 넣었을 때, 동일한 출력 값을 반환하므로, 안정성과 생산성을 높일 수 있다.
함수의 동작부가 간결하여, 코드 이해도와 가독성에 장점이 있다.
객체지향 프로그래밍은 클래스 디자인과 객체들의 관계를 중심으로 코드를 작성한다. 캡슐화, 상속, 다형성 등의 특징을 가지고 있으며, 데이터의 주상화를 통해 객체를 만들고 객체 간의 유기적인 상호작용을 통해 로직을 구성한다.
참고
- 자바스크립트 코드 실행 동작 원리 : https://curryyou.tistory.com/237
- JavaScript, 인터프리터 언어일까? : https://oowgnoj.dev/review/advanced-js-1
- 성능을 높이는 코드 스타일 : https://goldenthumb.net/coding-style-for-performance
- 객체지향 프로그래밍과 함수형 프로그래밍 : https://velog.io/@huurray/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EA%B3%BC-%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D
