본문 바로가기
Programming & Platform/JavaScript

JavaScript 실행 컨텍스트와 Lexical Environment 소개, 생성 방법

by 코드스니펫 2023. 11. 10.
반응형

JavaScript 실행 컨텍스트와 Lexical Environment 소개, 생성 방법

 

javascript logo

 

JavaScript에서 실행 컨텍스트는 코드 실행 환경을 추상화하며, LexicalEnvironment(렉시컬 환경)는 그 중요한 구성 요소 중 하나입니다. LexicalEnvironment는 변수와 함수의 정보를 저장하고 스코프를 관리하는 역할을 합니다. 이 글에서는 LexicalEnvironment의 역할과 동작 원리를 예시 코드를 통해 자세히 알아보겠습니다.

 

 

LexicalEnvironment(렉시컬 환경)의 역할

 

Lexical Environment의 정의

Lexical Environment는 실행 컨텍스트에서 사용 가능한 변수, 함수, 매개변수 정보를 저장하는 객체입니다.

변수의 스코프(범위)와 호이스팅 동작을 관리하며, 스코프 체인을 형성합니다.

 

LexicalEnvironment의 구성 요소

  • Environment Record: 스코프 내의 변수와 함수 정보를 저장하는 곳입니다.
  • Outer Lexical Environment: 외부 스코프의 LexicalEnvironment를 참조하는 링크입니다.

 

예시 코드로 Lexical Environment

function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
  }
  inner();
}

outer();

 

Environment Record

  • inner 함수의 Environment Record에는 y 변수가 저장됩니다.
  • outer 함수의 Environment Record에는 x 변수와 inner 함수가 저장됩니다.

 

Outer Lexical Environment

  • inner 함수의 Outer Lexical Environment는 outer 함수의 LexicalEnvironment를 참조합니다.
  • 이를 통해 inner 함수에서 x 변수에 접근할 수 있습니다.

 

스코프 체인의 역할

 

스코프 체인의 정의

  • LexicalEnvironment는 스코프 체인을 형성합니다.
  • 스코프 체인을 통해 변수 및 함수가 현재 범위와 외부 범위에서 검색됩니다.

 

예시 코드로 스코프 체인 이해하기

function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
  }
  inner();
}

outer();

 

inner 함수에서 x 변수는 스코프 체인을 통해 outer 함수의 LexicalEnvironment에서 찾을 수 있습니다.

 

끝으로

 

JavaScript의 실행 컨텍스트와 그 중 LexicalEnvironment는 변수 및 함수의 스코프 및 유효 범위를 관리하며, 스코프 체인을 형성합니다. LexicalEnvironment를 통해 변수 및 함수에 접근하는 메커니즘을 이해하면, 코드의 스코프 동작을 파악하고 효과적으로 작성할 수 있습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

 

JavaScript event.target와 event.currentTarget 차이 쉽게 익히기

JavaScript event.target와 event.currentTarget 차이 쉽게 익히기 JavaScript에서 이벤트 처리 중 두 가지 주요 속성인 event.target과 event.currentTarget은 이벤트 핸들러에서 요소를 지정하고 식별하는 데 중요한 역

lemonlog.tistory.com

 

 

JavaScript에서 객체를 문자열로 변환하는 방법 소개

JavaScript에서 객체를 문자열로 변환하는 방법 소개 JavaScript에서 객체를 문자열로 변환하는 것은 데이터 저장 및 교환을 위해 중요한 작업입니다. 이 글에서는 객체를 문자열로 변환하는 두 가지

lemonlog.tistory.com

 

 

javascript 함수선언문과 함수표현식 소개, 특징, 차이점, 예시

javascript 함수선언문과 함수표현식 소개, 특징, 차이점, 예시 JavaScript는 함수를 정의하는 여러 가지 방법을 제공합니다. 그 중에서도 함수 선언문과 함수 표현식은 가장 흔히 사용되는 두 가지 방

lemonlog.tistory.com