[JS Basic] let 과 const

var 키워드의 문제점

우선 var 키워드는 중복 선언이 가능하다. 코드가 길어지게 되어서 뒤에 앞에 선언된 변수와 동일한 이름의 변수가 선언되고 할당까지 되었다면 의도치 않게 변수의 값이 변경되는 부작용이 발생하게 된다. 또한 함수 레벨 스코프에 의해 var 키워드로 선언한 변수는 함수 외부인 for문이나 if문과 같은 코드 블록 내에서 변수를 선언하더라도 전역 변수가 되어버리는 단점이 생긴다. 또한 var 키워드는 변수 호이스팅까지 발생시켜 프로그램의 흐름상 맞지 않은 결과가 나올 수 있다.

그렇다면 이런 단점을 보완할 수 있는 방법은 뭐가 있을까?
바로 let과 const 키워드를 사용하는 것이다.

let 키워드

• let 키워드는 변수의 중복 선언을 금지한다.

  중복 선언을 금지하는 것이지 재할당을 금지하는 것이 아니라는 점은 기억하자!

• let 키워드는 블록 레벨 스코프를 따른다. 함수 레벨 스코프 안에 블록 레벨 스코프가 중첩될 수도 있다.

function foo() {
	let i = 100;
	for(let i = 1; i < 3; i++) {
    	console.log(i); // 1 2
    }
    console.log(i); // 100
}

변수 호이스팅

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

• var 키워드는 런타임 이전에 선언단계와 초기화 단계가 동시에 이루어졌다. 따라서 바로 오류가 뜨지 않고 undefined로 초기화가 이루어졌던 것이다. 하지만 let은 다르다.

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

• 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는 구간인 '일시적 사각지대'라고 불린다.

console.log(foo); // Reference Error: foo is not defined

let foo(); // 변수의 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보이지만 변수 호이스팅이 발생한다. 다음 예제를 살펴보자. 변수 호이스팅이 발생하지 않는다면 전역변수 1을 출력해야 하지만 호이스팅이 발생하기 때문에 참조에러가 발생한다.

let foo = 1; // 전역 변수
{
	console.log(foo); // Reference Error
    let foo = 2; // 지역 변수
}

const 키워드

const 키워드는 let 키워드와 대부분 동일하다. 다른 점을 중점으로 살펴보자.

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야 한다.

var과 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지 된다.

• 상수는 재항당이 금지된 변수를 의미한다. const 키워드로 원시 값을 할당한 경우 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다. 일반적으로 상수의 이름은 대문자, 스네이크 케이스로 표현하는 것이 일반적이다. 그래야 상수임을 파악하기 쉽고 가독성이 좋아진다.

// 세금을 의미하는 0.1은 변경할 수 없는 상수로서 사용될 값이다.

const TAX_RATE = 0.1;

let preTaxPrice = 100;

let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);

console.log(afterTaxPrice); // 110

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다. 객체는 변경이 가능하다.

const person = {
	name: 'Lee'
};

person.name = "Kim";

console.log(person); // {name: "Kim"}

결론

변수 선언에는 기본적으로 const를 사용하고 재할당이 필요하다 싶으면 let을 사용하자. 객체는 의외로 재할당하는 경우가 드물기 때문이다. 나중에 const 키워드를 let으로 변경해도 결코 늦지 않다.