Compilation
호이스팅, 스코프, let const 선언등에서 일어나는 현상을 이해하려면compilation의 의미와 과정을 이해해야 한다. JavaScript는 컴파일러 언어이다. 컴파일러 언어의 처리 과정에서 프로그램을 이루는 소스 코드가 실행 되기 전 3단계를 거치는데, 이를compilation이라고 한다.
Compilation 3단계
-
토크나이징(Tokenizing) / 렉싱(Lexing)
문자열을 나누어 토큰이라 불리는 의미 있는 조각으로 만드는 과정이다.
ex)var a = 2;의 토큰 결과vara=2;(빈칸은 의미가 있냐 없냐에 따라 토큰인지 아닌지 결정된다.)
토크나이징과 렉싱의 차이점 : 토큰을 인식할 때무상태 방식으로 하는지상태유지 방식으로 하는지에 따라 구분된다. 무상태 방식으로 인식한다면 토크나이징, 상태유지 방식이라면 렉싱이다. -
파싱(Parsing)
토크나이징 / 렉싱 과정에 의해 생성된 토큰 배열을 프로그램의 문법 구조를 반영하여 중첩 원소를 갖는 트리 형태로 바꾸는 과정이다. 파싱의 결과로 만들어진 트리를 AST(추상구문트리)라 한다.
ex)var a = 2;의 트리는 먼저 변수 선언이라 부르는 최상위 노드에서 시작하고, 최상위 노드는 ‘a’의 값을 가지는 확인자(identifer)와 대입수식(Assignment Expression) 이라 부르는 자식 노드를 가진다. -
코드 생성(Code-Generation)
파싱하면서 만들어진 AST를 실행 코드로 바꾸는 과정이다.
Scope
모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위가 결정된다. 다시말해 스코프란 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.
식별자(identifier) : 변수 이름, 함수 이름, 클래스 이름 (var, let, const, function, class, etc...)
Scope는 Global Scope와 Local Scope의 타입으로 구분된다.
- Global Scope: 전역에 선언되어 어디에서도 접근 가능
- Local Scope(block, function level scope): 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능
Lexical Scope & Dynamic Scope
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?위의 코드에서 foo 함수와 bar 함수를 호출할 경우, 어떤 값이 호출되는지 생각해보자.
마지막 bar 함수의 출력값은 1이라는 것은 확실히 알 수 있다. 하지만 foo 함수를 호출할 경우, bar 함수는 전역에서 선언되었기 때문에 전역 변수 x = 1을 가져올지, 아니면 foo 함수 안에서 bar 함수가 호출되었으니까 foo 함수 안에 있는 지역변수 x = 10 값을 가져올지, 위에서 배운 scope 개념만으로는 헷갈릴 수 있다.
이 때 필요한 개념이 렉시컬 스코프와 동적 스코프이다.
상위 스코프를 결정하는 방법은 두 가지 패턴이 존재한다.
1. 함수를 어디서호출하는가
2. 두 번째. 함수를 어디서선언하는가
첫 번째 방식을 동적 스코프(Dynamic scope)라 하고, 두 번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라고 한다.
자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프, 즉 함수를 어디서 '선언' 하였는지에 따라 결정된다.
위의 예시 코드에서 bar 함수는 전역에서 선언되었다. 이때 자바스크립트에서는 bar 함수가 선언된 전역(글로벌)이 상위스코프가 된다.
따라서, 예시 코드에서 foo(), bar() 모두 전역 변수 x인 1을 출력한다.
또한 이렇게 상위 레벨의 스코프로 참조 값을 찾아 나가는 현상을 스코프 체인(Scope Chain)이라고 한다. 전역 스코프에도 참조값이 없다면 null을 반환하게 된다.
