Javascript var, let, const 차이

1. 변수 선언 방식

 

var

• var은 선언한 변수가 동일한 이름으로 중복 선언이 가능하다.
• 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있다.

var title = 'apple';
console.log(title); // apple

var title = 'banana';
console.log(title); //banana

title = 'remon';
console.log(title);//remon

 

let

• 중복 선언 시, 이미 선언되었다는 에러 메세지를 출력한다.
• 단, 변수 값을 재할당하는 것은 가능하다.

let title = 'apple';
console.log(title); // apple

let title = 'banana';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'remon';
console.log(title);//remon

 

const

• 중복 선언이 불가하다.
• 재할당이 불가하다.

const title = 'apple';
console.log(title); // apple

const title = 'banana';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'remon';
console.log(title);
//Uncaught TypeError: Assignment to constant variable

 

2. 호이스팅

자바스크립트 함수는 실행 되기 전에 함수내 필요한 변수 값들을 모아 유효범위의 최산단에 선언한 것 처럼 동작한다. 이런 방식을 호이스팅이라 한다.

 

var 호이스팅

변수 a가 선언되기 전에 참조시, 에러가 발생하지 않고 undefined가 출력된다.

console.log(a); //undefined

var a = 123;
console.log(a); //123

 

let, const 호이스팅

• let의 경우 선언 단계와 초기화 단계가 분리되어 진행된다.
• const 키워드는 선언 단계와 초기화 단계가 동시에 진행 된다.

console.log(a); //ReferenceError: a is not defined

let a = 123;
console.log(a); // 123

 

3. 정리

그렇다면, 어떤 변수 선언 방식을 써야하는가?

재할당이 필요 없는 상수와 객체에는 기본적으로 const를 사용하는 것이 좋다. 의도치 않은 재할당을 방지해주기 때문이다.

재할당이 필요한 경우에는 한정적으로 let을 사용하는 것이 좋다.