[코어 자바스크립트] 실행 컨텍스트

link717·2020년 12월 6일

JavaScript TIL 실행컨텍스트 코어자바스크립트

코어 자바스크립트

목록 보기

1/4

🙂 실행 컨텍스트(execution context)

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 이 정보를 잘 이해하면 자바 스크립트를 조금 더 정확히 이해하는데 도움이 될 것입니다.

실행 컨텍스트를 구성하는 방법은 크게 3가지가 있다. ① 전역공간 ② eval 함수 ③ 함수. 이 중 우리가 보편적으로 실행 컨텍스트를 구성하는 것은 함수를 실행하는 것 뿐이다.

es6에서는 블록에 의해서도 실행 컨텍스트가 생성된다.
코드 블록 예시: 함수, if 문, for 문, while 문, try/catch 문 등

🤗 environmenetRecord와 Hoisting

environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보(변수의 이름)가 저장된다. (함수에 지정된 argument 식별자, 함수 그 자체 혹은 var로 선언된 변수의 식별자) 이를 통해 JavaScript는 코드가 실행되기 전에 해당 환경에 속한 모든 변수명을 알고 있는 셈이며 이 과정에서 Hoisting이라는 개념이 등장한다.

Hoisting은 변수 정보를 수집하는 JavaScript 엔진의 특성을 이해하기 쉽게 단어로 표현한 개념이다.

 
 function a () {
  var x = 1;
  console.log(x);   // 1
  var x;
  console.log(x);   // 1
  var x = 2;
  console.log(x);   // 2
}

a();

1, undefined, 2가 출력될 것이라고 예상했지만 실제로는 1, 1, 2가 출력되었다. 그 이유는 Hoisting 과정을 통해서 함수 내부의 식별자 정보가 상위로 Hoisting → 변수 선언 → console.log 구문 순으로 코드가 실행되기 때문이다.

🤗 outerEnvironmentReference, 스코프 체인

Scope란 식별자에 대한 유효범위이다. 예를 들면 함수 안에서 선언한 변수(var 선언 제외)는 함수 내부에서는 접근할 수 있지만 함수 외부에서는 접근할 수 없다. 하지만 함수 밖에서 선언된 전역변수는 함수 안에서도 접근하여 사용이 가능하다.

var a = 1;
var outer = function () {
  var inner = function () {
    console.log(a);     // undefined
    var a = 3;
  };
  inner();
  console.log(a);      // 1
};

outer();
console.log(a);        // 1

/*변수/함수 선언 및 할당 → outer() 함수 실행, inner() 함수 할당 
→ inner() 함수 실행, 첫번째 console.log → 두번째 console.log
→ 3번째 console.log 순으로 실행된다.

코드의 안정성을 위해서는 가급적 전역변수를 최소하는 것이 좋다.*/

첫번째 inner 함수 내에서 console.log(a)를 실행하면 inner context의 environmentRecord에 a는 있지만 아직 할당되기 전이므로 undefined를 출력하게 된다. (변수 선언을 let 혹은 const로 했을 경우에는 ReferenceError가 발생한다.)

🙉 함수 선언문과 함수 표현식

함수 선언문(function 정의부만 있고 별도의 변수로 할당하지 않은 구문)과 함수 표현식의 Hoisting은 차이가 있다.

함수 선언문은 함수 전체를 Hoisting 하지만 함수 표현식은 식별자의 정보만 Hoisting 된다는 점이다. 혹시 동일한 파일에 각기 다른 개발자가 동일한 변수명에 한 명은 선언문 형태로 한 명은 표현식 형태로 코드를 작성했을 경우, 나중에 작성된 코드가 앞의 코드를 덮어쓰게 된다. 따라서 Hoisting을 거친 후에 실제 실행되는 함수는 맨 마지막에 할당된 함수뿐이므로 예기치 못한 버그를 유발할 수도 있어 선언문 형태는 지양하는 것이 좋다.

// 함수 선언문
function a () {};

// 익명 함수 표현식
const a = function () {};

// 기명 함수 표현식
const a = function b () {};

출처-코어 자바스크립트

link717

Turtle Never stop

다음 포스트

[코어 자바스크립트] 실행 컨텍스트