var, let ,const의 차이점

 

ES6가 나오면서 변수를 선언하는 키워드에도 많은 변화가 생겼다.

let과 const가 나오면서 var를 잘 사용하지 않게되었는데 왜 그렇게 됐는지 각자의 차이점을 알아보자.

 

var , let , const 의 차이 4가지

 1. 중복 선언의 가능 여부

 2. 재할당 가능 여부

 3. 변수 스코프의 차이

 4. 변수 호이스팅 방식

 

 

1. 중복 선언의 가능 여부

var = 중복해서 선언+초기화가 가능

마지막에 적힌 할당값이 변수에 저장된다. 선언,초기화에 제한이 없기때문에 혹시라도 까먹고 재선언을 하였을 때 에러가 뜨지않아 실수를 범하기 쉽다.

var x = 5;
console.log(x); // 5

var x = 10;
console.log(x); // 10

var x = 20;
console.log(x); // 20

이와 같이 재선언을 계속 할 경우 마지막 선언의 값을 가지게 된다.

 

 

let , const = 중복 선언이 불가능.

이미 위에서 똑같은 변수를 선언했다면 에러가 뜨면서 선언을 할 수 없게된다.

따라서 var에 비해 코드에 높은 안정성을 가지며 헷갈릴 일이 적어진다.

let x = 5;
console.log(x) // 5

let x = 10;
console.log(x) // SyntaxError: Identifier 'a' has already been declared

 

 

2. 재할당 가능 여부

var , let= 재할당이 가능하다.

위에서 선언한 값을 재할당하여 새로운 값으로 출력이 가능하다.

var x = 5;
x = 10;
console.log(x); // 10

let y = 10;
y = 20;
console.log(y) // 20

 

const = 재할당이 불가능하다.

const는 상수를 선언하는 명령어다. 변하지 않을 값을 선언하여  불필요한 재사용을 방지한다.

재할당이 가능한 var, let과는 다르게 const는 처음 선언할때 항상 값을 같이 할당해줘야한다.

const x = 5; // 항상 값을 같이 할당해줘야한다.
x = 10; // TypeError: Assignment to constant variable.

 

위와 같이 재할당을 하려고하면 타입에러가 발생한다.

 

 

3. 변수 스코프의 차이

var = 함수 스코프

var는 함수내부에 선언된 변수만 지역변수로 여기고, 그 외에는 전역변수로 인식한다.

function fn() {
    var x = 5;
    console.log(x);
}

fn(); // 5

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

 

 

let , const = 블록 스코프

let과 const는 함수 포함, if문 for문 등의 블록에서 선언된 변수도 지역변수로 인식된다.

 //if문
 if(true){
     let x = 5;
     console.log(x); // 5
 
 console.log(x); // ReferenceError: x is not defined
 }
 
 //for문
 for(let x=1; x<5; x++){
    console.log(x); // 1 2 3 4
 }
 
 console.log(x); // ReferenceError: x is not defined

 

 

4. 변수 호이스팅 방식

var = 변수 호이스팅이 발생한다.

console.log(x);  // undefined

var x = 5;

console.log(x);  // 5

위와 같이 콘솔로그를 찍은 후에 변수를 선언하여도 에러가 뜨지않고 undefined가 나온다.

var 변수 호이스팅 특징인 자바스크립트 엔진이 변수를 먼저 선언하고 코드를 실행하기 때문이다.

 

 

let , const = 변수 호이스팅이 발생하지만 var와는 다른 방식으로 발생된다.

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

위와 같이 var 와는 다르게 변수는 선언해두지만 코드를 실행하는 과정에서 선언문을 만났을때 초기화를 진행한다. 

얼핏보면 호이스팅이 안되는것 처럼 보이긴 하지만 값을 참조할 수 없어서 그렇게 보이는 것 뿐이지 호이스팅은 정상적으로 발생하고 있다.

 

결론

1.let과 const 위주로 변수를 선언한다.

2. 값을 재할당 할 필요가 없는 변수는 const를 사용하는것이 좋다.

3. var를 사용하는게 익숙한것이 아니라면 let과 const가 나온시점에서 굳이 사용할 필요가없다.