[js] let vs const vs var (ft. var의 문제점, 호이스팅)

 

변수선언 방식인 let, const, var에 대한 차이점과
var의 문제점, hoisting에 대해 알아봅니다.

 

variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는,
즉 데이터를 담고 있는 값을 의미합니다.

ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다.
더 이상 var 키워드는 사용하지 않는 것을 추천합니다.

 

var의 문제점

ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다.
왜 더이상 사용하면 안 될까요?

변수는 선언하고 나서 값을 할당하는 것이 정상입니다.
하지만 var를 사용할 때는 이상하게도
선언하기 전에 변수의 값을 할당해도 작동이 됩니다.

 

예제 - var : 호이스팅 발생

job = "pubisher"
console.log(job);
var job;
//result: pubisher

-> 변수를 선언하기 전에도 값을 할당하고, 출력하면 값이 나옵니다.

 

예제 - let

반면 let으로 변수를 선언하면 아래와 같은 결과가 나옵니다.

job = "pubisher"
console.log(job);
let job;
//result: Uncaught SyntaxError: Identifier 'job' has already been declared

이렇게 변수 선언 전에 값은 넣는 것이 오류가 정상입니다.

 

hoisting 호이스팅

• 정상: 변수 또는 함수 선언 -> 호출 
• 비정상: 변수 또는 함수 선언 -> 호출 : TDZ(temperal dead zone), 호이스팅 발생(잘못된 코딩)
• 어디에서 선언했는지 상관없이
  항상 제일 위로 선언을 올려주는 것과 같이 동작하는 것을 의미
• 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
• 변수(또는 함수)를 선언 전 호출했을 경우, 호출한 변수가 TDZ(temperal dead zone)에 있게 됨
• TDZ는 const, let, class 구문의 유효성에 영향을 미치는 중요한 개념이고, TDZ는 선언 전에 변수를 사용하는 것을 허용 안함
• var와 다르게 let을 사용하였을 경우, 선언하기 전에 값을 할당하면 출력했을 때 에러가 작동
• 변수 var 의 경우 선언 전에도 에러가 나지 않아 사용이 가능하기 때문에 var는 사용 안하는 것을 권함
• 호이스팅이 발생시키는 현상을 만드는 것은 잘못된 코딩 습관
• eslint 툴 설치로 호이스팅 발생을 사전에 방지할 수 있음
• 호이스팅 되는 요소: var 변수, function name() =>{}와 같은 함수
• const, let은 호이스팅은 일어나지만 TDZ에 있게 되어 에러가 발생

 

 

 

비교 예제

//var 사용
console.log(goddino);
var goddino;
//result: undefined

//let 사용
console.log(goddino);
let goddino;
//result: Uncaught SyntaxError: Identifier 'goddino' has already been declared

 

block scope, { }

var는 block scope 사용 시 문제가 있습니다.

block 안에 선언을 하였을 경우, 지역변수(local variable) 이기 때문에
블록 밖에서 출력을 하면 에러가 떠야 합니다.

하지만 var를 이용하여 선언하였을 경우,
오류 없이 출력이 됩니다.

비교 예제

//var 사용
{
var age;
age =  20;
}

console.log(age);
//20

//let 사용
{
let age;
age =  20;
}
console.log(age);
//Uncaught ReferenceError: age is not defined

 

이런 문제점과 위험 때문에 let 또는 const를 사용하여야 합니다.

let

let은 변수에 재할당이 가능합니다. (mutable data type)

let name = "goddino"
name = "writing"
//result: writing

 

name이라는 변수에 goddino라는 값을 할당하고,
writing 값으로 재할당하였습니다.

하지만, 재선언은 안됩니다. 재선언시 오류 메시지가 뜹니다.

let name = "goddino";
let name = "blog";
//result: Uncaught SyntaxError: Identifier 'name' has already been declared

 

const

한번 값을 할당하면 값이 절대 바뀌지 않습니다. (immutable data type)
값을 선언함과 동시에 할당한 뒤로는 값을 변경이 불가능합니다.
즉 재할당이 불가능합니다.

const name = "goddino"
name = "writing"
//result: Uncaught TypeError: Assignment to constant variable.

 

재선언도 안됩니다. 

const name = "goddino";
const name = "blog";
//result: Uncaught SyntaxError: Identifier 'name' has already been declared

하지만 객체나 배열의 내부는 변경할 수 있습니다.

const a = {};
a.num = 10;
console.log(a); 
//result: {num: 10}

 

const 사용하는 경우
보안과 안정성 (값 변경 금지)
실수 방지

 

결론

자바스크립트에서 변수를 선언할 때,

var 는 더이상 사용을 하지 않고,
mutable type의 let 과 immutable type의 const 을 사용하도록 합니다.

let은 재선언은 불가, 재할당은 가능하고,

const는 모두 불가능하지만, 객체나 배열 내부는 변경 가능 합니다.

반복문은 무조건 let만 써야 합니다.

const은 재선언이 불가능하므로 debugging할때 let보다 편합니다.