자바스크립트 코딩을 하다보면 사바사 코바코 변바변이지만 변수를 세 가지 방식으로 선언한다. var, let, const. 응? 뭐야 1+1+1임? 왜 3개씩이나 있어요? 를 알아보자.
일단 선언이 뭐냐… 베이직에서
Dim A as integer이게 선언임. 나는 A라는 변수를 정수형으로 둘거야! 그리고 자바스크립트에서는
const tab = document.getElementByID('ID')이런 식으로 변수를 선언한다. 저 코드는 자바스크립트에게 ‘나 HTML 도큐먼트에서 ID가 ID인 거 가져와서 a에 넣는다’고 알려주는 것. 위에 있는 베이직 코드는 A라는 정수형 변수를 만들거야라고 베이직에 알려주는 셈.
그래서 얘네가 뭔 차이냐… 비밀은 바로! 재선언과 재할당에 있다.
var
var a = 1
console.log(a)
var a = 2
console.log(a)
a = 3
console.log(a)위 두 개의 코드를 보면 var을 이용해 a는 1이라고 선언했는데 밑에 보니까 a가 2라고 다시 선언했다. 그리고 이번에는 또 2라는 정수를 담고 있던 a에 3을 할당했다.
let
let a = 1
console.log(a)
let a = 2
console.log(a) //SyntaxError: Identifier 'a' has already been declared
a = 3
console.log(a)위 코드의 var를 let으로 바꿨더니 에러가 반기네? 첫번째 코드에서 ‘a라는 변수에 1을 담을거야’라고 자바스크립트에게 알려줬다. 그래서 a에는 이미 1이라는 정수가 담겨있는데 거기다가 다시 2를 담을거라고 선언하니 미쳤습니까 휴먼? 하면서 에러를 쏟아낸다.
let a = 1
console.log(a)
a = 3
console.log(a)하지만 1을 담고 있던 a라는 변수에 3을 다시 ‘할당’하는 건 된다. 그럼 const는요?
const
const a = 1
console.log(a)
const a = 2
console.log(a) //SyntaxError: Identifier 'a' has already been declared
a = 3
console.log(a)역시나 두번째 코드에서 미쳤습니까 휴먼? 한다. 그럼 재선언은 안되는 것 같은데… 재할당은 어떨까?
const a = 1
console.log(a)
a = 3
console.log(a) //TypeError: Assignment to constant variable.재할당을 하려고 했더니 미쳤습니까 휴먼? 한다. 즉,
- var: 재선언/재할당 둘 다 가능
- let: 재선언 불가/재할당 가능
- const: 재선언/재할당 둘 다 불가
으로 외우면 된다. 재선언? 재할당? 그래도 헷갈려요… 그럼 for문에 let과 const를 써 보자.
for (let i = 0;i < 10;i++) {
console.log(i)
}얘는 되는데
for (const i = 0;i < 10;i++) {
console.log(i)
}얘는 안된다.
Reply