[JS] var, let, const 의 특징

자바스크립트에서는 변수를 선언할 때 var, let, const 이 세가지 키워드를 사용한다.

ES2015(ES6) 이전에는 변수를 선언하기 위한 방법이 var 밖에 없었다.
그런데 let과 const가 등장한 이후 var을 사용하지 않게 되었다.

어떤 특징이 있어서 그런지 살펴보자!

var

1. 중복 선언이 가능하다

var fruit = 'apple'
var fruit = 'banana'
var fruit = 'melon'

var로 선언된 변수는 기존에 선언된 변수의 값을 덮어씌운다.

2. 함수 레벨 스코프를 따른다.

스코프(Scope)란 '변수에 접근할 수 있는 범위'를 뜻한다.

var number = 1;

if (true) {
  var number = 2;
}

console.log(number); //2

이 코드의 경우 콘솔에 어떤 결과가 찍힐까?
함수가 선언되지 않아 새로운 스코프가 생성되지 않았고
var는 함수 스코프를 따르기 때문에 number의 값은 2가 나오게 된다.

function test() {
	var number = 2;
  console.log(number); // 2
}

test();
console.log(number); // Uncaught ReferenceError

위와 같이 test 함수에 선언된 number는 외부 스코프에서 접근할 수 없어 ReferenceError가 발생한다.

let

1. 중복 선언이 불가능하다

let fruit = 'apple'
let fruit = 'orange' // Uncaught SyntaxError

let은 var와 다르게 같은 변수명으로 재선언이 불가능하다.

let fruit = 'apple'
fruit = 'orange'

console.log(fruit) // orange

선언 후 값을 재할당하는 것은 가능하다.

2. 블록 레벨 스코프를 따른다.

블록 스코프를 따른다는 것은 변수를 둘러싼 {}블록 안에서만 해당 변수에 접근할 수 있다는 의미이다.

{
	let fruit = 'apple'
    var animal = 'panda'
}

console.log(fruit) // Uncaught ReferenceError
console.log(animal) // panda

let으로 선언한 변수는 {}블록 외부에서 접근할 수 없어 오류가 난다.

const

1. 중복 선언이 불가능하다

2. 블록 레벨 스코프를 따른다.

const는 let과 마찬가지로 중복 선언이 불가하며 블록 레벨 스코프를 따른다는 특징을 가지고 있다.

3. 값을 재할당 할 수 없다.

const는 let과 달리 값을 변경할 수 없다.

let fruit = 'apple';
fruit = 'melon';

console.log(fruit) // melon

const animal = 'panda';
animal = 'dog';

console.log(animal) // Uncaught TypeError

그렇기 때문에 const는 변하지 않는 값을 선언할 때 사용한다.

정리

var는 같은 이름의 변수를 계속해서 생성 할 수 있기 때문에 많이 사용하게 될 경우 어떤 예상치 못한 오류가 발생할 가능성이 커진다.

그렇기 때문에 변수 선언이 필요한 경우 const를 사용하고 만약 재할당이 필요한 경우라면 let을 사용하는 것이 좋다.

추가로, var는 호이스팅 후 값이 undefined로 초기화 되어서 변수를 선언하기 전에도 참조가 가능하다는 특징도 있는데!! 이 호이스팅에 대한 내용은 다음 글에서 자세히 정리할 예정이다.

참고
📚 기초부터 완성까지, 프런트엔드 (이재성 , 한정 저자)
📚 코어 자바스크립트 (정재남 저자)