[자바스크립트 Deep Dive] 15. let, const 키워드와 블록 레벨 스코프

unhyif·2022년 6월 3일
0

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

15.1.1 변수 중복 선언 허용

  • 같은 이름을 가진 변수가 이미 선언되어 있다는 사실을 모르고 중복 선언을 한다면, 기존 변수 값이 의도치 않게 변경될 수 있음

cf) 초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작하고, 초기화문이 없는 변수 선언문은 무시됨

var x = 1;
var y = 1;

var x = 2; // 기존 변수 값 변경
var y; // 무시됨

console.log(x, y); // 2 1

15.1.2 함수 레벨 스코프

  • 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따름
    -> 함수 외부에서 var 키워드로 선언된 변수는 코드 블록 내에 있더라도 전역변수가 되기 때문에, 변수의 중복 선언 가능성을 높임
var x = 1;
if (true) {
  var x = 10; // 전역변수 x 중복 선언
}

console.log(x); // 10

15.1.3 변수 호이스팅

  • 변수 호이스팅으로 인해 런타임 이전에 변수 선언 단계가 일어나고, 이때 undefined 값으로 초기화 단계가 함께 실행되기 때문에 변수 선언문 이전에 변수를 참조할 수 있게됨
    -> 프로그램의 흐름상 부적절하고, 가독성이 떨어짐
// 런타임 이전에 변수의 선언 단계와 초기화 단계가 함께 일어남
console.log(foo); // undefined - 변수 참조 O

var foo;
console.log(foo); // undefined

foo = 1;
console.log(foo); // 1

15.2 let 키워드

var 키워드와의 차이점을 중심으로 살펴본다.

15.2.1 변수 중복 선언 금지

let foo = 1;
let foo = 2; // Uncaught SyntaxError: Identifier 'foo' has already been declared

15.2.2 블록 레벨 스코프

  • 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름
    -> 전역변수의 발생 가능성 줄어듦
let foo = 1;

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

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

15.2.3 변수 호이스팅

  • 호이스팅이 발생하지 않는 것처럼 동작함
    ∵ 변수 호이스팅으로 인해 런타임 이전에 변수 선언 단계가 일어나지만, var 키워드로 선언된 변수와는 달리 초기화 단계가 변수 선언문에 도달했을 때 실행됨. 따라서 변수 선언문 이전에서는 변수를 참조할 수 없게됨
    • 일시적 사각지대(TDZ): 스코프 시작 지점~변수 선언문까지의 구간으로, 변수를 참조할 수 없음
// 런타임 이전에 변수의 선언 단계가 일어남
// TDZ 시작
console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization - 변수 참조 X

let foo; // TDZ 끝, 초기화 단계가 실행됨
console.log(foo); // undefined

foo = 1;
console.log(foo); // 1

15.2.4 전역 객체와 let

  • var 키워드와 달리, let 키워드로 선언된 전역변수는 전역 객체의 프로퍼티가 아님
var x = 1;
let y = 2;

console.log(window.x); // 1
console.log(window.y); // undefined

15.3 const 키워드

let 키워드의 특징을 공유하므로, let 키워드와의 차이점을 중심으로 살펴본다.

15.3.1 선언과 초기화

  • 반드시 선언과 동시에 값을 할당해야 함
const foo = 1; // OK
const bar // Uncaught SyntaxError: Missing initializer in const declaration

15.3.2 재할당 금지

  • 변수에 원시 값이 할당되어 있다면, 재할당 없이 변수 값을 변경할 수 없으므로 값이 불변함
const foo = 1; // OK
foo = 2; // Uncaught TypeError: Assignment to constant variable.

15.3.3 상수

  • 재할당이 금지된 변수
    -> 상태 유지/가독성/유지보수의 편의를 위해 적극적으로 사용해야 함

cf) 일반적으로 이름을 대문자로 설정

const TAX_RATE = 0.1;
let preTaxPrice = 100,
  afterTaxPrice = preTaxPrice + TAX_RATE * preTaxPrice;

console.log(afterTaxPrice); // 110

15.3.4 const 키워드와 객체

  • const 키워드로 선언된 변수에 할당된 것이 객체라면 값을 변경할 수 있음. 객체를 변경할 때 재할당이 일어나지 않기 때문임
const person = {
  name: "J",
};

person.name = "H";

console.log(person); // {name: 'H'}

15.4 var vs let vs const

  • 재할당이 필요하다면 let, 그렇지 않다면 const를 사용함

0개의 댓글