[JS] 15. let, const와 블록 레벨 스코프

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

1-1 변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능하다.

var x = 1;
var y = 1;

// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다
// 초기화문이 없는 변수 선언은 무시된다.

1-2 함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 내에서 선언해도 모두 전역 변수가 된다.

1-3 변수 호이스팅

// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다.
// 변수 foo는 undefined로 초기화된다.
console.log(foo); // undefined

//변수에 값을 할당(3. 할당 단계)

foo = 123;

console.log(foo); // 123

var foo;

변수 선언무 이전에 변수를 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않지만 프로글매의 흐름상 맞지 않을뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

2. let 키워드

2-1. 변수 중복 선언 금지

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

2-2. 블록 레벨 스코프

블록만들 지역 스코프로 인정하는 함수 레벨 스코프를 따른다. 하지만 let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레베 스코프를 따른다.

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
  
}

console.log(foo); // 1
console.log(bar); // ReferencedError: bar is not defined

2-3 변수 호이스팅

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

자바스크립트는 error문과 defined의 차이를 자세히 알아야 하는 것 같다
처음에는 같은 것이라 생각했는데 배우다보니 그 차이점이 크다는 것을 알게 되었다

let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러가 발생한다.

• var 키워드는 선언단계와 초기화 단계가 foo === undefined로 한번에 이루어진다.
• let 키워드는 선언과 초기화 단계가 분리되어 진행된다.

let foo = 1;

{ 
  console.log(foo);// ReferenceError
  let foo = 2;
}

호이스팅이 일어남으로 console.log(foo)에서 전연 변수의 값을 출력하는 것이 아닌 지역 변수의 선언을 참조하여 참조 에러문을 발생시킨다.

2-4 전역 객체와 let

var 키워드로 선언한 전역 변수와 전역 함수, 그리고 선언하지 않은 변수에 값을 할당하는 암묵적 전역은 전역 객체 window 프로퍼티가 된다. 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다.