자바스크립트에서의 코드 평가와 실행, 스코프, 호이스팅에 대해 설명하기.
키워드: 코드 평가와 실행, (전역, 지역, 렉시컬), 스코프 체인, 호이스팅, TDZ
자바스크립트의 코드 평가와 실행
- 코드 평가
자바스크립트 엔진은 실행하기 전에 한 번 코드를 평가해서 메모리를 할당하고, 실행 컨텍스트를 생성한다.
이 평가 단계에서 변수/함수 선언이 메모리에 등록됌.
var 변수 : 메모리에 undefined로 등록(호이스팅됨)
let, const 변수 : 메모리에 등록 (초기화 안 됨) 즉 TDZ 상태임
함수 선언 : 완전히 메모리에 등록 (함수 전체 코드 등록됨, 호출 가능)
- 코드 실행
코드가 한 줄 씩 실행되는 단계.
변수 선언문을 만나면 var는 undefined → 값이 할당되고, let/const는 선언과 동시에 값을 할당함(초기화)
함수 호출은 이 시점에서 실행된다.
결론은 이제 진짜 코드 흐름대로 동작이 시작됌!
스코프
변수에 접근 가능한 범위다.
참조 대상 식별자를 찾아내기 위한 규칙.
식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 가진다.
- 전역 스코프
코드 어디서나 접근 가능하다.
브라우저 : window, Node.js : global
var globalVar = 'global';
console.log(golbalVar); // 'global'- 지역 스코프
함수/블록 내부
var는 함수 스코프, let, const는 블록 스코프
function func() {
let localVar = 'local';
console.log(localVar);
}
func();
// console.log(localVar); // ❌ ReferenceError- 렉시컬 스코프
중요함! 호이스팅의 개념과 연결됨.
선언된 위치가 기준이 됨.
함수가 선언된 위치에 따라 상위 스코프가 결정됨
실행 시점에 상관없이 선언 위치로 스코프가 결정됨
function outer() {
let x = 'outer';
function inner() {
console.log(x); // 'outer'
}
return inner;
}
const fn = outer();
fn(); // 'outer'- 스코프 체인
현재 스코프 → 상위 스코프를 타고 변수 탐색함.
못 찾으면 최상위 전역 스코프까지 탐색
function scopeChainExample() {
let a = 10;
function innerFunction() {
let b = 20;
console.log(a); // 스코프 체인을 통해 outerFunction의 스코프에 접근
}
innerFunction();
}
scopeChainExample();호이스팅
인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 가져오기의 선언을 범위의 맨 위로 옮기는 프로세스를 말한다.
이해하기 쉽게 설명
함수가 실행되기 전에 안에 있는 변수들을 범위의 최 상단으로 끌어 올리는 것, 변수는 선언만 호이스팅 되고, 초기화는 실행 단계에서
자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트 어딘가에 미리 기록함!(환경 레코드)
변수 호이스팅
var : 호이스팅 O, 초기화는 undefined, TDZ X(바로 접근 OK)
let/const : 호이스팅, 초기화는 X, TDZ(접근 시 에러)
console.log(a); // undefined
var a = 1;
console.log(b); // ReferenceError (TDZ)
let b = 2;함수 호이스팅
함수 선언식은 전체 함수가 메모리에 올라가서 어디서든 호출 가능
함수 표현식 : const/let/var에 함수 할당은 변수 처럼 취급 → 변수 호이스팅에 영향을 받느다.
함수 선언은 코드 실행 전에 완전히 메모리에 로드
hoisted(); // 정상 작동
function hoisted() {
console.log('hoisted!');
}
notHoisted(); // ReferenceError
const notHoisted = function () {
console.log('no!');
};TDZ
let, const로 선언된 변수가 초기화 이전에는 접근 불가함.
평가 단계에서 메모리에 등록은 안되지만 초기화 전까지 차단됨.
이게 존재하는 이유는 초기화 전에 사용하지 못하게 해서 예상치 못한 버그를 방지하기 위해서이다.
{
console.log(x); // ❌ ReferenceError
let x = 5;
}최종 정리
자바스크립트 코드 실행 순서는 평가와 실행 단계로 나뉨. 평가 단계에서 변수와 함수가 메모리에 등록되고, 실행 단계에서는 코드가 한 줄 씩 실행됨.
let, const는 호이스팅되지만 TDZ로 인해서 초기화 전에는 접근 불가라 안전하게 변수 선언을 강제한다.
함수 선언은 자체가 호이스팅되지만, 함수 표현식은 변수 취급되어 차이가 있다.
스코프는 렉시컬 스코프라 함수가 선언된 위치가 중요하고, 클로저도 이 원리를 기반으로 한다.
