모던 자바스크립트 - let, const 키워드와 블록 레벨 스코프

변수 선언 방법에는 크게 3가지가 존재한다

1. var 

• 변수 중복 선언 허용

var x = 1;

// 중복 선언이 가능하다.
var x = 100;

 

변수를 중복 선언하면 var키워드가 없는 것처럼 행동하는데 만약 초기화문이 없다면 (var x;) 무시한다. 에러가 발생하지 않는다. -> 의도치 않은 변경을 만들어낼 수 있어서 좋지 않음.

• 함수 레벨 스코프

var 키워드로 선언한 변수는 함수 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 var키워드로 선언한 변수는 코드 블록 내에서 선언해도 전역변수 취급해버린다. 지역변수를 쓰려면 외부에서 선언되어 있으면 안된다는 말이다.

 

var x = 1;

// 함수가 아닌 단순 코드블록 내에서는 지역변수 취급을 안한다.
if (true) {
	var x = 10;
}

console.log(x); // 10

• 변수 호이스팅

변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 이에 따라 변수 선언문 이전에 변수를 참조하는 것이 가능하다. 다만 할당문 이전에 변수를 참조하면 언제나 undefined(초기값)를 반환한다.

console.log(foo); // undefined

foo = 123;

console.log(foo); // 123

// 선언문 아래에 있어도 상관없다.
var foo;

 

변수 호이스팅은 가독성을 떨어뜨려서 좋지 못하다.

 

2. let

ES6에서 var 키워드의 단점을 보완하기 위해 등장한 키워드다.

• 변수 중복 선언 금지

let은 var와는 다르게 변수 중복 선언하면 syntax error가 발생한다.

• 블록 레벨 스코프

let은 var와 다르게 코드 블록도 지역 스코프로 인정한다.

 

let foo = 1;

{
	let foo = 2;
}

console.log(foo); // 1

• 변수 호이스팅

let은 var와는 다르게 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 선언은 암묵적으로 자바스크립트 엔진에 의해 실행되지만 초기화가 되지 않아 참조가 불가능하다. 따라서 초기화 전에 변수에 접근하면 참조 에러가 발생한다. 이처럼 스코프의 시작지점부터 초기화 시작 시점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 한다. 변수 호이스팅은 발생하지만 발생하지 않는 것처럼 보인다.

 

console.log(foo) // 일시적 사각지대 에러

let foo //undefined로 초기화 된다. 이제부터는 에러가 나지 않는다.

console.log(foo); // undefined

• 전역 객체와 let

var 전역변수는 전역객체 window의 프로퍼티가 된다. 이는 전역함수도 마찬가지다.

var x = 1;

console.log(window.x); // 1

 

let 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아니다.

 

3. const

상수를 선언하기 위해 사용한다. let과 거의 동일한데 차이점이 있다

• 선언과 초기화

const 변수는 반드시 선언과 동시에 초기화해야한다. 안그러면 syntax error 가 발생한다. let처럼 블록 레벨 스코프이고 변수 호이스팅이 발생하지 않는 것처럼 보인다.

• 재할당 금지

const는 재할당이 금지된다. 따라서 변하지 않는 값에 대해서 상수를 사용하면 가독성도 좋아지고 유지보수성도 높아진다.

상수는 일반적으로 대문자로 선언한다. (TAX_SCORE)

• const 키워드와 객체

const에 원시값을 할당하면 변경할 수 없지만 객체를 할당하면 값을 변경할 수 있다. 즉, const는 재할당을 금지할 뿐 불변을 의미하지 않는다.

 

const person = {
	name: 'wonjae'
};

person.name = 'gyuri' //변경가능

 

 

안정성 측면에서 기본적으로 const를 중심으로 사용하지만 재할당이 필요한 경우에 한해서 let을 사용하는 것이 좋다. var는 ES6를 사용한다면 사용하지 않는 것이 좋다.