Let const hoisting 발생할까요?
이것을 말씀드리기에 앞서
호이스팅이라는 표현이 낯설게 느껴집니다.
먼저 간단히 말씀드리자면,
자바스크립트에서 변수는 var로 표현해왔는데요.
자바스크립트 엔진은
var로 선언된 변수가 어디에 있든지,
항상 최상단으로 끌어올립니다.
이것을 hoisting(호이스팅)이라고 부릅니다.
호이스팅(Hoisting)이란?
호이스팅의 단어를 찾아보면 ‘끌어올리다’라는 의미입니다.
이글의 첫머리에 말씀드린 내용과 통하는 것이 있죠?
자바스크립트에서는
변수를 선언하기 전에 변수 사용이 가능했습니다.
단, scope는 지켜야 합니다.
다른 함수의 블록 내의
지역 변수를 상단으로 끌어올리지는 않기 때문입니다.
대신, 함수 내에서는 블록이 여러 개 구분이 되어도 함수 내 최상단으로 호이스팅이 일어납니다.
예를 들어보겠습니다.
이렇게 되면 if else 문에서 else에 변수를 선언했는데
else 밖에서 변수를 호출해도 undefined가 나오게 됩니다.
값이 할당되지 않았을 뿐
hoisting 효과로 선언은 된 것으로 간주하는 것입니다.
이것이 바로 ES6이 발표되면서
변수 형식이 let, const로 나눠진 이유입니다.
부정확한 변수 선언인데도 불구하고
선언된 것으로 간주하기 때문에
문제 발생의 여지가 생긴 것입니다.
즉, 더 엄격한 자바스크립트 규칙을 만들어서 오류를 줄이려고 하는 것이 let, const로 구분한 이유라고 합니다.
Let과 Const의 차이
let과 const의 차이는 무엇일까요?
가장 쉽게 말하자면,
변수를 재할당 할 여지가 있으면 let
상수(항상 변하지 않는 수)로 사용할 변수라면 const를 하게 됩니다.
그런데 let, const hoisting 이 될까요?
Let, const hoisting ?
네 됩니다. 그런데, 좀 더 엄격하게 적용이 됩니다.
아래에 예시를 든 if else 문에서 else 내 지역 변수는 else 밖에서 호출하려고 하면 선언되지 않은 변수를 호출했다는 에러가 나옵니다.
저~위에 똑같은 코드를 var로 바꾼것과 차이가 있죠?
그럼 let과 var는 이런 차이만 있을까요?
한 가지가 더 있습니다.
기존에 var는 중첩해서 선언이 가능했습니다.
하지만, let은 중첩해서 선언이 불가능합니다.
지금까지 자바스크립트 호이스팅에 대해서 짤막하게 알아보았습니다.
중요한 것은 hoisting으로 인해
자바스크립트가 자유로움은 얻었지만,
실수를 방지하는 것이 더 중요하다!
그러므로 변수는 사용하기 전에 선언해주는 것이 좋다는 점
그리고 스코프(범위)를 잘 지켜서 써야 한다는 점이 그 주된 요지였습니다.