Ch3. 함수 vs 블록 스코프
자바스크립트의 변수와 함수는 특정 규칙에 따라 스코프에 포함된다.
스코프에는 크게 함수 기반 스코프와 블록 기반 스코프가 있다.
3.1 함수 기반 스코프
자바스크립트는 대부분 함수 기반 스코프를 따른다.
function foo(a) {
var b = 2;
function bar() {
// do something...
}
var c = 3;
}
→ 위 예시에서 변수 a, b, c, 함수 bar 모두 foo 함수의 스코프에 포함된다.
3.2 일반 스코프에 숨기
3.2.1 충돌 회피
function foo() {
function bar(a) {
i = 3;
console.log(a + i);
}
for (var i = 0; i < 10; i++) {
bar(i * 2);
}
}
foo();
- 전역에서 선언되지 않았지만
i = 3은 LHS 검색으로 글로벌에 생성됨 bar내부에서i를 전역으로 설정 → 의도치 않은 충돌 발생 가능
→ 글로벌 네임스페이스 오염을 피하려면 지역 스코프 활용이 중요하다
3.3 스코프 역할을 하는 함수
함수는 본래부터 스코프 단위로 사용 가능하다.
즉, 변수를 숨기거나 네임스페이스 충돌을 방지하기 위한 모듈화 단위로 활용된다.
→ IIFE(즉시 실행 함수) 패턴도 이 목적
(function(){
var hidden = "secret";
console.log(hidden);
})();
3.4 스코프 역할을 하는 블록
ES6부터는 let, const를 사용해 블록 스코프를 사용할 수 있다.
{
let a = 10;
const b = 20;
}
// 여기서 a, b는 접근 불가
→ if, for, while, try 등 모든 {} 블록에서 지역 변수 선언 가능
3.5 정리하기
- 자바스크립트는 기본적으로 함수 스코프를 사용
- ES6 이후
let/const도입으로 블록 스코프도 가능해짐 - 스코프를 통해 변수 충돌을 방지하고 코드를 모듈화할 수 있음