scope

변수가 유효한 범위

• 코드 블럭 {}안에서 선언한 변수는 블록안에서만 유효

렉시컬 환경

내부 숨김 연관 객체 ( 실행중인 함수, 코드블럭, 스크립트 전체는 이를 갖는다.)

명세서에만 존제하는 js동작 방법을 설명하는 이론상의 객체이기 때문에 조작은 불가능하다.

구성

• 환경 레코드 : 모든 지역 변수를 프로퍼티로 저장하고 있는 객체. this와 같은 기타 정보도 포함

• 외부 렉시컬 환경에 대한 참조 : 외부 코드와 연관

변수 선언시 동작 과정

변수는 환경 레코드(특수 내부 객체)의 프로퍼티

전역 렉시컬 환경 : 스크립트 전체와 관련된 렉시컬 환경. 전역 렉시컬 환경은 외부 참조를 갖지 않는다. (null)

let user;
user = 'hello';
user = 'bye';

1. 첫 변수 선언시 uninitialized상태 = 특수 내부 상태로 js엔진은 이 변수를 인지하지만 접근,참조를 할수 없는 상태

2. let user를 실행하여 프로퍼티 값은 undefined로 바뀌어 이때부터 사용 가능

3. user의 값이 hello로 바뀐다.

4. user의 값이 bye로 바뀐다.

함수 선언시 동작 과정

함수도 변수와 마찬가지로 프로퍼티로 취급 하여 동작 방법은 동일하나 함수 선언문으로 선언한 함수는 바로 초기화 상태가 되어 사용이 가능하다.

function sayHi() {
  alert('hello');
}

블럭 코드로 들어가게 되면 새로운 렉시컬 환경이 자동적으로 만들어져 이 환경은 내부 렉시컬 환경이고 코드블럭 밖의 환경은 외부 렉시컬 환경으로 내부 렉시컬 환경은 외부 렉시컬 환경에 대한 참조를 갖는다.

그래서, 코드블럭 내부에서 특정 변수에 접근할때 처음에 내부 렉시컬 환경에 접근후 존재하지 않으면 참조를 이용해 외부 렉시컬 환경에서 변수를 찾게 된다.

모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억한다고 했는데 기억하는 방법은 다음과 같다. 함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖고 이를 통해 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장된다.

클로저

외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수로 스코프에 묶인 변수를 바인딩하기 위한 기술.

new Function()을 제외하고는 js의 모든 함수는 클로저이다.

위의 설명과 같이 함수 생성시 자동으로 [[Environment]]라는 숨김 프로퍼티를 생성하고 이를 통해 외부 렉시컬 환경을 참조할 수 있기 때문이다.

가비지 컬렉션

가비지 컬렉션에서 가비지 컬렉션에 대해 정리했는데 중첩함수 에서도 도달 가능한 상태를 유지 시켜 주는 것이 [[Environment]]에 외부 함수 렉시컬 환경에 대한 정보가 저장되기 때문에 함수 호출이 끝나도 렉시컬 환경이 메모리에 유지되는 이유이다.

function f() {
  let value = 123;

  return function () {
    alert(value);
  };
}

let g = f(); // g.[[Environment]]에 f() 호출 시 만들어지는 렉시컬 환경 정보가 저장됩니다.

실제 V8엔진 동작

위의 내용은 명세서에 나온 기본 정의이지 js엔진을 최적화 시키기 위해 어떻게 설계 했는지에 따라 동작 방식이 다를 수 있다.

실제 V8엔진은 최적화를 위해 사용안할 것 같은 함수를 메모리에서 정리해버린다.

function f() {
  let value = 123;

  return function () {
    alert(value);
  };
}

let g = f(); // Uncaught ReferenceError: value is not defined가 출력