본문 바로가기
javascript

[javascript] scope, closure, execution context

framecreator 2021. 11. 16. 15:08

*** 아래의 내용은 <모던 자바스크립트 deep dive >(이웅모 저)책을 공부하며 정리한 내용입니다. *** 

 

 

scope

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다. 스코프는 식별자가 유효한 범위를 말한다. 

 자바스크립트 엔진은 스코프를 통해 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고 할 수 있다.

 

function add(x, y) {
  // 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
  // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다.
  console.log(x, y); // 2 5
  return x + y;
}

add(2, 5);

// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); // ReferenceError: x is not defined

 

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if (true) {
  var var2 = 2; // 코드 블록 내에서 선언한 변수
  if (true) {
    var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
  }
}

function foo() {
  var var4 = 4; // 함수 내에서 선언한 변수

  function bar() {
    var var5 = 5; // 중첩된 함수 내에서 선언한 변수
  }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

 

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 이는 의도치 않게 변수값이 재할당되어 변경되는 부작용을 발생시킨다.

 

function foo() {
  var x = 1;
  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
  // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
  var x = 2;
  console.log(x); // 2
}
foo();

 

하지만 let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

 

function bar() {
  let x = 1;
  // let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
  let x = 2; // SyntaxError: Identifier 'x' has already been declared
}
bar();

 

 

// 전역 함수
function foo() {
  console.log('global function foo');
}

function bar() {
  // 중첩 함수
  function foo() {
    console.log('local function foo');
  }

  foo(); // 
}

bar();

 

 지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다. 이는 코드 블록이 아닌 함수에 의해서 지역 스코프가 생성된다는 의미이다. 

 C나 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라고 한다.

 

   var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다. 따라서 x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.

 

 

var x = 1;

if (true) {
  // var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
  // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
  // 따라서 x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
  // 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
  var x = 10;
}

console.log(x); // 10

 

블록 레벨 스코프를 지원하는 프로그래밍 언어에서는 for 문에서 반복을 위해 선언된 i 변수가 for 문의 코드 블록 내에서만 유효한 지역 변수이다. 이 변수를 for 문 외부에서 사용할 일은 없기 때문이다. 하지만 var 키워드로 선언된 변수는 블록 레벨 스코프를 인정하지 않기 때문에 i 변수는 전역 변수가 된다. 따라서 전역 변수 i는 중복 선언되고 그 결과 의도치 않은 전역 변수의 값이 재할당된다. 

var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하지만 let과 cons키워드는 블록레벨 스코프를 지원한다.

 

 

var i = 10;

// for 문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5

 

자바스크립트는 렉시컬 스코프를 따르므로 함수를 어디에서 호출했는지가 아니라 함수를 어디에서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.

 이처럼 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때마다 함수의 상위 스코프를 참조해야 되기 때문이다.

 아래 예제에서 bar 함수는 전역에서 정의된 함수이다. 함수 선언문으로 정의된 bar 함수는 전역 코드가 실행되기 전에 먼저 평가되어 함수 객체를 생성한다. 이 때 생성된 bar 함수 객체는 자신이 정의된 스코프, 즉 전역 스코프를 기억한다. 그리고 bar 함수가 호출되면 호출된 곳이 어디인지 관계없이 언제나 자신이 기억하고 있는 전역 스코프를 상위스코프로 사용한다. 따라서 아래 예제를 실행하면 전역 변수 x의 값 1이 두 번 출력된다.

 

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); //1
bar(); //1

 

 

 

closure

클로저는 MDN에서 다음과 같이 정의하고 있다. "클로저는 함수와 함수가 선언된 렉시컬 환경과의 조합이다."

정의가 난해하다고 할 수 있다.

우선 함수가 선언된 렉시컬 환경이 핵심 키워드이다. 아래 예제에서 outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. 이 때 중첩함수 innerFunc의 상위 스코프는 외부 함수 outerFunc의 스코프이다. 따라서 중첩함수 innerFunc 내부에서 자신을 포함하고 있는 외부함수 outerFunc의 x 변수에 접근할 수 있다.

 

