JS - scope, hoisting, closure

자바스크립트 엔진

: compilation의 시작부터 끝까지 전 과정과 자바스크립트의 실행을 책임진다

 

자브스크립트 컴파일러

: 파싱과 코드 생성의 모든 일을 한다

 

자바스크립트 compilation

자바스크립트는 인터프리터 언어로 분류되나 컴파일러 언어처럼 자바스크립트 엔진이 소스코드를 다음과 같은 3단계의 compilation 과정을 거친

1. tokenizing (= lexing) : 문자열을 토큰(의미있는 조각)으로 만드는 과정
2. parsing : 토큰 배열을 문법구조를 반영한 중첩 원소를 갖는 트리 (AST, abstract syntax tree)로 변환
3. 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는 함수가 선언된 렉시컬 스코프 밖에서 실행됨.