JavaScript - #18. let, const

앞서서 알아본 결과 var 키워드는 다음과 같은 문제를 가지고 있다.

1. 변수의 중복 선언 허용

2. 함수 레벨 스코프

3. 변수 호이스팅

 

이 문제점들을 해결하기 위해서 ES6에서는 변수를 선언할 때 let, const를 추가하였다.

두개의 키워드들에 대해 알아보자

 

1. let 키워드

 

- 변수 중복 선언 금지

var에서는 변수의 중복선언이 허용됬지만 let키워드는 변수가 중복선언 될 시 SyntaxError를 발생시킨다.

let foo = 100;
let foo = 200; // SyntaxError : Identifier 'foo' has already been declared

 

- 블록 레벨 스코프

var는 함수 레벨 스코프를 가지기 때문에 함수 외에 다른 코드블록에서 선언된 변수는 지역변수가 아닌 전역변수로 생성하였다. let에서는 블록 레벨 스코프를 지원하여 함수 외에도 for문, if문, while문 등 코드블록에서 선언한 변수도 지역변수로 생성한다.

let i = 100;

for(let i=0; i<5; i++){
    console.log(`local 'i' : ${i}`);
}

console.log(`global 'i' : ${i}`);

결과 :

local 'i' : 0

local 'i' : 1

local 'i' : 2

local 'i' : 3

local 'i' : 4

global 'i' : 100

 

- 변수 호이스팅

자바스크립트의 고유한 특징으로는 모든 선언문은 호이스팅이 발생한다는 것이다.

var로 선언한 변수는 호이스팅이 일어나서 코드 런타임 이전에 undefined로 초기화 된다.

var로 선언한 변수의 호이스팅

let에서도 호이스팅은 피할 수  없다.

하지만 호이스팅이 일어나지 않은 것 처럼 동작을 구현하였다.

let으로 선언한 변수의 호이스팅

변수 호이스팅이 발생하는 것은 맞지만 var로 선언 하는 것과는 차이점이 있다.

바로 호이스팅 시 초기화 유무이다.

var로 변수를 선언하면 호이스팅이 발생하여 undefined로 초기화되지만,

let으로 변수를 선언하면 변수의 선언만 일어날 뿐 초기화 되지 않는다.

 

따라서 변수를 초기화 하는 문 이전에 변수에 접근하려고 하면 ReferenceError가 발생한다.

 

런타임 이전 변수 호이스팅이 발생하고 변수가 초기화 되기 전 구간을 TDZ (Temporal Dead Zone) 이라고 하며 이 구간 내에서 참조가 발생 시 참조 오류가 발생한다.

 

결론적으로 let에서도 호이스팅이 발생하지만 변수 초기화가 이루어지지 않아서 초기화 이전까지는 값을 참조할 수 없다.

 

- 전역객체와 let

var로 전역변수를 생성하면 그 값은 window라는 전역객체의 프로퍼티가 된다고 배웠다.

let으로 전역변수를 생성하는 그 값은 전역객체의 프로퍼티가 되는 것이 아니라 보이지 않는 개념적인 블록 (전역 렉시컬 환경의 선언적 환경코드)에서 존재하게 된다.

아직 배우지 않은 부분이여서 알고만 있으면 되겠다.

 

2. const

const 키워드의 특징은 대부분 let과 동일하며, let과 다른 특징을 알아보겠다.

- 상수

const로 선언된 변수는 상수의 특징을 가지며, 값이 원시값이 오는 경우에는 그 값을 변경할 수 없다.

따라서 프로젝트에서 변경되지 않는 수를 지정할 때 유용하다.

const TAX_RATE = 0.1; // 일반적으로 대문자를 사용하며 스네이크 케이스를 사용한다. 

let price = 1000;

let afterTexPrice = price + (price*TAX_RATE);
console.log(afterTexPrice);

- 재할당 금지

const로 선언된 변수는 상수의 특징을 가지며, 값이 원시값이 오는 경우에는 그 값을 변경할 수 없다.

변경을 시도할 경우 TypeError가 발생한다.

const price = 1000;
price = 2000; // TypeError : Assignment to constant variable.

- 선언과 동시에 초기화

const는 값의 재할당이 불가하기 때문에 선언과 동시에 초기화 해야한다.

const tax; // SyntaxError : Missing initializer in const declaration

- const 키워드와 객체

const는 값의 재할당이 불가하다. 

하지만 값의 변경은 가능하다.

원시값은 애초에 값의 변경이 불가능한 값이며, 객체는 값의 변경이 가능한 값이다.

따라서 const에서 값의 변경이 가능한 것은 오직 객체 값이다.

하지만 재할당이 불가능 한 만큼 객체값을 가리키고 있는 참조값은 변하지 않는다.

const person={
    name:'Kim',
    age:25
}

person.age =24;

console.log(person); // { name: 'Kim', age: 24 }

 

지금까지 ES6에서 새롭게 등장한 let, const 키워드를 알아보았다.

그렇다면 어느것을 사용하는 것이 맞을까?

일단 ES6 이후 버전부터는 var는 사용하지 않는다.

그리고 let과 const 중에 const 사용을 권장하며,

let을 사용하는 시점은 변수에 값을 재할당 해야하는 경우에 사용한다.

 

코딩을 할 때 const로 변수를 생성하는 습관을 들이자.