스코프와 호이스팅 파헤치기

목차

1. 스코프 (Scope)

    1-1. 스코프란

    1-2. 렉시컬 스코프

    1-3. 스코프 체인

2. 호이스팅 (Hoisting)

3. JS엔진이 스코프와 호이스팅을 구현하는 방식

    3-1. 실행 컨텍스트 구조 간단하게 보기

    3-2. 실행 컨텍스트에서

    3-3. 메모리 구조에서

    3-4. 실행 컨텍스트 + 메모리 구조 함께 보기

 

 

1. 실행 컨텍스트 구조 간단하게

2. 실행 컨텍스트에서

3. 메모리 구조에서

4. 실행 컨텍스트 + 메모리 구조 함께 보기

---

1. 스코프 (Scope)

1. 스코프란

스코프는 변수나 매개변수에 접근할 수 있는 범위이다.

 

스코프 종류

• 전역 스코프 (global scope)
  함수 바깥/ 최상위에서 선언된 변수로, 어디서든 접근 가능하다.
  전역 오염 문제 발생 가능하다.
• 함수 스코프 (function scope)
  function 블록 내부에서 선언된 변수는 함수 내에서만 유효하다.
• 블록 스코프 (block scope)
  { }중괄호 블록 단위로 유효 범위를 제한한다.

 

2. 렉시컬 스코프

JS에서 스코프는 변수/함수를 어디에 작성하였는가에 기초하여 결정된다.

이러한 방식을 렉시컬 스코프라고 부른다.

function foo() {
  var a = 1;
  function bar(b) {
    console.log(a, b);
  }
  bar(2);
}

foo();	// 전역 스코프는 하위 스코프인 foo() 범위 내의 변수 a에 접근 불가

위 예시 코드에서 총 세 개의 스코프가 중첩되어 있다.

• 전역 스코프 : foo()
• foo() 함수 스코프 : var a, function bar(b), bar(2)
• bar() 함수 스코프 : console.log(a, b)

스코프는 이렇게 함수를 어디에서 작성했느냐에 따라 경계를 가진다.

 

3. 스코프 체인

• 변수를 찾을 때 현재 스코프 → 상위 스코프 → 전역 스코프 순으로 탐색
• JS는 렉시컬 스코프(Lexical Scope) → 함수 정의된 위치를 기준으로 스코프가 결정됨

---

2. 호이스팅 (Hoisting)

JS 엔진이 코드를 실행하기 전, 변수/함수의 선언을 스코프 내의 최상단으로 끌어올리는 동작의 개념이다.

console.log(a);	// undefined
var a = 1;

예시 코드에서 a가 선언되기 전에 a를 참조했으나, 에러가 아닌 undefined로 정상 실행된다.

 

선언문 var a = 1;이 전역 스코프 내에서 최상단으로 끌어올려졌기 때문에 참조가 가능한 것이다.

 

호이스팅은 세단계로 나누어진다.

1. 선언 : JS엔진이 스코프에 변수를 선언
2. 초기화 : 변수의 값을 undefined로 초기화
3. 할당 : 할당문을 만나면 변수에 실제값을 할당

 

이 때 var 변수는 1, 2단계를 한 번에 실행하기 때문에 선언 전에도 접근이 가능하다.

하지만 let, const 변수는 1,2단계가 분리되어 있어, 초기화 단계 전에 접근할 수 없다.

console.log(a);	// Uncaught ReferenceError: a is not defined
let a = 1;

 

변수 호이스팅	var	변수 선언 호이스팅과 동시에 undefined로 초기화	console.log(a);    // undefined var a = 1;
	let	선언만 호이스팅되고 TDZ에 들어가  선언 전 접근이 불가	console.log(a);    // a is not defined let a = 1;
	const		console.log(a);    // a is not defined const a = 1;
함수 호이스팅	함수 선언문 function foo() {...}	선언문 전체가 호이스팅되어 선언 전에도 호출이 가능	foo();  // 함수가 잘 동작함 function foo() { console.log('hello'); };
	함수 표현식 const foo = function() {...}	변수 호이스팅 규칙을 따름	foo();  // Uncaught TypeError: foo is not a function var foo = function() {...}; foo();  // Cannot access 'foo' before initialization let foo = function() {...};

 

** TDZ : Temporal Dead Zone의 약자로, 변수가 선언되기 전까지 접근할 수 없는 개념적 구간

 

 

---

2. JS엔진이 스코프와 호이스팅을 구현하는 방식

