Chapter 2: Illustrating Lexical Scope - hochan222/Everything-in-JavaScript GitHub Wiki

용어 "lexical"는 컴파일의 첫 번째 단계 (어휘 분석/파싱)을 의미한다.

Marbles, and Buckets, and Bubbles... Oh My!

각 범위는 상위 범위에 포함되며 컴파일 중에 결정된다.

정확히는 studentID 매개변수는 파란색 범위에 포함되지 않는다. (하지만 우선 넘어가자! 뒤에 나옴)

id, name, log 는 변수가 아니고 속성이다.

JS 엔진은 변수 선언을 찾으면 소속된 범위를 질의한다. 변수/식별자에 대한 참조는 상위 범위에서는 가능하지만 하위 범위에서는 불가능하다.
"shadows" scope에 속하지 않는 한 위 범위 규칙을 따른다.

A Conversation Among Friends

• Engine: JavaScript 프로그램의 시작부터 끝까지 컴파일 및 실행을 담당한다.
• Compiler: Engine의 친구 중 한 명으로 파싱 ​​및 코드 생성의 모든 더러운 작업을 처리한다.
• Scope Manager: 엔진의 또 다른 친구로 선언 된 모든 변수/식별자의 조회 목록을 수집하고 유지 관리하며 현재 실행중인 코드에 액세스 할 수있는 방법에 대한 일련의 규칙을 적용한다.

앞에서 본 다음 코드

var students = [
  { id: 14, name: "Kyle" }, 
  { id: 73, name: "Suzy" }, 
  { id: 112, name: "Frank" }, 
  { id: 6, name: "Sarah" }
];

function getStudentName(studentID) { 
  for (let student of students) {
    if (student.id == studentID) { 
      return student.name;
    } 
  }
}

var nextStudent = getStudentName(73);

console.log(nextStudent);
// Suzy

에서 첫번째 명령문부터 보면, 우리는 하나의 선언문으로 보지만 Engine은 두 개의 별개의 작업으로 인식한다. 하나는 컴파일러가 컴파일 중에 처리하고 다른 하나는 엔진이 실행 중에 처리한다.

컴파일러는 프로그램에서 가장 먼저 렉싱을 수행하여 토큰으로 분할 한 다음 트리(AST)로 구문 분석한다. 컴파일러가 코드를 생성하려면 더 많은 과정이있다. 다음은 컴파일러가 첫번째 구문을 처리하는 단계이다.

1. var student를 만나면 컴파일러는 해당 특정 범위 버킷에 대해 students라는 변수가 이미 존재하는지 확인하기 위해 범위 관리자에게 요청한다. 존재 한다면 컴파일러는 이 선언을 무시하고 계속 진행한다. 그렇지 않으면 컴파일러는 (실행시) 스코프 관리자에게 해당 스코프 버킷에 학생이라는 새 변수를 생성하도록 요청하는 코드를 생성한다.
2. 그런 다음 컴파일러는 엔진이 나중에 실행할 코드를 생성하여 student = [] 할당을 처리한다.

컴파일 과정에서 __Scope Manager__와 __Compiler__는 끊임없이 상호 작용하면서 코드를 생성한다.

Compiler : 안녕하세요, Scope Manager (Global), students이라는 식별자에 대한 공식 선언을 찾았습니다. 들어 본 적이 있습니까?
(Global) Scope Manager : 아니요, 들어 본 적이 없어서 방금 만들었습니다.
Compiler : 안녕하세요, Scope Manager, getStudent-Name이라는 식별자에 대한 공식 선언을 찾았습니다. 들어 본 적이 있습니까?
(Global) Scope Manager : 아니요,하지만 방금 만들었습니다.
Compiler : Hey, ))Scope Manager__, getStudentName이 함수를 가리 키므로 새 범위 버킷이 필요합니다.
(Function) Scope Manager : 알겠습니다. 여기 범위 버킷이 있습니다.
Compiler : 안녕하세요, Scope Manager (Function), studen-tID에 대한 공식 매개 변수 선언을 찾았습니다. 들어 본 적이 있습니까?
...

그리고 런타임 과정에서는 __Scope Manager__와 __Engine__이 대화한다.

(Global) Scope Manager : 네, 여기 변수가 있습니다.
Engine : Scope Manager, 목표물을 찾았습니다. students 참조를 찾았습니다, 들어 본 적이 있습니까?
(Global) Scope Manager : 예, 공식적으로 이 범위에 대해 선언되었으므로 여기에 있습니다.
Engine : 감사합니다. 저는 students들을 초기화하고 있습니다. 정의되어 사용할 준비가되었습니다.
Engine : 안녕하세요, Scope Manager (Global), nextStudent의 대상 참조를 찾았습니다. 들어 본 적이 있습니까?
(Global) Scope Manager : 예,이 범위에 대해 공식적으로 선언되었으므로 여기에 있습니다.
Engine : 감사합니다. nextStudent를 undefined로 초기화하고 있으므로 사용할 준비가되었습니다.
...

따라서, 요약하자면 첫 번째 명령문은

1. 컴파일러는 범위 변수의 선언을 설정한다.
2. Engine이 실행되는 동안 명령문의 할당 부분을 처리하기 위해 Engine은 Scope Manager에 변수를 조회하도록 요청하고 정의되지 않은 상태로 초기화하여 준비하여 배열 값을 할당한다.

Nested Scope

lexical scope의 주요 측면 중 하나는 현재 범위에서 식별자 참조를 찾을 수 없을 때마다 중첩의 다음 외부 범위를 참조한다는 것이다. 해당 프로세스는 답변을 찾거나 더 이상 문의 할 범위가 없을 때까지 반복된다.

Undefined Mess

선언이 안된 변수는 "Reference Error: " 에러를 출력하지만, 선언이되고 아무것도 할당이 안됐을 때는 "undefined" 가 출력된다. 두 개념을 혼동하지 말자.
하지만, typeof 연산자는 두 상태에 대해 모두 undefined를 출력한다.

var studentName;
typeof studentName; // "undefined"

typeof doesntExist; // "undefined"

이 때문에 세심하게 신경을 쓰자.

Global... What!?

변수가 target이고 strict-mode가 적용되지 않으면 혼란스럽고 놀라운 레거시 동작이 시작됩니다.
전역 범위의 범위 관리자가 해당 대상 할당을 수행하기 위해 실수로 전역 변수를 생성한다.

function getStudentName() {
  // assignment to an undeclared variable :( 
  nextStudent = "Suzy";
}

getStudentName();
console.log(nextStudent);
// "Suzy" -- oops, an accidental-global variable!