Scope, Hoisting, 그리고 Closures를 전문가처럼 이해하기!
Source: Dev.to
스코프란 무엇인가?
Scope defines the accessibility of variables in your code.
Scope decides where in your code a variable can be used.
In JavaScript, every variable has a “boundary.” Outside this boundary, the variable is unavailable.
스코프가 중요한 이유?
- 변수 충돌 방지
- 메모리를 효율적으로 관리
- 코드를 예측 가능하게 만들기
스코프의 주요 유형
- 전역 스코프 – 어디서든 접근 가능
- 함수 스코프 – 함수 내부에서만 접근 가능
- 블록 스코프 –
{}내부에서 접근 가능 (usingletorconst) - 렉시컬 스코프 – 코드의 작성 구조에 의해 결정
스코프 예시
let person = [1,2,3,4,5]; // global scope
function total(num1, num2) {
const result = num1 + num2; // function scope
if (true) {
var result1 = num1 * num2; // function scope (var)
}
console.log(result1); // accessible
console.log(person); // global access
}
total(10, 20);
console.log(result); // ❌ Error, function scope핵심 정리
result는 함수 외부에서 접근할 수 없습니다.result1은var가 함수 스코프이기 때문에 함수 내부에서 접근 가능합니다.
Source:
호이스팅이란?
호이스팅은 변수와 함수 선언이 실행 단계 시작 시 메모리로 이동되는 JavaScript의 동작 방식입니다.
다시 말해
코드가 실행되기 전에, JS는 선언된 모든 변수와 함수에 대한 메모리를 준비합니다.
중요한 포인트
var→ 호이스팅되고undefined로 초기화됨let/const→ 호이스팅되지만 초기화되지 않음 (Temporal Dead Zone에 머무름)- 함수 선언 → 완전히 호이스팅됨
흔한 오해
호이스팅은 코드를 실제로 위로 이동시키는 것이 아니라, 메모리를 미리 준비하는 과정입니다.
호이스팅 예시
console.log(a); // undefined
var a = 10;내부적으로 JavaScript는 다음과 같이 해석합니다:
var a;
console.log(a); // undefined
a = 10;let 또는 const 사용 시
console.log(b); // ❌ ReferenceError
let b = 10;이 오류는 let/const가 호이스팅되지만 초기화되지 않아 Temporal Dead Zone(TDZ)이 발생하기 때문에 발생합니다.
클로저란 무엇인가?
클로저는 외부 함수가 실행을 마친 후에도 함수가 외부 스코프의 변수를 “기억”하는 경우를 말합니다.
간단히:
function + 그 주변 환경 = 클로저
클로저가 유용한 이유
- 프라이빗 데이터 유지
- 함수 호출 사이에 상태 유지
- 실제 JavaScript에서 널리 사용 (이벤트 핸들러, React 훅 등)
클로저 예시
function total() {
let counter = 0;
return function() {
counter++;
console.log(counter);
};
}
// Usage:
const result1 = total();
result1(); // 1
result1(); // 2
const result2 = total();
result2(); // 1
result1(); // 3핵심 포인트
counter는 전역 변수가 아닙니다.- 내부 함수가 그 값을 기억합니다.
total()을 호출할 때마다 새로운 메모리 인스턴스가 생성됩니다.
렉시컬 스코프 (클로저의 핵심)
function outer() {
let a = 10;
return function inner() {
console.log(a);
};
}내부 함수는 외부 함수 안에서 선언되었기 때문에 변수 a에 접근할 수 있습니다. 이것이 렉시컬 스코프이며, 클로저가 동작하도록 합니다.
이러한 개념들의 연결 방식
- Scope → 변수가 존재하는 위치를 정의합니다.
- Lexical Scope → 작성된 코드에 따라 함수가 접근할 수 있는 변수를 정의합니다.
- Closure → 함수가 외부 스코프의 변수를 “기억”하도록 합니다.
이 세 가지는 JavaScript에서 함께 작동합니다!
요약
- Scope → 변수의 범위.
- Hoisting → 실행 전에 메모리 준비.
- Lexical Scope → 코드 구조에 따라 접근을 결정.
- Closure → 함수가 외부 데이터를 기억함.
최종 생각
JavaScript에서 많은 예상치 못한 동작은 이러한 개념들이 명확하지 않기 때문에 발생합니다.
스코프, 호이스팅, 렉시컬 스코프, 그리고 클로저를 이해하면 JavaScript는 예측 가능해지고 훨씬 다루기 쉬워집니다.
Tags: #webdevelopment #frontend #closure #hoisting #scope #lexicalscope #learntocode