본문 바로가기

WEB/JavaScript

[JS ES6+] var, let, const 차이점과 용도

JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자.

 

    var name = 'bathingape'
    console.log(name) // bathingape

    var name = 'javascript'
    console.log(name) // javascript

위 결과를 볼 때 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.

 

이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아진다면 어디에서 어떻게 사용될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

 

    let name = 'bathingape'
    console.log(name) // bathingape

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

 

 

반면 let으로 선언한 변수는 같은 이름으로 한번 더 선언하면 에러를 출력한다. 

 

여기서 알 수 있는 점은 var로 선언한 변수는 중복으로 선언을 해도 값이 바뀌면서 같은 이름으로 선언한 변수가 서로 다르게 결과를 출력한다.

let으로 선언한 변수는 같은 이름으로 한번 더 선언하면 선언이 되지않고 오류를 출력한다.

 

 

그렇다면 let  const 의 차이점은 무엇일까?

    let name = 'bathingape'
    console.log(name) // bathingape

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

    name = 'react'
    console.log(name) //react

이 둘의 차이점은 immutable 여부이다.

let 은 변수에 재할당이 가능하다.

    const name = 'bathingape'
    console.log(name) // bathingape

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

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

 

그렇지만, const는 변수 재선언, 변수 재할당 모두 불가능하다. 즉 고정값, 상수이다.

 

 

velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90