const x = 1;

function outerFunc() {
  const x = 10;

  function innerFunc() {
    console.log(x); // 10
  }

  innerFunc();
}

outerFunc();

 

  만약 중첩함수가 아니라면 innerFunc를 outerFunc 함수 내부에서 호출한다하더라도 outerFunc의 x 변수에 접근할 수 없다. 이같은 현상이 발생하는 이슈는 자바스크립트가 렉시컬 스코프를 따르기 때문이다. 

 

const x = 1;

function outerFunc() {
  const x = 10;
  innerFunc();
}

function innerFunc() {
  console.log(x); // 1
}

outerFunc();

 

 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대해 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 이것이 렉시컬 스코프이다. 

 

const x = 1;

function foo() {
  const x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

 

함수가 정의된 환경(위치)와 호출되는 환경(위치)은 다를 수 있다. 따라서 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과는 상관없이 자신이 정의된 환경, 즉 상위 스코프(함수 정의가 위치하는 스코프가 바로 상위 스코프이다.)를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 

 다시 말해 함수 정의가 평가되어 함수 객체를 생성할 때 자신이 정의된 환경에 의해 결정된 상위 스코프의 참조를 함수 객체 자신의 내부 슬롯[[Environment]]에 저장한다. 이 때 자신의 내부 슬롯[[Environment]]에 저장된 상위 스코프의 참조는 현재 실행중인 실행 컨텍스트의 렉시컬 환경을 가리킨다. 

 왜냐하면 함수 정의가 평가되어 함수 객체를 생성하는 시점은 함수가 정의된 환경, 즉 상위 함수(또는 전역 코드)가 평가 또는 실행되고 있는 시점이며 현재 실행중인 실행 컨텍스트는 상위함수(또는 전역 코드)의 실행 컨텍스트이기 때문이다.

 따라서 함수 객체의 내부 슬롯[[Environment]]에 저장된 현재 실행중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프이다. 또한 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값이다. 함수 객체는 내부 슬롯[[Environment]]에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억한다.

 

const x = 1;

function foo() {
  const x = 10;

  // 상위 스코프는 함수 정의 환경(위치)에 따라 결정된다.
  // 함수 호출 위치와 상위 스코프는 아무런 관계가 없다.
  bar();
}

// 함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경을 [[Environment]]에 저장하여 기억한다.
function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

아래 예제에서 outer 함수를 호출(③)하면 outer 함수는 중첩함수 inner를 반환하고 생명 주기를 마감한다. 즉 outer함수의 실행이 종료되면 outer함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거된다. 이 때 outer함수의 지역 변수 x와 변수 값10을 저장하고 있던 outer함수의 실행 컨텍스트가 제거되었으으로 outer함수의 지역 변수 x 또한 생명 주기를 마감한다. 따라서 outer함수의 지역 변수 x는 더는 유효하지 않게 되어 x변수에 접근할 수 있는 방법은 달리 없어 보인다.

그러나 위 코드의 실행결과 ④는 outer 함수의 지역변수 x의 값이 10이다. 이미 생명 주기가 종료되어 실행 컨텍스트 스텍에서 제거된 outer 함수의 지역변수 x가 다시 부활이라도 한 듯이 동작하고 있다.

 이처럼 외부 함수보다 중첩함수가 더 오래 유지되는 경우 중첨함수는 이미 생명주기가 종료한 외부함수의 변수를 참조할 수 있다. 이를 클로저라고 부른다.

 위에서 outer함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거될 때 outer 함수의 렉시컬 환경까지 소멸되는 것은 아니다. outer 함수의 렉시컬 환경은 inner 함수의 내부 슬롯[[Environment]]에 의해 참조되고 있고 inner 함수는 전역 변수 innerFunc에 의해 참조되고 있으므로 가비지 컬렉션의 대상이 되지 않기 때문이다. 가비지 컬렉터는 누군가가 참조하고 있는 메모리 공간을 함부로 해제하지 않는다.

 outer 함수가 반환한 inner 함수를 호출(④)하면 inner 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 푸시된다. 그리고 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에는 inner 함수 객체의 [[Environment]] 내부 슬롯에 저장되어 있는 참조값이 할당된다.

 

const x = 1;

// ①
function outer() {
  const x = 10;
  const inner = function () { console.log(x); }; // ②
  return inner;
}

// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.
const innerFunc = outer(); // ③
innerFunc(); // ④ 10

 

클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩함수가 외부함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다. 일반적으로 모든 함수를 클로저라고 하지는 않는다.

 

<!DOCTYPE html>
<html>
<body>
  <script>
    function foo() {
      const x = 1;
      const y = 2;

      // 일반적으로 클로저라고 하지 않는다.
      function bar() {
        const z = 3;

        debugger;
        // 상위 스코프의 식별자를 참조하지 않는다.
        console.log(z);
      }

      return bar;
    }

    const bar = foo();
    bar();
  </script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<body>
  <script>
    function foo() {
      const x = 1;

      // 일반적으로 클로저라고 하지 않는다.
      // bar 함수는 클로저였지만 곧바로 소멸한다.
      function bar() {
        debugger;
        // 상위 스코프의 식별자를 참조한다.
        console.log(x);
      }
      bar();
    }

    foo();
  </script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<body>
  <script>
    function foo() {
      const x = 1;
      const y = 2;

      // 클로저
      // 중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
      function bar() {
        debugger;
        console.log(x);
      }
      return bar;
    }

    const bar = foo();
    bar();
  </script>
</body>
</html>

 

 

execution context

 

 

코드가 실행되려면 다음과 같이 스코프, 식별자, 코드 실행 순서 등의 관리가 있어야 한다. 첫번째, 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스 등)를 스코프를 구분하여 등록하고 상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리할 수 있어야 한다. 둘째, 스코프는 중첩 관계에 의해 스코프 체인을 형성해야 한다. 즉, 스코프 체인을 통해 상위 스코프로 이동하여 식별자를 검색할 수 있어야 한다. 셋째, 현재 실행 중인 코드의 실행 순서를 변경(예를 들어 함수 호출에 의한 실행 순서 변경)할 수 있어야 하며 다시 되돌아갈 수도 있어야 한다. 이 모든 것을 관리하는 것이 실행 컨텍스트이다. 

 실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)을 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.

 

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;

  // 메서드 호출
  console.log(a + x + y); // 130
}