JS엔진이 스코프와 호이스팅을 어떻게 구현하는지 개념별로 나누어서 알아보자.

 

1. 실행 컨텍스트 구조 간단하게 보기

ECMAScript에서 실행 컨텍스트는 이런식으로 나뉜다.

Execution Context
 ├─ Lexical Environment
 │   ├─ Environment Record (변수/함수 실제 기록)
 │   └─ Outer Reference (상위 스코프 연결)
 └─ Variable Environment (var 전용, 호이스팅 관리)

 

실행 컨텍스트(EC)는 코드가 실행되는 환경을 의미하며, 크게 세 가지 정보를 담는다.

• Variable Environbment (변수 환경)
• Lexical Environment (렉시컬 환경)
• This 바인딩

개발자가 코드를 작성하고 실행하면 JS엔진은 실행 컨텍스트를 생성하는데,

이 때 변수를 실제로 담고 있는 객체인 환경 레코드가 실행 컨텍스트의 알맞은 범위에 포함된다.

 

환경 레코드는 식별자(indentifier) - 값(value) 매핑을 저장하는 내부 구조체로,

선언하는 변수와 함수, 매개변수 등의 이름과 값을 기억한다.

let a = 1;

1. 코드 (let a = 1;) 를 작성하고 실행

2. 실행 컨텍스트 생성

    2-1. 환경 레코드에 let a의 식별자와 값(1)이 매핑됨

    2-2. let a의 값 1은 Lexcial Environment의 Environment Record 영역에 기록됨

3. 실행 컨텍스트 실행

4. 코드를 한줄씩 읽으며 작업을 진행

 

 

2. 실행 컨텍스트에서

JS 엔진은 코드를 실행할 때 실행 컨텍스트라는 환경을 생성하는데, 실행 컨텍스트의 처리는 크게 2단계로 나뉜다.

• 생성 단계 (Creation Phase)
  
  • 스코프(환경 레코드)와 변수들이 먼저 설정됨 (호이스팅 발생 구간)
  • var 변수는 undefined로 초기화
  • let, const는 아직 초기화되지 않은 상태(선언만 된 상태)로, TDZ에 들어감
  • 함수 선언문은 함수 객체 전체가 메모리에 저장됨
• 실행 단계 (Execution Phase)
  • 코드가 한 줄씩 실행되며 변수에 실제 값이 할당됨
  • 함수가 호출되면 새로운 실행 컨텍스트가 만들어져 콜 스택에 들어감(push)

 

3. 메모리 구조에서

값을 메모리에 적절하게 할당하며 실행 컨텍스트를 처리한다.

브라우저의 JS엔진은 싱글 스레드가 콜 스택을 사용하여 실행 순서를 관리하는 식이다.

• 스택 메모리
  • 실행 컨텍스트(= 스코프 환경)를 저장하는 공간이 된다.
  • 함수 호출 시 실행 컨텍스트가 스택에 push되고, 종료 시 pop한다.
• 힙 메모리
  • 참조 타입(Object, Array, Function 등)을 저장하는 공간이다.
  • 실제 값들을 저장하여, [스택에 저장된 - 실행 컨텍스트 안의 - 변수]들은 힙의 주소를 가진다.
• 콜 스택
  • 실행 컨텍스트들을 관리하는 스택 자료구조이다.
  • 코드 실행 순서(호출과 종료)를 담당한다.

 

4. 실행 컨텍스트 + 메모리 구조 함께 보기

실제로 변수(var, let, const)와 함수를 선언했을 때 스코프가 어떻게 구성되고 호이스팅이 어떻게 일어나는지 과정을 살펴보자.

console.log(x);   // undefined (호이스팅으로 var 선언만 위로)
console.log(y);   // ReferenceError (TDZ 때문에)
console.log(z);   // ReferenceError (TDZ 때문에)
foo();
bar();

var x = 1;
let y = 2;
const z = 3;

function foo() {
  console.log(“foo 실행");
}

const bar = function() {
  console.log(“var 실행");
}

 

console.log로 변수를 출력하는 부분 + 함수 호출 부분을 뺀 아래 부분만 정리했다.

스택에 쌓이는 과정을 그리려면 코드 전체에 대해 그려야하기 때문에 스택 역시 제외했다.

 

 

🔥 JS 엔진이 코드를 실행하기 전 실행 컨텍스트를 생성하여 호이스팅이 발생한다.

🔥 스코프는 실행 컨텍스트의 환경 레코드로 관리한다.

 

 

 

참고

기초부터 완성까지, 프런트엔드