자바스크립트 엔진
: compilation의 시작부터 끝까지 전 과정과 자바스크립트의 실행을 책임진다
자브스크립트 컴파일러
: 파싱과 코드 생성의 모든 일을 한다
자바스크립트 compilation
자바스크립트는 인터프리터 언어로 분류되나 컴파일러 언어처럼 자바스크립트 엔진이 소스코드를 다음과 같은 3단계의 compilation 과정을 거친
- tokenizing (= lexing) : 문자열을 토큰(의미있는 조각)으로 만드는 과정
- parsing : 토큰 배열을 문법구조를 반영한 중첩 원소를 갖는 트리 (AST, abstract syntax tree)로 변환
- code-generatoin : AST를 실행 코드로 변환
스코프
- 변수에 값을 대입하거나 변수의 값을 얻어오기 위해 변수를 검색해야 하는데 어디서 어떻게 변수를 검색하는지 결정하는 규칙의 집합이 스코프이다
- 스코프는 선언된 모든 변수 검색 목록을 작성하고 유지. 특정 규칙을 통해 현재 실행코드에서 변수 적용 방식을 정한다
- 자바스크립트에서는 개발자가 코드를 작성할 때 함수를 어디서 선언하는지에 따라 스코프가 정의되는 렉시컬 스코프를 작동방식으로 사용
스코프의 종류
scope = 특정 변수의 접근가능한 범위, 공간
block = 프로그램 실행 상의 동일 유효범위 묶음, 보통 중괄호로 표현
global scope = 코드 어디서든 접근 가능한 공간
global variable = global scope에 선언된 변수
block scope = block의 유효 범위 { }
local variable = block 내부에 선언된 변수
global namespace = global variable을 사용할 수 있는 범위
scope pollution = global variable같이 scope가 커서 의도치 않게 해당 변수에 접근하게 되는것
호이스팅
- 스코프의 모든 선언문은 어디서 선언되는 실행 전에 먼저 처리 된다.
- 선언문이 각각 속한 스코프의 꼭대기로 끌어올려지지만 대입문은 끌어 올려지지 않는다
var a = 2 에서 var a는 끌어올려지지만, a=2는 끌어올려지지 않는다 - 함수와 변수 선언문은 모두 끌어올려지지만 함수가 먼저 끌어올려지고 그다음 변수가 올려진다
- 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다
스코프 체인
- 하위함수에서 상위함수로의 부모/자식 관계가 정의된 것
- 새롭게 정의된 스코프는 상위의 스코프에 접근할 수 있다.
클로저
- 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능
- 정의한 함수를 리턴하고 바깥에서 사용
function foo() {
let a =2;
function bar() {
console.log(a);
}
return bar
}
let tak = foo();
tak(); // 2 -> closure!
bar()는 foo()의 렉시컬 스코프에 접근할 수 있고, foo()는 bar를 참조하는 함수 객체 자체를 반환하여 tak에 대입.
tak() 함수를 호출했는데 이는 내부 함수인 bar()를 호출한 것.
bar는 함수가 선언된 렉시컬 스코프 밖에서 실행됨.
'Frontend' 카테고리의 다른 글
3. React Event Handling (0) | 2020.10.25 |
---|---|
2. React Component (0) | 2020.10.24 |
Developer Tools (0) | 2020.10.24 |
Semantic Web과 Semantic Tag (0) | 2020.10.24 |
CSS 레이아웃 (0) | 2020.10.24 |