7. let + const

이번에 알아볼 내용은 let과 const 입니다. 변수와 상수 선언 시에 쓰이는 키워드인데 ES6 이전에는 var 라는 키워드 하나로만 사용했었는데요, ES6에서 등장한 let 과 const는 어떤점에서 다른지 알아보도록 하겠습니다.

※ let

: let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다. 

var 키워드와 비교해서 설명을 하게 되는데, 그럼 var 키워드와 비교했을 때 어떤 차이점이 있는지 알아보겠습니다.

1. 중복선언

var x = 5;
var x = 7;
var x = 0;

var 키워드로는 이렇게 써도 오류가 발생하지 않습니다. 근데 보통 이렇게 변수를 선언하고 사용하진 않죠. 하지만 let을 사용했을 때에는 오류가 발생합니다.

let x = 5;
let x = 7;
let x = 0;
//Parsing error: Identifier 'x' has already been declared

이미 선언 되었으니 에러를 발생시키고 있습니다. 일반적으로 생각했을 때는 이게 지극히 정상인거죠. 

2. Hoisting

: 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다.

console.log(x);   //x is not defined

대뜸 이렇게 변수 선언도 없이 써버리면 바로 오류를 내버립니다. 그럼 이 경우에는 어떻게 될까요?

console.log(x);   //undefined
var x = "hello";
console.log(x);  //"hello"

보다시피 에러가 아닌 undefined 를 출력하게 됩니다. 에러랑 undefined는 같다고 할 수 없죠. 하지만 이건 분명 사용자가 의도한 값은 아닐겁니다. 사용자가 의도하지 않았다면 차라리 실행단계에서 오류를 내서 오류를 수정할 수 있게끔 알려주는게 더 나은 방법일 수도 있습니다. 그래서 let은 코드가 위와같이 작성되면 바로 오류를 냅니다.

console.log(x);
let x = "hello";
console.log(x);
//ReferenceError: x is not defined

3. 변수의 유효범위 (Scope)

: 변수의 유효범위는 지역변수와 전역변수 이 두 가지로 나눠집니다. 보통 스코프라고 하죠. 변수 이름이 하나부터 열까지 모두 다르다고 한다면 문제가 되지 않을 수도 있겠지만 보통 코딩을 할 때 그렇게 하지는 않죠. 문제가 발생되는 상황을 하나 만들어보겠습니다.

var state = "나는 바깥에 있어.";
console.log(state);              //"나는 바깥에 있어."
if(true) {
	var state = "나는 안에 있어.";
	console.log(state);      //"나는 안에 있어."
}
console.log(state);              //"나는 안에 있어."

맨 마지막 줄에서 예상과는 다른 답변을 합니다. 얘는 밖에 있다고 대답해야할 구문인데 안에있다고 나오고 있죠. 그 이유는 if문 안에 있는 state 라는 변수가 맨 위에 선언된 state와 동일하기 때문에 if문에서 할당한 문장으로 덮어 써버린 것이죠. 이걸 똑같이 let 키워드로 변경해보죠.

let state = "나는 바깥에 있어.";
console.log(state);                   //"나는 바깥에 있어."
if(true) {
	let state = "나는 안에 있어.";
	console.log(state);           //"나는 안에 있어."
}
console.log(state);                   //"나는 바깥에 있어."

이번엔 제가 원하는 결과가 나왔습니다. 이유는 if문 안에 있는 state와 맨 첫 줄의 state는 아에 다른 변수이기 때문이죠. if문 안에 있는 state는 if문 종료와 함께 사라집니다. 그럼 맨 마지막 출력문은 맨 첫 줄에서 할당한 문장을 출력하게 됩니다. 

제가 계속 let과 var를 비교하기만 했는데 const의 차이점은 단지 값을 바꿀 수 없는 "상수" 라는 특징만 갖고 있을 뿐 나머지는 let과 동일합니다. 몇 가지 추가적으로 설명하자면 const를 사용할 때의 코딩 스타일입니다.

const MAX = 100;
const CURRENT_STATE_TEMP = 17;
MAX = 50;	//ERROR!

상수는 일반적으로 대문자와 언더바 기호(_) 의 조합으로 작성합니다. 물론 이 스타일을 안 지킨다고 오류를 내진 않습니다. 자바스크립트에서의 암묵적인 규칙사항이 아닌 모든 프로그래밍 언어(아마 그렇다고 알고 있습니다.)가 이러한 스타일을 지켜서 코딩하고 있습니다. 그리고 제가 상수는 바꿀 수 없는 값이라고 했는데, 단 한가지의 예외가 존재합니다.

const CAR = {
	"hyundai" : "avante",
	"kia" : "K3",
	"audi" : "A6"
}
console.log(CAR);     //아우디 값은 A6

CAR.audi = "A3";
console.log(CAR);    //아우디 값이 A3로 변경됨.

const로 객체를 선언했는데 이렇게 객체 키 값으로 접근을 해서 값을 바꿔버리면 const로 선언했을지라도 값이 바뀝니다. 이럴경우 값이 바뀌는걸 방지하고 싶다면 Object.freeze 내장함수를 쓰면 됩니다.