// 함수 호출
foo(100);

// 메서드 호출
console.log(x + y); // 3

 

아래 예제는 소스 코드의 타입으로 전역 코드와 함수 코드로 이루어져 있다. 자바스크립트 엔진은 먼저 전역 코드를 평가하여 전역 실행 컨텍스트를 생성한다. 그리고 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다. 

  이 때 생성된 실행 컨텍스트는 스택 자료구조로 관리된다. 이를 실행 컨텍스트 스택이라고 부른다. 아래 코드를 실행하면 실행 컨텍스트 스택에는 실행 컨텍스트가 추가되고 제거되는 과정을 거치게 된다. 먼저 전역 코드의 평가 와 실행이 진행된다. 다음에 foo 함수의 코드의 평가와 실행이 된다. 이후 bar 함수 코드의 평가와 실행이 된다. 다시 foo 함수 코드로 복귀되고 다시 전역 코드로 복귀된다.

 실행 컨텍스트 스택은 코드의 실행 순서를 관리한다. 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 실행 중인 실행 컨텍스트이다. 따라서 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트를 실행 중인 실행 컨텍스트라 부른다.

 

const x = 1;

function foo () {
  const y = 2;

  function bar () {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}

foo(); // 6

 

    렉시컬 환경은 식별자와 식별자에 바인딩된 값,  그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행컨텍스트를 구성하는 컴포넌트이다. 실행 컨텍스트 스택이 코드의 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리한다. 

 렉시컬 환경은 키와 값을 갖는 객체형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다. 즉 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체이다. 

  실행 컨텍스트는 Lexical Environment 컴포넌트와 Variable Environment 컴포넌트로 구성된다. 생성 초기에 Lexical Environment 컴포넌트와 Variable Environment 컴포넌트는 하나의 동일한 렉시컬 환경을 참조한다. 이후 몇 가지 상황을 만나면 Variable Environment 컴포넌트를 위한 새로운 렉시컬 환경을 생성하고 이 때부터 Lexical Environment 컴포넌트와 Variable Environment 컴포넌트는 내용이 달라지는 경우도 있다. 

 렉시컬 환경은 환경레코드(Environmnet Record)와 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)로 구성된다. 환경레코드(Environmnet Record)는 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인된 값을 관리하는 저장소다.  외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)는 상위 스코프를 가리킨다. 이 때 상위 스코프는 외부 렉시컬 환경, 즉 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 말한다. 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현한다.

 

 

