Lexical Environment

Lexical Environment?

Lexical Environment란 JS Engine이 현재 읽고 있는 코드의 Scope 혹은 Environment를 말한다. 새로운 Lexical Environment는 괄호({})가 있을 때 마다 생성된다. Execution Context가 JS Engine에게 현재의 Lexical Environment를 알려주는 역할을 하고, 이에 맞게 사용할 수 있는 변수를 결정한다. Lexical Environment는 쉽게 생각해서 하나의 새로운 세계라고 생각하면 된다.

 

function one() {
  var isValid = true; // local env
  two(); // new execution context (새로운 세계)
}

function two() {
  var isValid; // undefined
}
var isValid = false; // global
one();

 

Scope Chain

Udemy: JavaScript: The Advanced Concept

자신의 Lexical Scope 밖으로 연결할 수 있는 연결고리를 Scope Chain이라고 한다. Scope Chain은 부모의 Environment의 변수들에 접근 할 수 있는 역할을 해준다.

 

function sayMyName() {
  var a= "a";
  return function findName() {
    var b = "b";
    console.log(a);
    return function printName() {
      var c = "c";
      console.log(a,b);
    }
  }
}

sayMyName()()();

위 코드에서 볼 수 있듯이, 함수는 부모의 container에 있는 변수들에만 접근할 수 있다. 자식이 부모의 변수를 접근 할 수 있지만, 부모가 자식의 변수에 접근 할 수 없다. 추후에 배울 class의 상속과도 비슷한 개념이라고 생각해도 좋다.

Udemy: JavaScript: The Advanced Concept

Function And Block Scope

대부분의 언어는 Block Scope 으로 되어있다. 무슨 뜻이냐면, 새로운 괄호가 생기면, 또 하나의 Lexical Environment가 생긴다는 것이다. 하지만, JavaScript는 본질적으로 Function Scope으로 되어있다. 따라서 괄호가 아닌, Global Scope에서 function이 있는 곳에서만 새로운 Local Environment를 만든다.

 

그렇다면 Block Scope는 JS에서 없는 것 일까? 그것은 아니다!

 

그렇지 않다!

 

ES6에서는 Block Scope을 위해서 let 과 const를 JS에서 만들었다.

 

// Function Scope
function loop() {
  for (var i = 0; i < 5; i++) { console.log(i); }
  console.log("final", i);
}

// Block Scope
function loop2() {
  for (let i = 0; i < 5; i++) { console.log(i); }
  // console.log("Final2", i); // Error
}

loop();
loop2();

해당 코드를 보면 알 수 있듯이, let 을 사용하면 괄호 안에서 새로운 Block Scope가 생성된다. 이에 따라 for 문 밖에서는 i를 접근할 수 없다.

 

Let And Const

 

변수 선언에 있어서 let 과 const는 var와 조금 다르게 작동한다. Execution Context가 생성되면, JS Engine은 그 Scope 안에 있는 var 변수에 memory를 할당해주고, undefined로 값을 초기화 해 준다. 반면, let과 const는 코드 상으로 실행되는 구간에서 초기화된다. 따라서 코드 상으로 실행되는 구간 전에 값을 호출하면 Error가 발생한다.