실행 컨텍스트는 두 가지 주요 구성 요소인 Lexical Environment와 Variable Environment로 이루어져 있다.
- VariableEnvironment 에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행 시의 스냅샷을 유지한다는 점이 다르다.
- 실행 컨텍스트를 처음 생성할 때 VariableEnvironment에 정보를 먼저 담고, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다.
- 내부는 environmentRecord와 outer-EnvironmentReference로 구성되어있다.
호이스팅
- 변수와 함수 선언이 코드 실행 전에 메모리 공간에 할당되는 현상
- 변수 선언의 경우, var 키워드로 선언된 변수는 undefined로 초기화되지만, let과 const 키워드로 선언된 변수는 초기화되지 않는다.
- 함수 선언의 경우, 함수 전체가 메모리에 할당되지만, 함수 표현식은 호이스팅되지 않는다.
function a (x) {
console.log(x); //------------ (1)
var x;
console.log(x); //------------ (2)
var x = 2;
console.log(x); //------------ (3)
}
a(1)
1
undefined
2
를 예상했지만?
실제 결과는?
1
1
2
function a (x) {
var x; // 수집 대상 1의 변수 선언 부분
var x; // 수집 대상 2의 변수 선언 부분
var x; // 수집 대상 3의 변수 선언 부분
x = 1; // 수집 대상 1의 할당 부분
console.log(x); //------------ (1)
console.log(x); //------------ (2)
x = 2; // 수집 대상 2의 할당 부분
console.log(x); //------------ (3)
}
a(1)
호이스팅을 할 때 변수는 선언부와 할당부를 나누어 ‘선언부'만 끌어올린다!!
함수선언문
함수표현식
기명 함수표현식: 함수명 정의한 것
익명 함수표현식: 함수명 정의 안 한 것
함수 선언문
console.log(a()); // Output: "Hello, world!"
function a() {
return "Hello, world!";
}
함수 표현식
console.log(a()); // TypeError: a is not a function
var a = function() {
return "Hello, world!";
};
전역 스코프(Global Scope)
전역 스코프는 피하는 것이 좋다. 변수 충돌, 메모리 누수 등의 문제가 발생할 수 있다.
var globalVar = 'Hello, global!';
function globalFunc() {
console.log(globalVar); // 'Hello, global!'
}
globalFunc();
지역 스코프(Local Scope)
지역 스코프를 사용하면 변수 충돌을 방지하고 메모리 관리를 효율적으로 할 수 있다.
function localFunc() {
var localVar = 'Hello, local!';
console.log(localVar); // 'Hello, local!'
}
localFunc();
console.log(localVar); // ReferenceError: localVar is not defined
렉시컬 스코프(Lexical Scope)
var x = 5;
function outer() {
var x = 10;
function inner() {
console.log(x); // 10
}
inner();
}
outer();
console.log(x); // 5
inner() 함수는 outer() 함수 내부에 정의되어 있기 때문에, inner() 함수 내부의 x는 outer() 함수의 지역 변수 x를 참조한다.
var x = 5; // 전역 스코프
function outer() {
var x = 10; // outer 함수 스코프
function inner() {
console.log(x); // 10 (outer 함수 스코프의 x)
}
inner();
}
outer();
console.log(x); // 5 (전역 스코프의 x)
스코프 체인은 변수와 함수를 찾는 과정에서 스코프가 중첩되어 계층적으로 구성된 구조다. 자바스크립트 엔진은 코드를 실행하기 전에 스코프 체인을 구성하며, 변수와 함수를 찾을 때 스코프 체인을 따라 올라가며 검색한다.
의도치 않은 변수 값 변경을 방지하고 효율적인 메모리 관리를 할 수 있다. 또한 렉시컬 스코프 규칙에 따라 함수가 선언될 때의 환경을 기반으로 변수와 함수를 찾는 방식을 사용한다.