[JavaScript] var, let, const 차이 정리

var의 문제점

var를 통해 변수를 생성할 경우 변수를 변경할 때 에러가 발생하지 않아 코드량이 많아졌을 때 해당 변수가 어떻게 사용되고 있는지 파악하기 어렵고 값이 바뀔 수 있습니다.

 

var name = 'rooney';
console.log(name) // rooney 출력

var name = 'lampard';
console.log(name) // lampard 출력

 

위의 코드처럼 위에서 값을 이미 선언했음에도 아래에서 변경할 경우 오류 없이 사용 가능하기 때문에 코드량이 늘어날 경우 해당 변수에 변경이 일어나도 파악하기 어려워집니다.

 

이를 해결하기 위해 ES6(ECMAScript6)에서 추가된 변수 선언 방식이 let과 const입니다.

 

let을 알아봅시다

let name = 'rooney';
console.log(name) // rooney 출력

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

 

위 코드에서 앞서 var에 대해 예로 든 코드를 선언 방식만 var에서 let으로 바꿨습니다. 이렇게 선언할 경우 name은 위에서 이미 선언했다는 에러 메시지가 나옵니다. 즉, 같은 이름의 변수를 재선언할 수 없습니다.

 

const를 알아봅시다

const name = 'rooney';
console.log(name) // rooney 출력

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

 

위 코드를 보면 앞에서 작성한 let 코드와 차이가 없어보입니다. const도 let과 마찬가지로 재선언이 불가능한데 이 둘의 차이는 뭘까요?

 

let과 const의 차이

let name = 'rooney';
console.log(name) // rooney 출력

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

name = 'lampard';
console.log(name) // lampard 출력


const name = 'rooney';
console.log(name) // rooney 출력

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

name = 'lampard';
console.log(name); // Uncaught TypeError: Assignment to costant variable

 

위 코드를 보면 let은 재선언은 안 되지만 재할당은 가능합니다. 하지만 const는 재선언, 재할당이 모두 불가능한 상수 개념이라고 볼 수 있습니다.