아래 예제에서 전역 코드의 평가 과정을 살펴보면 다음과 같다. 

var x = 1;
const y = 2;

function foo (a) {
  var x = 3;
  const y = 4;

  function bar (b) {
    const z = 5;
    console.log(a + b + x + y + z);
}
  bar(10);
}

foo(20); // 42

 

우선 전역 객체가 생성된다. 전역 객체에는 빌트인 전역 프로퍼티와 빌트인 전역 함수, 그리고 표준 빌트인 객체가 추가되며 동작 환경에 따라 클라이언트 사이드 Web API 또는 특정 환경을 위한 호스트 객체를 포함한다. 전역 객체도 Object.prototype을 상속받는다. 전역 객체도 프로토 타입 체인의 일원이다.

 

// Object.prototype.toString
window.toString(); // -> "[object Window]"

window.__proto__.__proto__.__proto__.__proto__ === Object.prototype; // -> true

 

소스 코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가한다. 먼저 비어있는 전역 실행 컨택스트를 생성하여 실행 컨택스트 스택에 푸시한다. 다음으로 전역 렉시컬 환경을 생성하고 전역 실행 컨택스트에 바인딩한다. 렉시컬 환경은 2개의 컴포넌트 즉 환경레코드(Environmnet Record)와 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)로 구성된다.

 

let foo = 1; // 전역 변수

{
  // let, const 키워드로 선언한 변수가 호이스팅되지 않는다면 전역 변수를 참조해야 한다.
  // 하지만 let 키워드로 선언한 변수도 여전히 호이스팅이 발생하기 때문에 참조 에러(ReferenceError)가 발생한다.
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  let foo = 2; // 지역 변수
}

 

 전역 객체 레코드는 객체 환경 레코드와 선언적 환경 레코드로 구성되어 있다.  전역 환경 레코드를 구성하는 컴포넌트인 객체 환경 레코드는 BindObject라고 부르는 객체와 연결된다. BindObject는 전역 객체 생성에서 생성된 전역 객체이다.

  이후 전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩된다. 전역 코드에서 this를 참조하면 전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 바인딩되어 있는 객체가 반환된다. 이 예제에서는 현재 평가 중인 소스코드가 전역 코드인데 전역코드를 포함하는 소스코드는 없으므로 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)에 null이 할당된다. 

 

 이후에는 전역 코드가 실행되고 다음에 foo 함수의 코드의 평가와 실행이 된다. 이후 bar 함수 코드의 평가와 실행이 된다. bar 함수 코드가 실행 종료되고 이후 foo 함수의 코드가 실행 종료되며 전역 코드가 실행 종료를 하게 된다. 

'javascript' 카테고리의 다른 글

[Javascript] Scope, Hoisting  (0) 2021.11.16
[JAVASCRIPT] 변수 데이터 불변성 & 함수의 매개 변수  (0) 2021.11.16
[javascript] object & property descriptor, prototype  (0) 2021.11.16
[javascript] this, arguments, function, arrow function, callback  (0) 2021.11.11
[javascript] call by value, call by reference, call by sharing / 원시타입과 참조타입 / type of 와 instance of  (0) 2021.11.11

'javascript' Related Articles

티스토리툴바