12장 : let, const & 블록 스코프

var 키워드

• 변수 중복 선언 허용
  • 같은 스코프 안에서 변수 중복 선언 가능 --> 먼저 선언된 값 변경되는 부작용
• 함수 레벨 스코프
• 함수가 아닌 다른 if, while과 같은 문에서 사용시 함수레벨 스코프만 지원하므로 전역 변수를 남발할 가능성이 높다.
• 변수 호이스팅

  // var 키워드로 선언한 변수는 런타임 이전에 선언 단계와 초기화 단계가 실행된다.
  // 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
  console.log(foo); // undefined
  
  var foo;
  console.log(foo); // undefined
  
  foo = 1; // 할당문에서 할당 단계가 실행된다.
  console.log(foo); // 1
  

  • 가독성을 떨어뜨리고 오류를 발생시킬 여지를 줌

let 키워드

• 변수 중복 선언 금지: 문법 에러 발생(SyntaxError)
• 블록 레벨 스코프
• 변수 호이스팅이 발생하지 않는 것처럼 동작
  • var은 변수 선언단계와 초기화 단계가 동시에 진행되지만
  • let은 선언단계이후 일시적 사각지대를 거쳐 초기화가 진행
  일시적 사각지대(TDZ, 스코프 시작지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 곳--> 접근 시 ReferenceError발생)

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

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

• 전역객체와 let
  • var 키워드로 선언한 전역변수와 전역 함수는 암묵적으로 전역 객체 window의 프로퍼티가 되어 window.x와 같은 형식으로 참조O.
  • let 키워드로 선언한 전역 변수는 전역객체의 프로퍼티가 아니어서 window.x로 참조X. (undefined)

const 키워드

선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 필수

재할당 금지

const 키워드로 선언한 변수는 재할당이 금지

상수

상수는 재할당이 금지된 변수

const 키워드로 선언된 변수에 원시 값을 할당한 경우, 원시 값은 변경할 수 없는 값(immutable value)이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다.

const 키워드와 객체

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경 가능

객체는 재할당 없이도 직접 변경이 가능하기 때문. --> const키워드는 재할당을 금지할 뿐 '불변'을 의미X

변수에 할당된 참조 값은 변경X

var vs. let vs. const

• 변수 선언에는 기본적으로 const를 사용
• let은 재할당이 필요한 경우에 한정해서 사용
• ES6를 사용한다면 var 키워드는 사용X
• 재할당이 필요한 경우에 한정해 let 키워드를 사용
  → 변수의 스코프를 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const키워드를 사용 const 키워드는 재할당을 금지하여 var, let키워드보다 안전

객체는 의외로 재할당하는 경우가 드물어서 변수 선언 시 일단 const 키워드를 사용하고, 반드시 재할당이 필요한 경우 그때 const키워드를 let키워드로 변경해도 결코 늦지 않다.