[JavaScript] 실행 컨텍스트 이해하기

힛짱·2023년 2월 6일
0

JavaScript

목록 보기
3/3
post-thumbnail

자바스크립트 동작 원리의 핵심 기능인 실행 컨텍스트를 이해해보자! 바르게 이해하면 호이스팅, 클로저, 비동기 처리의 동작 방식,..등 중요 개념들을 이해하기 수월할 것이다.


🤔 실행 컨텍스트란?


실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

-모던 자바스크립트 Deep Dive_실행 컨텍스트

즉, 실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 말 그대로 모든 코드는 실행 컨텍스트가 바탕이 되기 때문에 매우매우매우 중요한 개념이다!


🔨 실행 컨텍스트는 어떻게 생성될까?


  • 전역 코드
  • 함수 코드
  • eval 코드
  • 모듈 코드

실행 컨텍스트를 생성하는 소스코드는 4가지 타입으로 나뉜다. 4가지 타입으로 구분하는 이유는 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. 각 코드가 평가되면 실행 컨텍스트가 생성된다.

소스코드의 평가와 실행

자바스크립트 엔진은 소스코드를 실행하기 위한 준비를 하는데, 소스코드의 평가소스코드의 실행 2가지 과정으로 나누어 처리한다.
모든 소스코드는 실행되기 전(런타임 전), 소스코드 평가 과정을 거치며 코드를 실행하기 위한 환경을 만든다. 실행 컨텍스트를 생성하고 변수, 함수 식별자를 실행 컨텍스트가 관리하는 스코프(렉시컬 환경)에 등록한다.
평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다. 그때 필요한 변수나 함수의 참조는 식별자를 저장해두었던 스코프에서 검색하여 찾는다. 그리고 소스코드의 실행 결과는 다시 스코프에 등록된다.

정말 간단하게 설명한 소스코드의 평가와 실행 과정인데, 깊숙하게 들어가면 조금 어렵지만 이해하고 나면 '와! 그래서 호이스팅과 클로저가 이렇게 저렇게 일어나는군!' 하면서 깨닫게 된다!
포기하지 말고 차근차근 알아보도록 하자!!!


예시 코드로 흐름 알아보기

// 전역 변수 선언
const heesu = '개발자'
var level = 10;

// 함수 정의
function levelUp(booster) {
  const heesu = '희수';
  var level = 20;
  
  console.log(heesu, level + booster); // 희수 120
}

// 함수 호출
levelUp(100);

console.log(heesu, level); // 개발자 10

위 코드의 평가와 실행 과정을 알아보도록 하자!

1. 전역 코드 평가

전역 코드를 실행하기 전에 평가 과정을 거친다. 먼저 선언문 const heesu, var level, function levelUp 를 실행하고 생성된 식별자들은 실행 컨텍스트가 관리하는 전역 스코프에 등록된다. 이때 var 키워드와 const 키워드로 선언된 식별자는 각각 다른 곳에 저장 되는데 이건 뒤에서 자세히 알아보겠다.
중요한 것은, var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다. 즉, 전역 객체인 window 객체의 프로퍼티로서 접근할 수 있다.

var heesu = '개발자';

heesu === window.heesu; // true
window.heesu; // '개발자'

2. 전역 코드 실행

전역 코드 평가 과정이 끝나면 코드를 실행하게 되는데 이 타이밍이 바로 런타임이 시작되는 타이밍이다. 전역 코드는 순차적으로 실행되고, 전역 스코프에 등록 되어있는 변수에 값이 할당된다. 그러다가 함수 호출문levelUp(100)을 만나면 진행하고 있던 코드의 실행을 멈추고 호출한 levelUp함수 내부로 실행 순서가 변경된다. levelUp함수를 실행하기 위해 전역 코드 평가 과정과 같은 함수 코드 평가 과정을 하게 된다.

3. 함수 코드 평가

levelUp함수 안으로 들어왔다. 이제 함수를 실행하기 위한 준비를 또 해보자! 먼저 매개변수와 지역 변수 선언문이 먼저 실행되고, 그 결과 생성된 매개변수와 지역 변수는 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. 이때 this바인딩도 결정이 된다. 이것은 뒤에서!

4. 함수 코드 실행

함수 코드 평가 과정이 끝나면 다시 런타임이 시작되고 코드가 순차적으로 실행된다. 스코프에 등록되어 있는 매개변수와 지역 변수에 값이 할당되고 console.log 메서드가 호출된다.
그러기 위해선 식별자인 console을 검색해야 하는데, 이 메서드는 전역 객체의 프로퍼티로 존재한다. 그 의미는 전역 객체의 프로퍼티가 전역 변수처럼 전역 스코프를 통해 검색이 가능하다는 의미이다. log 프로퍼티는 프로토타입 체인을 통해 검색한다. console.log 메서드에 인수로 전달된 표현식 heesu, level, booster는 스코프 체인을 통해 검색하고 console.log 메서드의 실행이 종료된다. 이렇게 함수 실행 과정이 종료되면 함수 호출 전으로 돌아가 전역 코드 실행을 계속한다.

위와 같이 코드가 실행되려면 각각의 스코프가 생성되고 식별자와 바인딩값이 관리되어야 한다. 또한 스코프 체인을 통해 식별자를 검색하고, 전역 객체의 프로퍼티도 전역 변수처럼 검색할 수 있어야 한다. 함수 호출이 종료되면 호출 이전으로 돌아가기 위해 현재 실행 중인 코드와 이전에 실행하던 코드를 구분하여 관리해야 한다. 이 모든 것을 관리하는 것이 바로 실행 컨텍스트다.

다시 한번 실행 컨텍스트를 정의해보자.

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

이제 아주 조금은 이해할 수 있다. 그러면 이제 식별자와 스코프를 관리하는 렉시컬 환경과 코드 실행 순서를 관리하는 실행 컨텍스트 스택을 자세히 알아보자.


📚 실행 컨텍스트 스택



📦 렉시컬 환경



🤓 레알 딥다이브 해보자


이제 그림을 동반한 딥다이브를 해보자!!!!!!!!


참고 : 실행 컨텍스트 | 모던 자바스크립트 Deep Dive

profile
프론트엔드 개발자 장희수입니다😉

0개의 댓글