[JavaScript 101] 자바스크립트 스코프

본 글은 '모던 자바스크립트 Deep Dive' 를 참고하여 작성된 글입니다.

 

 

함수 정의

 - 스코프는 식별자가 유효한 범위를 말한다.

 - 이름이 같은 변수 중에 어떤 변수를 참조해야 할지 결정하는 것을 식별자 결정 (identifier resolution)이라 한다.

 - 코드는 전역(global)과 지역(local)로 구분됨.

 - 스코프가 함수 중첨에 의해 계층적으로 연결된 것을 스코프 체인이라 한다.

 - 상위 스코프에서 유효한 변수를 하위 스코프에서는 자유롭게 참조할 수 있지만 그 반대는 안됨.

 

 

 

전역 변수

 - 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.

 - 호이스팅은 스코프를 단위로 동작한다.

 - var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

 - 변수의 스코프는 좁을수록 좋다.

 

 

 

함수 레벨 스코프

 - 대부분의 프로그래밍 언어는 모든 코드 블록(if, for while 등..)이 블록 레벨 스코프라는 지역 스코프를 만든다.

 - 하지만 var 키워드로 선언된 변수의 경우 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성되므로 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. (함수 레벨 스코프)

 - 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1;

if (true) {
	var x = 10;
}

console.log(x);	// 10

 - 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높이며, 의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다.

 

 

 

블록 레벨 스코프

 - 모든 코드 블록(함수, if, for 등..) 을 지역 스코프로 인정함

 let foo = 1;
 
 {
 	let foo = 2;
    let bar = 3;
 }
 
 console.log(foo);	// 1
 console.log(bar);	// ReferenceError: bar is not defined

 

 

 

let 키워드 

 - var 키워드의 경우 중복 선언시 에러가 발생하지 않았지만, let의 경우 Syntax Error가 발생한다.

 - let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

console.log(foo);	// ReferenceError: foo is not defined
let foo;

 - 이는 var 키워드의 경우 선언과 초기화 단계를 진행하는데,

// 선언 단계 + 초기화 단계 실행

console.log(foo);	// undefined

var foo;
console.log(foo);	// undefined

foo = 1;	// 할당 단계 실행
console.log(foo);	// 1

 - let 키워드는 선언 단계와 초기화 단계가 분리되어 진행되기 때문이다.

// 선언 단계 실행

console.log(foo);	// ReferenceError: foo is not defined

let foo;	// 초기화 단계 실행
console.log(foo);	// undefined

foo = 1;	// 할당 단계 실행
console.log(foo)	// 1

 - 아래 코드는 여전히 변수 호이스팅이 발생한다는 것을 보여주는 예제이다.

 - 호이스팅이 발생하지 않는다면 1 이 출력되어야 할 것이다.

let foo = 1;

{
	console.log(foo);	// ReferenceError: Cannot access 'foo' before initialization
	let foo = 2;
}

 

 

 

const 키워드

 - let와 대부분 비슷하지만 상수를 선언하는 부분이 다름

 - const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야한다.

const foo;	// SyntaxError: Missing initializer in const declaration

 - const로 선언한 변수는 재할당이 금지되며, 재할당을 시도할 경우 TypeError를 발생시킨다.

 - 그럼에도 const 키워드로 선언된 변수에 객체가 할당된 경우 값이 변경될 수 있다 (mutable 한 값이기 때문)

 - 하지만 이것은 재할당이 아니라 값이 변하는 것이다. (재할당은 여전히 불가능)