JavaScript에서 스코프 이해하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보자 및 중급자 개발자
- JavaScript의 스코프 개념을 이해하고자 하는 프론트엔드 개발자
- 난이도: 기초 개념 설명 (변수 범위,
var
/let
/const
차이점 등)
핵심 요약
- 전역 스코프(Global Scope):
var
로 선언된 변수는 전역에서 접근 가능하며, 전역 오염(Global Pollution) 위험 존재 - 함수 스코프(Function Scope): 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 가능 (
var
사용 시) - 블록 스코프(Block Scope):
let
/const
로 선언된 변수는{}
블록 내에서만 유효 (ES6+ 기준)
섹션별 세부 요약
1. 전역 스코프(Global Scope)
- 전역 스코프는 브라우저 환경에서 최상위 레벨에 선언된 변수/함수를 의미
var
로 선언된 변수는 전역 객체(window
객체)에 자동 추가되어 전역에서 접근 가능- 예:
var globalVar = 10;
→console.log(window.globalVar)
로 접근 가능
2. 함수 스코프(Function Scope)
- 함수 내부에서
var
로 선언된 변수는 해당 함수 내부에서만 유효 - 외부에서 접근 불가능하며, 중첩 함수 간 스코프 허용 (closure 생성 가능)
- 예:
function example() {
var funcVar = 20;
console.log(funcVar); // 20 출력
}
console.log(funcVar); // ReferenceError 발생
3. 블록 스코프(Block Scope)
let
/const
로 선언된 변수는{}
블록 내부에서만 유효if
,for
,while
등의 블록 내에서 선언 시 해당 범위에서만 접근 가능- 예:
if (true) {
let blockVar = 30;
console.log(blockVar); // 30 출력
}
console.log(blockVar); // ReferenceError 발생
결론
- 실무 팁:
let
/const
를 사용해 블록 스코프를 활용하면 전역 오염 방지 가능 - 코드 예시:
function createCounter() {
let count = 0;
return function() {
return count++;
};
}
const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1