var, let, const 모두 값을 정의하는 변수이다. let은 보통 값이 변하는 변수를 할당할 때 사용하는 반면 const에는 변하지 않는 상수를 할당한다.
오늘날에는 var 대신에 let이나 const를 자주 사용한다고 한다. 실수로 변수 값을 바꾸는 것을 방지하기 위해서 var 대신 let이나 const를 쓴다고 한다. 그 얘기를 하려면 var, let, const가 어디에 저장되는지를 알아야 한다.
var, let, const는 값들이 어느 부분에 저장되는지에 대해 차이가 있다. 크롬 개발자 도구로 들어가면 값들이 각각 어디에 저장되는지 볼 수 있다. 우측의 scope영역 하단에 script, global, local 중에서 어디에 저장되는지 확인해 보면 된다.
소스는 https://gist.github.com/egoing/2641675b55e33caf6ae8cc9c08c83a45
의 자료를 이용했다. 자료를 크롬에서 우클릭-검사를 눌러 개발자 도구에서 확인하면 된다. var, let, const가 사용된 부분에서 breakpoint를 걸어 하나씩 내려가보면 확인할 수 있다. 자세한 방법은 글 맨 하단의 생활코딩 링크를 참고하기.
정리하자면,
1. 함수가 아닌 바깥쪽에 변수를 선언했을 때 var은 global 영역에 저장되는 반면, let과 const는 script 영역에 저장된다.
2. 함수 안에 변수를 선언하면 var, let, const 모두 local 영역에 저장된다.
3. block영역에서 변수를 선언하면 var은 global 영역에 저장되는 반면, let과 const는 block 영역에 지정된다. block 영역이라 함은 {}(중괄호 혹은 객체)안에 들어간 형태, 예를 들면 for이나 if문 같은 것 밑의 영역을 나타낸다.
그리고 재선언과 재할당 부분에서도 차이를 보인다.
let a = 1
let a = 2위의 형태처럼 함수 선언을 다시 해 주는 것을 재선언,
let a = 1
a = 2아래의 형태처럼 선언은 하지 않고 값만 변경해 주는 것을 재할당이라고 한다.
var의 경우는 재선언과 재할당 모두 자유로운데 반해서 let은 재할당은 가능하지만 재선언은 불가능하다. 선언이라는 것이 유일한 것을 선언해주는 의미가 있어서 이미 유일한 것을 다시 선언해서 오류가 나지 않게 도와 주는 것이다.
아래 그림은 위에 한 이야기를 정리해둔 것이다. 생활코딩 강의의 한 장면을 캡쳐했다.
출처 : 유튜브 생활코딩
https://www.youtube.com/watch?v=61iolhWgQt0&t=26s
https://www.youtube.com/watch?v=QtOF0uMBy7k
호이스팅(hoisting) : 어디에 선언했느냐에 상관없이 선언을 제일 위로 끌어올려 주는 것. var은 컴퓨터가 자동으로 호이스팅해주기 때문에 선언보다 호출을 먼저 해도 값을 나타내 준다.
var은 block을 무시한다. 원래 block안에 변수를 선언해주면 local 범위에 저장되기 때문에 global 범위에서는 호출을 못하는게 정상인데 var은 그것을 무시한다.
이 이유 때문에 var을 쓰는 것은 지양된다.
출처 : 유튜브 드림코딩
자바스크립트에서 변수를 선언하지 않아도 사용 가능한 경우가 있는데, 이 경우는 변수를 var처럼 전역변수로 지정해 준다.
