Chrome Pointer

Javascript

Closure, Lexical Environment, Execution Context

Frontend Diary 2025. 2. 15. 12:40

클로저는 함수가 외부 함수의 변수에 접근할 수 있는 특성을 가집니다. 이는 함수가 실행된 후에도 외부 함수의 변수에 접근할 수 있게 해주며, 외부 함수가 종료된 후에도 그 변수들에 대한 참조를 유지합니다.

함수가 실행될때, 그 함수 내부에서 변수를 참조하면 클로저가 형성됩니다. 
 

Closure의 특징

  • 산태 유지: 외부 함수의 변수에 계속 접근 할 수 있습니다. 
  • 은닉화: 함수 내에서만 변수에 접근할 수 있기 때문에 외부에서 변수를 수정하지 못하도록 할 수 있습니다.
  • 메모리 사용 - 클로저가 존재하면 외부 변수들이 메모리에 계속 유지 될 수있습니다.
function outer() {
  let outerVar = 'I am from outer function';

  function inner() {
    console.log(outerVar); // inner()는 outer()의 변수에 접근할 수 있습니다.
  }

  return inner; // inner 함수는 outer 함수의 변수에 접근할 수 있는 클로저를 형성합니다.
}

const closureFunc = outer(); // outer 함수가 호출되면 inner 함수가 반환됩니다.
closureFunc(); // "I am from outer function" 출력

 

  • inner() 함수는 outer() 함수 안에 정의되어 있습니다. inner() 함수는 outer() 함수의 변수인 outerVar에 접근할 수 있습니다.
  • outer() 함수가 종료된 후에도 inner() 함수는 여전히 outerVar에 접근할 수 있는 상태로 존재합니다. 이렇게 클로저가 형성된 것입니다.

 

 
Execution Context (실행 컨텍스트)

로실행 컨텍스트는 현재 실행중인 코드, 변수, this 등을 포함하는 객채입니다.
 
클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경의 결합입니다. 함수가 외부 변수에 접근할 수 있는 특성을 가집니다.
 
실행 컨텍스트는 코드 실행을 위한 환경으로, 함수나 코드 블록이 실행 될때 생성되며, 현재 실행 중인 코드와 관련된 변수, this, 스코프 체인 등을 포함합니다. 

function example() {
  let x = 10;
  console.log(x);
}

example();

 

  • example() 함수가 호출되면 실행 컨텍스트가 생성됩니다. 이 실행 컨텍스트에는 현재 실행 중인 코드(console.log(x)), 변수 x, 그리고 this 값 등이 포함됩니다.
  • 함수가 실행될 때마다 새로운 실행 컨텍스트가 생성되며, 실행이 끝나면 해당 컨텍스트는 종료됩니다.

 
 

 
Lexical Environment

렉시컬 환경은 변수와 함수가 선언된 환경을 의미합니다. 이는 코드가 실행될 때 어떤 변수에 접근할 수 있는지를 결정합니다. 즉, 변수의 접근 여부는 코드가 선언된 위치에 따라 결정됩니다.

function outer() {
  let outerVar = 'I am from outer function';

  function inner() {
    console.log(outerVar); // inner 함수가 outerVar를 참조할 수 있습니다.
  }

  inner();
}

outer();

 

  • inner() 함수는 outer() 함수 내에서 선언되었습니다. 그래서 inner()는 outer() 함수의 렉시컬 환경을 기억합니다.
  • inner() 함수는 outer() 함수의 변수를 참조할 수 있는데, 이를 렉시컬 환경 덕분에 가능하게 됩니다.
  • outer()가 실행될 때 inner()는 outer()의 렉시컬 환경을 참조하여 outerVar에 접근합니다.

 
 

 
클로저, 실행 컨텍스트, 렉시컬 환경의 관계

  • 클로저렉시컬 환경(변수가 선언된 위치)에 의해 만들어지고, 이 렉시컬 환경이 포함된 실행 컨텍스트 내에서 변수를 참조할 수 있게 됩니다.
  • 클로저가 형성되면 해당 렉시컬 환경에 포함된 변수들은 계속 메모리에 남아있게 되고, 이 변수들을 클로저를 통해 접근할 수 있습니다.

 

'Javascript' 카테고리의 다른 글

이벤트 버블링, 캡처링, 위임  (0) 2025.02.13
Callback hell, sync and async function  (0) 2025.01.17
CSR vs SSR  (1) 2025.01.17
this, call, apply, bind  (1) 2025.01.15
Data Type  (0) 2025.01.15