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

in 모던자바스크립트




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

  • ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것.

변수 중복 선언 가능

  • 동일 스코프 내에서 중복 선언 가능 > 재할당
var x = 1;
var y = 1;

var x = 100; // 초기화문이 있는 경우, var 키워드 무시 > 재할당
var y; // 초기화문이 없는 경우, 변수 선언문 무시, 에러 발생 No!

console.log(x); //100
console.log(y); //1

함수 레벨 스코프

  • var 키워드로 선언한 변소는, 함수의 코드 블록만은 지역 스코프로 인정
  • 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수
  • 함수 레벨 스코프는 전역 변수를 남발할 가능성 up

변수 호이스팅

  • 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.
  • 할당문 이전에 변수를 참조하면 undefined 반환

let 키워드

변수 중복 선언 금지

  • let 키워드로 이름이 같은 변수를 중복 선언하면 SyntexError 발생
let num = 123;
let num = 456; //SyntaxError: Identifier 'num' has already been declared

블록 레벨 스코프

  • let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 …)을 지역 스코프로 인정하는 블록 레벨 스코프
  • 함수도 코드 블록이므로 스코프를 만든다. (함수 레벨 스코프에 중첩)
let foo = 1; //전역변수

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

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

변수 호이스팅

  • let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것 처럼 동작한다.
console.log(foo); //ReferenceError: Cannot access 'foo' before initialization
let foo = 1;
  • let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
  • 런타임 이전에 Js 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만
  • 초기화 단계는 변수 선언문에 도달했을 때 실행
  • 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 ReferenceError 발생
  • 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다. > 이 구간을 일시적 사각지대(TDZ)
console.log(foo); //ReferenceError: Cannot access 'foo' before initialization
// 호이스팅으로 선언부가 올라감 (undefined로 할당은 x)

let foo;
// undefined 로 할당
// 이 선언문 전까지가 TDZ
console.log(foo); //undefined

foo = 1;
console.log(foo); //1
  • 선언 단계(호이스팅) > TDZ > 초기화 단계(명시적 선언문) > 할당 단계
let foo = 1;

{
  console.log(foo); //ReferenceError: Cannot access 'foo' before initialization
  let foo = 2;
}
  • 그럼 let 은 호이스팅 안돼? No!
  • 호이스팅 안됐다면 전역변수 foo의 1을 반환했어야해.
  • 호이스팅 됐으니까 TDZ에 걸려서 ReferenceError 난거야.
  • js는 ES6에 도입된 let, const 를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다.
  • 하지만 ES6에 도입된 let, const, class는 TDZ에 의해 마치 호이스팅이 발생하지 않는 것처럼 동작

전역 객체와 let

  • var 키워드로 선언한 전역 변수, 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 격체 window의 프로퍼티가 된다.
  • 전역객체의 프로퍼티를 참조할 때 window 생략 가능
// 전역 변수
var x = 1;
// 암묵적 전역
y = 2;

//전역 함수
function foo() {}

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

console.log(window.y); //2
console.log(y); //2

console.log(window.foo); //f foo(){}
console.log(foo); //f foo(){}
  • let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
  • let 전역 변수는 보이지 않는 개념적인 블록(전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재하게 된다.
let x = 1;

console.log(window.x); //undefined
// let, const로 선언한 전역변수는 window의 프로퍼티가 아니다
console.log(x); //1

const 키워드

  • 상수를 선언하기 위해 사용 but 반드시 상수만을 위해 사용 x

선언과 초기화

  • const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
const foo;
//SyntaxError: Missing initializer in const declaration
  • let 과 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

재할당 금지

  • const 키워드로 선언한 변수는 재할당이 금지된다.
const foo = 1;
foo = 2;
//TypeError: Assignment to constant variable.

상수

  • const 키워드로 선언한 변수에 원시 값을 할당할 경우 변수 값을 변경할 수 없다.
  • 이러한 특징을 이용해 const 키워드를 상수로 표현하는데 사용한다.
  • 상수 : 재할당이 금지된 변수
  • 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.
  • 단, 변수는 언제든지 재할당을 통해 변수값을 변경할 수 있지만 상수는 재할당이 금지된다.
  • 상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극적으로 사용해야 한다.
  • const 키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 immutable 한 값이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다.
  • 상수는 프로그램 전체에 공통적으로 사용 > 상수만 변경하면 되므로 유지보수 up
  • 일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 나타낸다.
  • 여러 단어로 이뤄진 경우 _로 구분하는 스네이크 케이스로 표현하는 것이 일반적

const 키워드와 객체

  • const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
  • mutable 한 값인 객체는 재할당 없이도 직접 변경이 가능하기 때문
const person = {
  name: "jo",
};

person.name = "jung";
console.log(person); //{ name: 'jung' }
  • const 키워드는 재할당을 금지할 뿐 “불변”을 의미하지 않는다.
  • 새로운 값을 재할당하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능 > 객체가 변경되더라도 변수에 할당된 참조값은 변경되지 x

var vs let vs const

  • 변수 선언은 기본적으로 const 사용 (의도치 않은 재할당 방지 > 안전)
  • let은 재할당이 필요한 경우 한정해 사용
  • ES6 사용한다면 var 사용 x
  • 재할당이 필요한 경우에 한정해 let 키워드를 사용. 이때 변수의 스코프는 최대한 좁게 만든다.

  • 변경이 발생하지 않고, 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드 사용.

  • 변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많다. (객체는 재할당 드물다)
  • 변수를 선언할 때는 일단 const 키워드 사용.
  • 반드시 재할당이 필요하다면 그때서야 let 키워드로 변경해도 늦지 않다.