[JS] var, let, const의 차이점 및 호이스팅이란?

 

예전에 Javascript에서는 변수를 선언할 수 있는 방법이 var밖에 없었습니다.

하지만 최근에는 ECMAScript6가 추가되면서 let과 const가 추가 됐습니다.

 

최근에는 Javascript를 공부하다보면 변수를 선언할 때 var, let, const를 혼용하여 사용하는 것을 볼 수 있습니다.

각각 무엇이 다른지 알아보도록 하겠습니다.

 

먼저 흔히 쓰이는 var와 let, const의 차이점을 알아보겠습니다.

 

var와 let, const의 첫 번째 차이점은 scope가 다르다는 점입니다.

var는 function-scope입니다. 하지만 let과 const는 block-scope입니다.

 

function-scope란 변수가 유효한 범위 혹은 접근할 수 있는 범위가 함수 단위라는 뜻입니다.

한번 예제를 보도록 하겠습니다.

function test(){
	var a = 10;
}
console.log(a); //Error


for(var i = 10; i<11; i++){
	console.log(i); //10
}
console.log(i); //11

a는 var이기 때문에 function-scope입니다. 따라서 test함수 내부가 유효범위입니다.

하지만 i는 얘기가 다릅니다. i는 현재 함수안에서 선언된 것이 아닙니다. 따라서 i가 호이스팅(hoisting)이 되면서 for문 밖에서도 i를 호출할 수 있게됩니다.

 

호이스팅이란 변수를 유효범위 최상단으로 옮기는 행위입니다. 

즉 i의 유효범위는 위 예제 코드상에서는 사실상 전역(global)입니다. 궁금하시다면 test 함수 안에서 i를 호출해보세요.

값이 나오진 않겠지만 에러도 나지 않는 것을 확인하실 수 있을겁니다. 그 이유는 호이스팅으로 인해서 i는 사실상 전역변수가 됐고 초기화 또한 최상단에서 됐습니다. 다만 호이스팅이 될 때 초기화는 같이 되지 않고 기본적으로 undefined로 초기화가 됩니다. 따라서 for문보다 앞에서 i를 호출할 경우 호출은 되지만 값은 undefined인 상태로 호출이 되는 겁니다.

 

function-scope를 알아봤으니 block-scope도 짚고 넘어가도록 하겠습니다.

 

block-scope란 변수의 유효범위가 한 블록(block)이 기준이 됩니다. 한 블록의 기준은 중괄호( {} )입니다.

for(let i = 10; i<11; i++){
	console.log(i); //10
}
console.log(i); //Error

var에서 봤던 예제에서 변수 i를 var가 아닌 let으로 선언했을 뿐이지만 이번엔 for문 밖에서 i를 호출하자 에러가 나는 것을 확인할 수 있습니다. 그 이유는 for문의 중괄호가 닫힌 후 i를 호출했기 때문입니다.

 

var와 let, const의 차이점 중 scope의 차이는 이해하셨을 거라고 생각하도 다음 차이점을 설명하겠습니다.

 

두 번째 차이점은 var는 변수의 재선언이 가능하지만 let, const는 변수의 재선언이 불가능하다는 점입니다.

 

Javascript가 문제되는 이유 중 하나가 변수의 재선언이 가능하다는 점입니다.

 

변수의 재선언이란 

var a = 10;
var a = 20;

console.log(a); //20

이런식으로 위에서 선언한 변수를 새로 선언해도 에러가 나지 않습니다.

이로인해 개발자의 의도와는 다르게 변수의 값 변경이 생길 수 있습니다.

 

하지만 let과 const는 변수의 재선언이 불가능합니다.

 

이번엔 let과 const의 차이점을 알아보겠습니다.

 

let은 변수의 재할당은 가능하지만 const는 변수의 재할당이 불가능합니다.

예제로 보도록 하겠습니다.

let isLet = 1000;
const isConst = 2000;

isLet = 2000;
isConst = 1000; //Error

예제를 통해 let은 재할당이 가능하지만 const는 재할당이 불가능하다는 사실을 알 수 있습니다.

 

여담으로 let과 const도 호이스팅은 이루어지지만 block-scope를 기준으로 호이스팅이 됩니다.

또한 호이스팅의 규칙도 조금 까다롭습니다.

 

let은 값을 초기화되기 전에 변수가 반드시 선언되어 있어야 합니다.

또한 const는 선언과 동시에 초기화를 해줘야 합니다.

 

잘못된 점이나 오타 등을 댓글로 적어주시면 수정하도록 하겠습니다.

 

참고:https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d