[자바스크립트] var, let, const 3가지 변수에 대한 정리

자바스크립트에는 총 3가지의 변수가 있다. 

var, let, const 

 

이렇게 3개의 변수들이 굳이 생겨난 이유가 있을 것이고, 각각 다른 특징이 있을 것이다. 

이 각각의 다른 특징을 선언, 할당, 범위 라는 기준을 가지고 설명해 보겠다. 

 

---

선언 : 

선언이란 말그대로 변수를 선언하는 것이다. 그런데 재선언이 가능한 변수가 있고, 불가능한 변수가 있다. 

var는 재선언이 가능한 변수이다. 재선언이 가능하다는 말의 예를 들어보자. 

var 이름 = 'kim'
var 이름 = 'Park'

위 코드와 같이 '이름'이라는 변수명으로 또 다시 선언을 하는 것이 가능하다는 말이다. 

 

이와 달리, let과 const의 경우에는 재선언하는 것이 불가능하다. 

---

할당 : 

할당은 선언되어있는 변수에 값을 넣어주는 것이다. 할당의 경우에도 3가지 변수마다 차이를 보인다. 

var의 경우, 재할당이 가능하며, let 또한 재할당이 가능하다. 재할당의 예를 보자. 

let 이름 = 'Kim'
이름 = 'Park'

let으로 이름이라는 변수를 선언하면서, kim이라는 값을 할당했다. 그런데, 이름의 값을 바꾸고 싶어졌다. 그러면 이 변수의 이름에 값을 다시 할당하면 된다. var과 let의 경우 이렇게 하는 것이 가능하다.

 

하지만 const의 경우에는 재할당하는 것이 불가능하다. 

const 이름 = 'kim'
이름 = 'park'

이렇게 선언을 하는 경우, 에러가 날 것이다. 

 

혹시 오해하는 부분이 있기 때문에, 짚어볼 만한 부분이 있다. 오브젝트를 만드는 경우이다. 

const 오브젝트 = {
 이름 : 'kim'
}

여기서 만약 '오브젝트.이름' 의 내용을 바꾼다면, 이것은 문제가 되지 않는다. 엄밀히 말하자면 이것은 '재할당'이 아니기 때문이다. 선언된 오브젝트의 내용을 바꿀 뿐이다. 그렇기 때문에 문제가 되지 않는다. 

만약 const의 본래 특징 처럼, 객체 또한 재할당이 불가능하도록 만들어주고 싶다면, 

자바스크립트에 내장되어 있는 문법이 있다. 바로 Object.freeze()라는 문법이다. 

const 오브젝트 = {
이름 : 'kim'
}

Object.freeze(오브젝트) //freeze라는 문법을 통해서 '오브젝트'변수의 값을 바꾸지 못하게 만든다. 

오브젝트.이름 = 'park' //이렇게 freeze되어 있는 오브젝트안의 내용을 바꾸려고 할 경우 값이 제대로 응답되지 않을 것이다.

---

범위 : 

마지막으로 변수의 범위이다. 함수를 예로 들어서 설명해보겠다. 

var의 경우에는 존재범위가 딱 함수안에서만 사용된다. 

만약에 하나의 함수 안에서 var 로 변수를 선언하고서, 함수 바깥에서 해당 변수를 사용할 경우

해당 변수는 존재하지 않는 값으로 나올 것이다. 

 

let이나 const도 다를 것은 없는데, 이 둘의 경우에는 범위가 더 좁다고 생각하면 된다. 

이 둘은 모든 중괄호{}가 존재범위라고 할 수 있다.