[js 딥다이브] 15장 let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점

15.1.1 변수 중복 선언 허용

• var로 선언한 변수는 중복 선언이 가능
• 중복 시 의도치 않게 먼저 선언된 변수의 값이 변경되는 부작용이 발생됨

var x = 1;
var x = 405;
console.log(x); // 405

15.1.2 함수 레벨 스코프

• var로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정
• var로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됨(if, for 등)

var x = 1;
if(true) {
 var x = 10;
}
console.log(x); // 10

15.1.3 변수 호이스팅

• var로 선언한 변수는 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작함.
• 변수 선언문 이전에 변수를 참조하는 것은 호이스팅에 의해 에러를 발생시키진 않지만 프로그램의 흐름상 맞지 않고, 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남김.

console.log(foo); // 2) 선언에 의해 초기화된 변수 출력 - undefined
foo = 123; // 3) 변수 할당
console.log(foo); // 123
var foo; // 1) 변수 선언

15.2 let 키워드

15.2.1 변수 중복 선언 금지

• let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생함

let x = 1;
let x = 2; // SyntaxError

15.2.2 블록 레벨 스코프

• let으로 선언된 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름
  (함수, if, for, while, try … catch 문 등)

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

15.2.3 변수 호이스팅

• let으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작

console.log(foo); // ReferenceError
let foo;

• let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행됨.
  런타임 이전에 선언 단계까 실행되지만 초기화 단계를 변수 선언문에 도달했을 때 실행됨
• 일시적 사각지대(TDZ, Temporal Dead Zone) : 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간

let foo = 1; // 전역 변수
{
 console.log(foo); // ReferenceError 발생 ( 지역 변수가 호이스팅 되기 때문)
 let foo = 2; // 지역 변수

• 모든 선언은 호이스팅 된다.
• 단 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작함.

15.2.4 전역 객체와 let

• var 키워드로 선언한 전역 변수와 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역객체(window, global)의 프로퍼티가 된다.
• 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있음.
• let으로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님. 즉 window.foo와 같이 접근 불가

15.3 const 키워드

15.3.1 선언과 초기화

• const : 상수를 선언하기 위해 사용. 다른 용도도 있음
• 선언과 동시에 초기화하여야함.

const a = 1;

15.3.2 재할당 금지

• const로 선언한 변수는 재할당이 금지된다.

15.3.3 상수

• 상수는 재할당이 금지된 변수를 말함. (적극적으로 사용할 것)
• 대문자에 _로 구분하여 스네이크 케이스로 표현하는게 일반적

const WORLD_BEST_BEAUTY = 'girl';

15.3.4 const 키워드와 객체

• const로 선언된 객체의 프로퍼티는 변경이 가능

const person = {
 name: 'Lee'
};
// 객체는 변경 가능한 값이다. 따라서 재할당 없이 변경이 가능하다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}

15.4 var vs let vs const

• 변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우 한정해 사용하는 것이 좋음
• let을 쓸 경우 변수의 스코프는 최대한 좁게 만들 것
• 읽기 전용인 원시값과 객체에는 const 키워드를 사용할 것