[리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #1 재선언, 재할당

리액트(React)  학습에 필요한 사전지식

var, let, const 차이점 - #1 재선언, 재할당

JavaScript에서 변수를 정의할 때 'var'를 많이 사용했습니다. 하지만 var는 생각보다 단점이 많습니다. 동일한 이름으로 변수를 한 번 더 선언을 하더라도 에러가 나지 않고 각자 다른 값을 출력합니다. 변수 선언이 유연하기에 코딩을 간단하게 할 때는 편리할 수 있습니다. 하지만 코딩의 규모가 크다면 예상했던 값이 나오지 않을 수 있고, 변수가 어떻게 사용되는지 혼란을 가져올 수 있습니다.

그래서 ES6 이후에 새롭게 'let'과 'const'라는 2종류의 정의방법이 추가되었습니다. 각 방법에 따라 동작이 다르므로 용도에 따라 구분하여 사용해야 합니다. 기존 var를 개선한 점에서 let과 const의 등장은 개발자의 코드 작성 의도를 읽을 수 있다는 장점이 있습니다. 그렇다면 var, let, const는 어떻게 쓰이며, 무엇이 다른지 알아보도록 하겠습니다.

변수선언방식 - 재선언

var 재선언

var name = "Chris";

console.log(name); //Chris 출력

var name = "John"

console.log(name); //John 출력

let 재선언

let name = "Chris";

console.log(name);

let name = "John"

console.log(name);

//Uncaught SyntaxError: Identifier 'name' has already been declared.

const 재선언

const name = "Chris";

console.log(name);

const name = "John"

console.log(name);

//Uncaught SyntaxError: Identifier 'name' has already been declared.

위의 예시에서 보듯 var만 변수 재선언이 가능합니다. 재선언이란 간단히 말해 변수명 앞에 var, let, const를 붙여 변수를 다시 생성하는 것을 의미합니다. let과 const에서는 이미 'name'이라는 변수가 이미 선언되었다는 에러 메세지를 출력합니다. 그러면 재선언이 불가능한 let과 const는 어떤 차이가 있을까요.

변수선언방식 - 재할당

let 재할당

let name = "Chris";

console.log(name); //Chris 출력

name = "John"

console.log(name); //John 출력

const 재할당

const name = "Chris";

console.log(name); //Chris 출력

name = "John"

console.log(name);

//Uncaught TypeError: Assignment to constant variable.

재할당이란 이미 선언된 변수에 다른 값을 넣는 것, 즉 변수의 값을 변경하는 것 입니다. let은 재할당이 가능한 반면, const는 재할당이 불가능합니다. 에러메시지를 보면 "상수에 값을 할당했습니다."라고 나옵니다. 즉, 상수는 변경이 불가능한데(immutable), 이미 선언한 상수에 값을 바꾸려 해서 에러가 발생했습니다. 상수(const, Constant의 줄임말)는 값이 변하지 않다는 뜻으로 변수의 반대말입니다. 혹시 var는 재할당이 될까요?

var 재할당

var name = "Chris";

console.log(name); //Chris 출력

name = "John"

console.log(name); //John 출력

이로써 var, let, const의 첫번째 차이점을 확인했습니다. var는 재선언, 재할당 모두 가능합니다. let과 const는 둘 다 재선언은 불가능합니다. 하지만 let은 재할당이 가능한 반면, const는 재할당이 불가능합니다. 이제 다음 차이점으로 가볼까요.