JavaScript 기초 <15. JavaScript의 실행 컨텍스트와 호이스팅>

자바스크립트 JavaScript

15. JavaScript의 실행 컨텍스트와 호이스팅 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

 

 

 

---

 

1. 주제 간단 정리

 

1. 실행 컨텍스트(Execution Context)란?

실행 컨텍스트는 **JavaScript 코드가 실행될 때 생성되는 환경(Execution Environment)**을 의미합니다.
즉, 변수와 함수가 실행되는 동안 어떤 방식으로 저장되고 관리되는지를 결정하는 개념입니다.

📌 실행 컨텍스트를 이해하면 JavaScript 코드의 실행 흐름을 명확히 파악할 수 있음!

---

 

2. 실행 컨텍스트의 생성 과정

JavaScript 코드가 실행될 때, 실행 컨텍스트는 3단계로 구성됩니다.

1. 생성(Create) – 실행 전에 변수와 함수 선언을 저장
2. 초기화(Initialize) – 변수에 undefined 할당 및 this 설정
3. 실행(Execute) – 코드 실행 및 값 변경

✅ 실행 컨텍스트 생성 과정 예제

console.log(a); // undefined (호이스팅 발생)
var a = 10;
console.log(a); // 10

📌 변수 a는 실행 전에 undefined로 초기화되고, 이후에 값이 할당됨!

---

 

3. 실행 컨텍스트의 구성 요소

실행 컨텍스트는 3가지 주요 요소로 이루어집니다.

요소설명

변수 환경 (Variable Environment)	var 선언 변수 저장, this 값 관리
렉시컬 환경 (Lexical Environment)	let, const 선언 변수 관리
this 바인딩 (This Binding)	this가 어떤 객체를 가리키는지 저장

✅ 실행 컨텍스트 구조 예제

function test() {
    var x = 10;
    let y = 20;
    console.log(x + y);
}

test();

📌 변수 환경에는 x, 렉시컬 환경에는 y가 저장됨!

---

✅ 여기까지 실행 컨텍스트의 개념과 생성 과정을 배웠습니다!
👉 "그렇다면, 실행 컨텍스트와 밀접한 관계가 있는 '호이스팅(Hoisting)'이란 무엇일까?"
✅ 2부에서 호이스팅의 원리와 var, let, const의 차이를 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 호이스팅(Hoisting)이란?

호이스팅(Hoisting)이란 변수와 함수 선언이 코드 실행 전에 메모리 상단으로 끌어올려지는 현상입니다.

✅ 호이스팅 예제

console.log(name); // undefined
var name = "Alice";
console.log(name); // "Alice"

📌 변수 name이 실행 전에 메모리에 등록되었지만, 초기 값이 undefined로 설정됨!

---

 

2. var, let, const의 호이스팅 차이

✅ 1) var의 호이스팅 특징

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

📌 var 변수는 호이스팅되지만, undefined로 초기화됨!

✅ 2) let과 const의 호이스팅 특징

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

📌 let과 const도 호이스팅되지만, TDZ(Temporal Dead Zone)로 인해 오류가 발생함!

---

 

3. 함수 선언과 표현식의 호이스팅 차이

✅ 1) 함수 선언식(Function Declaration)

hello(); // "안녕하세요!"

function hello() {
    console.log("안녕하세요!");
}

📌 함수 선언식은 호이스팅되며, 호출 전에 사용할 수 있음!

✅ 2) 함수 표현식(Function Expression)

greet(); // TypeError: greet is not a function

const greet = function() {
    console.log("반갑습니다!");
};

📌 함수 표현식은 변수에 할당되기 전에 호출할 수 없음!

---

 

✅ 지금까지 실행 컨텍스트와 호이스팅을 상세히 배웠습니다!
👉 "그렇다면, JavaScript의 클래스(Class)와 생성자 함수는 어떻게 동작할까?"
✅ 다음 회차에서 클래스와 생성자 함수의 차이를 배워봅시다! 🚀