자바스크립트 - var, let, const 차이

 

 

자바스크립트에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자!

 

var의 특징

1. 함수 레벨 스코프(Function-level scope)

함수의 코드 블록만을 스코프로 인식하며, 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다.

if 문이나 for 문의 변수 선언문에서 선언한 변수를 코드 블록 외부에서 참조할 수 있다.

 

2. var는 키워드 생략 가능하고, 변수 중복 선언 허용이 가능

var는 변수 선언 방식에 있어서 가장 큰 단점을 가지고 있다.

var name = 'python'
console.log(name) // 결과 : python

var name = 'javascript'
console.log(name) // 결과 : javascript

변수 name을 선언하고, 바로 또 name을 선언했음에도 불구하고,

에러가 나지 않고 서로 다른 값을 출력한다.

이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있으나, 코드량이 많아진다면,

코드를 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

그래서, ES6 이후 이를 보완하기 위해 let과 const가 추가되었다.

 

3. 변수 호이스팅

변수를 선언하기 이전에 참조할 수 있다.

자바스크립트 - 호이스팅(Hoisting)이란?

 

let의 특징

1. 블록 스코프

let name = 'Lim'; // 전역 변수

{
  let name = 'Lee'; // 지역 변수
  let nickName = 'good'; // 지역 변수
}

console.log(name); // Lim
console.log(nickName); // ReferenceError: nickName is not defined

위 예제에서 코드 블록 내에 선언된 변수 name, nickname은 블록 레벨 스코프를 갖는 지역 변수이다.

블록 안에 있는 name은 전역에서 선언된 변수 name과는 전혀 다른 변수이다.

따라서 전역에서는 블록 안에 있는 name과 변수 nickname을 참조할 수 없다.

2. 변수 중복 선언 금지

var와 다르게 let은 name은 이미 선언되었다는 에러 메시지가 나온다.

let name = 'python'
console.log(name) // 결과 : python

let name = 'javascript'
console.log(name) 
// 결과 : Uncaught SyntaxError: Identifier 'name' has already been declared

즉, 변수가 재선언이 되지 않는다.

 

그렇다면, const에 대해서도 알아보자.

const name = 'python'
console.log(name) // 결과 : python

const name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

const는 또한 let과 똑같이 블록 스코프이며, 변수가 재선언이 안 되는 것뿐만 아니라,

const name = 'python'
console.log(name) // 결과 : python

name = 'javascript'
console.log(name) 
// 결과 : Uncaught TypeError: Assignment to constant variable.

재할당이 불가능하다.

 

그렇다면, 어떤 변수 선언 방식을 써야 할까?

ES6를 사용한다면 var 키워드는 사용하지 않는다.

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.