Compilation(컴파일레이션)

소스코드가 실행되기 전 처리과정을 말하며 3단계로 나눌 수 있다.

Compilation(컴파일레이션)

• 토그나이징 / 렉싱
• 파싱
• 코드 생성

 

📦 Compilation - First step !!

토크나이징

특 구문에 언어마다 토큰이라 불리는 조각으로 분리하는 작업

토크나이징 (Tokenizing)

• var
• a
• =
• 2
• ;

 

Tokenizing

렉싱

• var
• a
• =
• 2
• ;

 

Token

a 너는 윗 동네 출신이야

토큰에 의미를 부여하는 작업

Tokenizer

렉스 타임

a 너는 윗 동네 출신이야

렉싱이 일어나는 과정 및 시간

Tokenizer

렉시컬 스코프(윗 동네 )

a

a

a

렉싱 결과물로 나온 스코프를 말한다.

📦 Compilation - Second step !!

파싱 (Parsing)

토큰 배열을 프로그래밍 문법으로 작성 된 노드들을 트리 구조 로 만드는 과정이다. 이 결과물이 AST(abstract syntax tree) 이다.

📦 Compilation - Third step !!

코드 생성(Code-Generation)

AST를 컴퓨터가 실행 할 수 있도록 컴파일하여 실행 가능한 코드로 만든다. 이 과정에서 여러가지 트릭을 이용하여 최적화 작업이 일어난다.

그림으로 보기

📦 스코프 이해하기

📦 그 전에 알아 볼 것!

LHS(Left-Hand-Side) 와 RHS(Right-Hand-Side)

📦 그 전에 알아 볼 것!

컴파일러가 생성한 코드를 실행할 때 변수를 만나면 검새을 하는데 이 때 검색 방식이다.

 

LHS: 왼쪽 방향 검색, 즉 오른쪽에서 왼쪽으로 검색

RHS: 오른쪽 방향 검색, 즉 왼쪽에서 오른쪽으로 검색

📦 그 전에 알아 볼 것!

console.log에서의 a는 값을 가져올때는 RHS 참조를 한다.

= 2; 의 a는 오른쪽에서  값을 왼쪽 방향으로 대입 하기때문에 LHS 참조를 한다.

RHS

LHS

📦 한 번 생각해 보자

📦 풀이

LHS

RHS

LHS / RHS

📦 풀이

1. foo(2); 는 RHS 참조다. ()는 실행을 뜻하는데 먼저 foo를 검색 하여 값을 가져와 함수인지 판별하기 위함이다.

 

2. function foo(a) { 에서의 a는 LHS 참조가 일어난다. 실행 시 2를 인자로 전달하는데 a를 선언하고 2를 대입하는 과정이 발생한다.

 

3. console.log(a);에서의 a는 인자로 값을 전달하는 역할이다. 값을 가져와야 하기 위해 RHS 참조를 한다. 그리고 foo(2); 와 마찬가지로 console.log에서도 a의 값을 받는 변수를 선언하고 값을 대입하기 위해 LHS 참조를 한다.

📦 중첩 스코프

📦 중첩 스코프

중첩으로 스코프가 발생하는 경우가 많다. 이럴 경우 다음과 같은 규칙이 적용된다.

 

• 엔진은 현재 스코프에서 변수를 찾기 시작하고, 찾지 못하면 한 단계씩 올라간다.
• 최상위 글로벌 스코프에 도달하면 찾든, 못 찾든 검색을 멈춘다.

📦 중첩 스코프

생략...

실행

1. console.log( a + b); 에서 b를 RHS참조 하여 값을 가져오려한다.

2. 현재 실행 중인 스코프에서 b를 찾지만 찾지 못한다.

3. 한 단계 상위 스코프인 글로벌 스코프로 올라간다.

4. b를 찾아 RHS 참조하여 값을 가져온다.

📦 오류

📦 오류

📦 오류

생략...

실행

console.log(a + b); 구문에서 b를 RHS  참조하려고 할 때 현재 실행 중인 스코프에서 b를 찾지못한다. 바깥 스코프에서 검색을 해도 찾지 못한다.  그렇게  찾지 못한 변수가 있음 변수에 ReferenceError 가 발생한다. 반대로 LHS 참조 시에는 변수를 검색 하지 못하면 해당 변수를 글로벌 스코프에 만들어 준다.

 

그리고 변수는 찾았지만 의도하는 동작을 해당 값이 실행 불가하다면 TypeError 가 발생하는 것이다.

ex) 함수가 아닌 값을 실행할 경우, null, undefined