클로저는 함수가 외부 함수의 변수에 접근할 수 있는 특성을 가집니다. 이는 함수가 실행된 후에도 외부 함수의 변수에 접근할 수 있게 해주며, 외부 함수가 종료된 후에도 그 변수들에 대한 참조를 유지합니다.
함수가 실행될때, 그 함수 내부에서 변수를 참조하면 클로저가 형성됩니다.
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 |