[2주차 스터디]15장-let const 블록 스코프

let, const 키워드와 블록 레벨 스코프

var 키워드 변수 문제점

중복선언 허용

함수레벨 스코프

• var 키워드로 선언한 변수는 오로지 함수 스코프 내에서만 지역 스코프로 인정 됩니다.

var x = 1;

if (true) {
  // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
  // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다.
  var x = 10;
}

console.log(x); // 10

변수 호이스팅

• var 키워드 이용시 호이스팅에 의해 할당 이전에 참조 가능

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

// 변수에 값을 할당(3. 할당 단계)
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

let 키워드

변수 중복 선언 금지

• let키워드는 변수를 중복 선언하면 문법 에러가 발생합니다.

블록 레벨 스코프

• let 키워드로 선언한 변수는 모든 코드블록 을 지역 스코프로 인정합니다.
• 함수 내의 코드 블록은 함수 레벨 스코프에 중첩 됩니다.

변수 호이스팅

• let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작합니다.

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

• let으로 선언한 변수는 선언단계와 초기화단계가 분리되어 진행 됩니다.

  var는 런타임 이전에 선언되고 undefined로 할당 됨

• 런타임 이전에 선언단계 실행되지만 변수 선언문에 도착했을 때 초기화 됩니다. (선언문 이전에 참조하려 하면 문법에러)
• let변수는 스코프의 시작 지점 부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조 할 수 없습니다. 이 구간을 일시적 사각지대(TDZ : Temporal Dead Zone)이라고 합니다.
• es6에서 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작합니다.

  실제로는 호이스팅 되고 var랑 차이는 위에서 말한 선언 ,초기화 분리와 TDZ

전역 객체와 let

• let 키워드로 선언한 전역 변수는 var와 달리 전역 객체의 프로퍼티가 압니다.
• let전역 변수는 보이지 않는 개념적인 블록 (전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재하게 됩니다.

const 키워드

• let과 동작을 비슷하게 하나 차이가 있습니다.

선언과 초기화

• const로 선언한 변수는 반드시 선언과 동시에 초기화 해야합니다.
• 초기화 경우 let처럼 블록 레벨 스코프를 가지며 호이스팅 발생하지 않는 것처럼 동작

재할당 금지

• const 변수는 재할당이 금지된다.
• 이러한 규칙을 사용해 상수를 표현하는데 사용합니다

  상수란 재할당이 금지된 변수를 말합니다.

• const변수에 원시값을 넣으면 변경이 불가능 합니다

  원시 값은 변경이 불가능한 값이고 const 사용시 변수의 재할당이 불가능 하기 때문

const 키워드와 객체

• const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있습니다.
  (변수에 할당된 참조 값이 변하는 것이 아니기 때문에)

정리

• 변수 선언에는 기본적으로 const 사용, 재할당이 필요한 경우에만 let 사용
• var는 사용 x
• 변수의 스코프는 최대한 좁게 만들어야 함