JS) Part 3. Scope와 실행 구조

Об этом предложении

1. Scope란? Scope는 변수에 접근할 수 있는 범위 다. const a = 10; function test() { const b = 20; console.log(a); // 가능 console.log(b); // 가능 } console.log(b); // 불가능 JS에는 크게 다음 범위가 있다. Global Scope Function Scope Block Scope 2. Block Scope let , const 는 {} 단위로 범위가 나뉜다. if (true) { const a = 10; } console.log(a); // Error 반면 var 는 block scope가 아니라 function scope 를 따른다. if (true) { var a = 10; } console.log(a); // 10 이것도 var 를 잘 쓰지 않는 이유 중 하나다. 3. Scope Chain 현재 범위에 변수가 없으면 바깥 범위로 올라가며 찾는다. const a = 10; function outer() { const b = 20; function inner() { console.log(a); console.log(b); } inner(); } inner() 는 자신의 scope → outer → global 순서로 변수를 찾는다. 이 구조를 Scope Chain 이라고 한다. 4. Lexical Scope JS는 함수가 어디에서 호출됐는지가 아니라, 어디에서 선언됐는지 를 기준으로 바깥 scope를 결정한다. const x = 10; function test() { console.log(x); } function run() { const x = 20; test(); } run(); // 10 test() 가 run() 안에서 호출됐지만, 선언된 위치가 global이므로 x = 10 을 본다. 이걸 Lexical Scope 라고 한다. 5. Execution Context JS는 코드를 실행할 때 Execution Context(실행 컨텍스트) 를 만든다. 쉽게 말하면: 현재 실행 중인 코드의 변수, 함수, scope 정보를 관리하는 실행 환경 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성된다. function a() { b(); } function b() { console.log("hello"); } a(); 개념적으로: Global Execution Context ↓ a() Execution Context ↓ b() Execution Context 가 만들어진다. 6. Call Stack Execution Context는 Call Stack 에 쌓인다. function first() { second(); } function second() { console.log("hello"); } first(); 실행 흐름: Global ↓ first() ↓ second() ↓ second 종료 ↓ first 종료 Stack이기 때문에 LIFO(Last In First Out) 구조다. 이 Call Stack 개념은 나중에 싱글 스레드와 Event Loop 를 이해할 때 핵심이 된다. 핵심 정리 Scope → 변수에 접근할 수 있는 범위 let / const → block scope var → function scope Scope Chain → 변수를 현재 scope부터 바깥으로 찾아감 Lexical Scope → 함수가 선언된 위치 기준으로 scope 결정 Execution Context → 현재 실행 중인 코드의 환경 정보 Call Stack → 실행 컨텍스트가 쌓이는 구조 → LIFO

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.4

Уверенность

49%