JS Compile

JAVASCRIPT의 컴파일

자바스크립트: 일반적으로 스크립트 언어이자 인터프리터 언어이며 컴파일을 할수있다. 자바스크립트의 컴파일레이션은 코드가 실행되기 직전에 순식간에 일어나고, Just in time 이라고 표현합니다.

• 인터프리터 : 코드를 읽어나가면서 해석하여 실행하는것
• 컴파일 : 어떤 언어로 작성된 코드를 다른언어로 바꾸는것

1. 컴파일레이션 3단계

자바스크립트 코드는 크게 3단계로 해석(컴파일) 된다.

• 1단계 : 토크나이징 / 렉싱 : 코드를 의미있는 조각(token)으로 만드는 과정 ex) var a = 2 -> var , a =, a

• 2단계 : 파싱 : 문법, 구조를 반영하여 중첩 원소를 갖는 트리형태로 바꾸는 과정 파싱의 결과로 만들어진 트리를 AST(추상 구문 트리)라고도 함
• 3단계 : 코드생성 : AST(추상 구문 트리)를 실행코드(기계어)로 바꾸는 과정

2. 엔진, 컴파일러 , 스코프의 이해

코드의 해석(컴파일) 관점에서, 코드의 실행으로 관점을 옮겨보면 엔진 , 컴파일러 , 스코프가 상호작용하게된다.

• 엔진 : 컴파일레이션 시작부터 끝까지 모든 과정과 프로그램 실행을 책임짐
• 컴파일러 : 파싱, 코드 생성 등(컴파일레이션)
• 스코프 : 선언된 변수 목록을 작성하고 유지

3. 구문의 실행

var a = 2; 

위의 코드는 엔진 , 컴파일러 , 스코프에 의해 아래와같은 과정으로 실행

var a;
a = 2; 

과정으로 쪼개서 생각하면 더편하다

• 1) 컴파일러가 var a; 를 만나면 스코프에서 a를 찾음 만약 a가 있다면 선언을 무시 , 없으면 스코프내에 a를 선언하라고 요청한다

• 2) 컴파일러는 a = 2; 대입문을 처리하기 위해 엔진이 실행할 수 있는 코드 생성

• 3) 엔진이 실행하는 코드는 먼저 스코프에 a 라는 변수가 현재 스코프 내에서 접근할 수 있는 지 확인.

• 4) 가능하다면 엔진은 변수 a를 사용하여 값 2를 넣고 , 아니라면 엔진은 상위 스코프 > 글로벌스코프까지 탐색 못찾으면 에러

간단히 말하면

• 컴파일러가 변수를 선언 (현재 스코프에 미리 변수가 선언되어 있지 않은경우)
• 엔진이 스코프에서 변수를 찾고 , 변수가 있다면 값을 대입

4. LHS와 RHS

컴파일러가 생성한 코드를 실행할때 , 엔진은 변수 a가 생성된적있는지 스코프에서 검색함

이 과정에서 LHS 검색 , RHS 검색을 통해 스코프를 탐색 한다.

• LHS(Left-hand-Side) : 변수가 대입 연산자의 왼쪽에 있을때 수행
  
• RHS(Right-hand-Side) : 변수가 대입 연산자의 오른쪽에 있을때 수행

RHS 검색은 단순히 특정변수의 값을 찾는것과 다름없다 LHS 검색은 값을 넣어야하므로 변수 컨테이너 자체를 찾는다

console.log(a);

a에 대한 참조는 RHS 참조다 . a에 아무것도 대입하지않고 a의 값을 가져와 console.log(..)에 넘겨줌

a = 2;

a에 대한 참조는 LHS 참조다. 현재 a의 값을 신경 쓸 필요없이 = 2 대입연산을 수행할 대상 변수를 찾기때문이다

function foo(a) {
    console.log(a);   // 2
}
 
foo(2);

• 1) 마지막 줄에서 foo(…) 함수를 호출하는데 RHS 참조를 사용한다. 즉, 가서 foo의 값을 찾아 내게 가져와라 라는 뜻 (여기서 (…)은 실행된다는 뜻이므로 foo는 함수여야함.)

• 2) 인수로 값 2를 함수 foo(..)에 넘겨줄때 값 2를 매개변수 a에 대입하는 연산이 일어남 이 매개변수 a에 대한 대입 연산을 위해 LHS 검색이 수행됨

• 3) 변수 a에 대한 RHS참조도 역시 수행 , 그 결과값은 console.log(..)가 함수에 넘겨진다

• 4) 또 console.log(…) 가 실행되려면 참조가 필요한데 console 객체를 RHS 검색하여 log 메서드가 있는지 확인한다.