[JavaScript] 식별자가 유효한 범위를 나타내는 스코프(Scope)와 외부 렉시컬 환경 참조를 통한 스코프 체인 형성

𐂂 스코프(Scope) 란

선언된 위치에 따른 식별자가 유효한 범위를 말한다.

⚠️ 스코프는 네임스페이스(namespace)다.
⚠️ 스코프가 없다면, 같은 이름을 갖는 변수는 충돌을 일으킨다.
⚠️ 자바스크립트 엔진은 스코프 체인을 통해 참조할 변수를 검색한다.

➼ 지역스코프 (함수 몸체 내부)

➡️ 함수는 지역스코프를 생성한다. (함수가 종료되면 지역스코프도 소멸)
➡️ 함수 내에 선언된 지역변수는 함수가 생성한 지역스코프에 등록되고, 스코프가 소멸될때까지 유효하다.
➡️ 함수가 종료되어도 누군가 지역스코프를 참조하고 있다면, 그 지역스코프는 소멸되지 않는다.

𐁍 스코프 체인(Scope Chain)

스코프가 계층적으로 연결된 것을 말한다.
*상위 스코프 방향*으로 이동하며 참조할 변수를 검색한다.

⚠️ 스코프는 함수의 중첩에 의해 계층적 구조를 갖는다. (외부함수의 지역스코프 == 상위스코프)

𖠃 실행 컨텍스트 (Execution Context)

자바스크립트 코드가 실행될 때, 생성되고 관리되는 환경을 말한다.
변수, 함수선언, 스코프, this값 같은 실행관련 정보를 담고있어, 코드 실행 중에 필요한 모든 정보를 제공한다.

🍩 Variable Environment (변수 환경)
: 실행 컨텍스트에서 선언된 변수 및 함수 선언을 저장하는 공간을 말한다.
🍩 Lexical Environment (*렉시컬 환경*)
🍩 this Binding (this 바인딩)
: this 키워드가 참조하는 객체를 정의
🍩 Outer Environment (외부 환경)
: 외부 스코프에 대한 참조를 저장하는 공간을 말한다.
🍩 Code Execution (코드 실행)
: 실제 코드 실행, 변수 할당 및 함수 호출

실행 컨텍스트는 자바스크립트 엔진에 의해 관리되는데, 스택형태로 관리된다.(실행 컨텍스트 스택, 호출 스택)

𖠃 렉시컬 환경 (Lexical Environment, 자료구조)

현재 스코프에서 사용가능한 변수 및 함수에 대한 정보 (+ 클로저 관련 정보)를 저장하는 자료구조를 말한다.
렉시컬 환경은 변수와 함수의 스코프를 결정하고, 스코프 체인을 형성한다.
이는 식별자 검색을 위해 사용된다.

📀 환경 레코드 (Environment Record)
: (전역/매개/지역)변수/ 함수를 저장하고 관리하는 역할을 맡는다.

💿 외부 렉시컬 환경 참조 (Outer Lexical Environment Reference)
: 현재 렉시컬 환경과 상위 렉시컬 환경과의 연결을 나타내 스코프 체인을 형성한다.

🦉 클로저
: 함수가 정의될 때 생성되어, 정의된 스코프의 외부 렉시컬 환경을 기억하고 있는 매커니즘을 말한다.

📜 외부 렉시컬 환경 참조.js

  function outer() {
      let outerLet = "I'm in outer!";

      function inner() {
          let innerLet = "I'm in inner!";
          console.log(outerLet);
      }
      return inner;
  }

  let innerFunc = outer();
  innerFunc();

🦉 코드 해석
: inner() 함수는 외부 렉시컬 환경 참조를 통해
outer() 함수의 렉시컬 환경에 접근하여 outerLet변수를 참조할 수 있다.