[JS] 변수 선언(var, let, const, var와 let의 차이)

프로그래밍에서 변수란?

프로그래밍에서 변수는 어떤 데이터를 보관하는 공간이다.

간단하게 생각하면 어떤 물건을 담기위한 상자, 바구니, 그릇같은 느낌이다.

---

자바스크립트에서 변수를 선언할 때에는 var, let const 총 3가지로 선언을 한다. (다른 언어에 비해 적은 편이다.)

예를 들어

var color = "red"

let color = "blue"

const color = "yellow"

여기서 color는 변수의 이름 즉, 변수명이다. 

변수명은 자신이 원하는 이름을 만들어 사용하면 되지만 나름의 규칙이 있다.

1. 변수명의 첫 글자는 영문자, 달러($), 언더 바(_)만 올 수 있다. 2. 두번째 이후 글자는 영문자, 달러($), 언더 바(_)와 숫자만 올 수 있다. 3. 변수명의 영문자는 대문자와 소문자를 구분한다. 4. 자바스크립트의 예약어가 아니어야 한다.

자바스크립트의 예약어

 

그렇다면 저 3개로 변수 선언은 어느 때 사용해야 하는 것일까?

---

let

우선 let 부터 살펴 보겠다. 

let color = "red"

console.log(color)

위 처럼 코드를 작성하고 결과를 보면 color라는 변수에 red가 잘 들어간 것을 볼 수 있다.

여기서 color라는 변수에 red를 black으로 변경하고 싶다면 뒤쪽만 바꿔주면 되지 않을까? 

let color = "red"
let color = "black"

console.log(color)

앞에는 똑같이 작성하고 red를 black으로만 바꾸어 콘솔을 찍어보면 에러를 발생한다.

그 이유는 변수명이 color인 변수가 위에 이미 존재하고 있기때문이다.

그렇다면 어떻게  red를 black으로 바꿀 수 있을까?

 

해답은 2번째 줄의 let을 지우고 color = "black"만 작성하면 된다.

let color = "red"
color = "black"

console.log(color)

우리가 여기서 얻을 수 있는 개념은 1. let으로 선언된 변수는 중간에 맘이 변해서 안에 있는 데이터를 바꿔도 문제가 되지 않는다. 2. 변수를 한번 선언 했으면 그 다음에는 변수명만 가져다 쓰면 된다. (const도 마찬가지) 3. 변수명은 중복해서 선언할 수 없다. (const도 마찬가지)

---

const

const는 상수를 선언할때 사용한다.

여기서 상수는 어떠한 일이 있어도 중간에 변하지 않는 값이다.

위의 코드에서 let을 const로만 바꾸어 실행하여 보겠다.

const color = "red"
color = "black"

console.log(color)

오류가 발생하는 것을 볼 수 있다. 

그 이유는 첫째줄에서 color라는 변수를 const(상수)로 선언했기 때문이다.

const로 변수를 한번 선언하게 되면 이 변수는 끝까지 처음에 들어온 데이터를 끝까지 가지고 간다.

그렇기 때문에 두번쨰 줄에서 데이터를 변경하려고 하자 에러가 발생한 것이다.

이럴때는 2번째 줄을 삭제하면 해결이 된다.

const color = "red"

console.log(color)

우리가 여기서 얻을 수 있는 개념은 1. const로 선언한 변수는 상수로 변하지 않는 값이다. 2. 변하지 않는 변수를 선언하고 싶을 때 사용하면 유용하다.

---

var

var는 let과 헷갈릴 수 있는 선언 방법이다.

위의 let 코드에서 var만 바꿔 실행 시켜 보면 차이가 없다.

var color = "red"
color = "black"

console.log(color)

그렇다면 왜 var와 let를 구별하는가?

---

var와 let의 차이

우선 var가 자바스크립트에서 먼저 나왔고 es6버전 업그레이드 후 let이 나오게 되었다.

var가 나온 후에 let이 나온 이유는 var에 몇 가지 문제가 있기 때문이다.

 

var에는 어떤 문제가 있었을까?

 

첫 번째 문제

var를 통해 이렇게 선언한다고 가정해보자.

console.log(color)
var color = "red"

위 코드를 보면 변수 color가 선언되기도 전에 color를 호출하고 있다. 

자바나 C, C++ 등의 언어라며는 에러를 발생하는게 당연하지만 자바스크립트는

에러를 알려주는 것이 아니라 undefined를 출력해 준다.

 

두 번째 문제

color = "red"
var color

console.log(color)

첫 째줄을 보면 변수를 아직 선언하지도 않았는데 변수에 데이터를 넣어주고 있다.

선언하지 않은 변수에 데이터를 넣고 두 번째 줄에 와서야 변수를 선언해 주었다.

명백한 에러이지만 출력된 값을 보면 잘 출력이 되고 있다. 

 

세 번째 문제

변수명이 중복되는데 이를 무시하고 출력을 해준다.

var color = "red"
console.log(color)

var color = "black"
console.log(color)

 

*결론: var에는 이러한 많은 문제점들이 있어 let이 나왔다. 그러니까 var 쓰지말고 let을 쓰자 

참고한 영상

https://www.youtube.com/watch?v=fETYLCU2YYc