[JS] let, const, block level scope

var

ES5까지 변수를 선언할 때 쓰인 키워드. var 키워드로 선언된 변수는 다음과 같은 특징 / 문제점이 존재한다.

// 1) 변수 중복 선언 허용
var x = 1;
var x = 100;
console.log(x);  // 100

// 2) 함수 레벨 스코프 (함수의 코드 블록만을 지역 스코프로 인정하므로, 그 외에는 모두 전역 변수가 된다.)
var x = 1;
if (true) {
  var x = 10;  // x는 전역 변수이며, 중복 선언됨
}
console.log(x);  // 10

var i = 10;
for (var i = 0; i < 5; i++) {  // for문에서 선언한 i는 전역 변수
  console.log(i);  // 0 1 2 3 4
}
console.log(i);  // 5

// 3) 변수 호이스팅
// 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언과 초기화 단계가 한번에 진행됨.

// 이미 foo 변수가 선언됨
console.log(foo);  // undefined (변수 foo는 undefined로 초기화됨)
foo = 123;  // 변수에 값 할당
console.log(foo);  // 123
var foo;  // 변수 선언 호이스팅에 의해 변수 선언은 런타임 이전에 실행

let

var의 단점을 보완하기 위해 ES6에서 나온 새로운 변수 선언 키워드.

// 1) 변수 중복 선언 금지
let bar = 123;
let bar = 456;  // SyntaxError: Identifier 'bar' has already been declared

// 2) 블록 레벨 스코프
// 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정
let foo = 1;

if (true) {
  let foo = 2;  // 지역변수
  let bar = 3;
}
console.log(bar);  // ReferenceError: bar is not defined

// 3) 변수 호이스팅이 발생하지 않는 것처럼 동작
// 선언 단계와 초기화 단계가 분리되어 진행됨. 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언이 실행되지만(=호이스팅은 발생), 초기화 단계는 변수 선언문에 도달했을 때 실행됨.
console.log(foo);  // ReferenceError: foo is not defined
// 일시적 사각지대(TDZ)
let foo;
// *참고: 자바스크립트는 모든 선언(var, const, let, function, class..)을 호이스팅한다. ES6의 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작.

// 4) 전역 객체의 프로퍼티가 아님
// 브라우저의 전역 객체는 window
var x = 1;
function foo () {}
// var 키워드의 전역 변수는 전역 객체 window의 프로퍼티임.
console.log(window.x);  // 1
console.log(window.foo);  // f foo() {}

let y = 1;
// let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 되므로, 전역 객체의 프로퍼티가 아니다.
console.log(window.y);  // undefined

const

보통 상수(재할당이 금지된 변수)를 선언하기 위해 사용하는 키워드.

// 1) 선언과 초기화가 동시에 진행되어야 함
const foo = 1;
// 그렇지 않으면 문법 에러 발생
const foo;  // SyntaxError: Missing initializer in const declaration

// 2) 블록 레벨 스코프를 가짐
// 3) 호이스팅이 발생하지 않는 것처럼 동작

// 4) 재할당 금지
const foo = 1;
foo = 2;  // TypeError: Assignment to constant variable

// 5) 상수로서의 역할
// const 변수에 원시 값을 할당한 경우, 변수 값을 변경할 수 없다.

const TAX_RATE = 0.1;  // 변경할 수 없는 상수로서 사용될 값 (대문자로 선언해 상수임을 명확히 표시)
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);
console.log(afterTaxPrice);  // 110

// 6) 객체 할당 시 변경 가능
const person = {
  name: 'Lee'
}
person.name = 'Park';
console.log(person);  // { name: 'Park' }

var vs. let vs. const

• 변수 선언에는 기본적으로 const를 사용
  • 변경이 발생하지 않고, 읽기 전용으로 사용하는(재할당이 필요 없는) 원시 값과 객체에는 const 키워드를 사용한다
  • const 키워드를 사용하면, 의도치 않은 재할당을 방지하기 때문에 좀더 안전 (var/let보다 안전)
  • 변수 선언 시점에는 재할당이 필요할지 모르는 경우가 많고, 객체는 의외로 재할당하는 경우가 드물기 때문에 일단 const 사용하기.
• let은 재할당이 필요한 경우에 한정해 사용
  • 변수의 스코프는 최대한 좁게 만든다
• ES6에서는 var를 사용하지 않는 것이 좋다