문제점
아래와 같이 선언되지 않은 text라는 값을 콘솔에 찍으려고하면 어떤 현상이 일어날까요?
console.log(text)
text is not defined
당연히 에러가 납니다. text라는 값이 정의되지 않았다고 하네요.
console.log(text)
var text = "hi"그렇다면 이렇게 하면 어떨까요?
첫번째 줄에서 text를 출력하고 두번째 줄에서 text를 선언해줬는데요,
당연히 첫번째줄 입장에선 여전히 text라는 값이 정의되지 않았으니 에러가 나와야 정상입니다.
???????????????????
그런데 에러는 안나고 undefined라는 값이 출력됩니다.
왜 이와 같은 현상이 일어나는 것일까요?
호이스팅의 개념
호이스팅이란?
코드가 실행하기 전 자바스크립트 엔진이 변수/함수 선언을 먼저 메모리에 저장해두어서
변수/함수 선언문이 해당 스코프 내의 최상단으로 끌어 올려진 것 같은 현상을 말합니다.
위의 예시로 다시 돌아가보면
콘솔보다 뒤에서 text 라는 변수를 선언해주고 값을 할당해줬지만,
이 호이스팅이라는 것이 일어나 콘솔보다 text 선언이 먼저 되고
undefined라는 값으로 초기화를 시켜줬기 때문에 undefined가 찍히게 된 것이지요.
이 text라는 값은 두번째 줄을 만나야 비로소 hi라는 값으로 할당이 됩니다.
이렇게 참조 에러(ReferenceError)가 일어나야할 곳에 에러가 나지 않는 것은 여러가지로 문제가 될 수 있습니다.
심지어 var는 지역변수와 전역변수의 구분도 짓지 않고 무조건 최상단으로만 끌어 올려줘서 (...) 더 많은 문제점을 낳을 수 있죠..
그래서 이런 문제점들을 보완하고자 ES6 문법에는 let과 const가 나오게 됩니다.
const
재할당과 재선언이 불가능한 변수 선언 키워드입니다. 보통 상수를 선언할때 쓰입니다.
let
재할당은 가능하지만 재선언은 불가능한 변수 선언 키워드입니다.
var 대신 const나 let을 사용하게 되면
짠 이렇게 저희가 원래 예상했던 대로
text라는 변수가 선언 되지도 않았는데 호출을 하고있어!
하고 참조에러를 내뱉습니다.
그렇다면 let은 호이스팅이 일어나지 않는 것일까요?
그건 아닙니다. 자바스크립트의 모든 선언은 호이스팅이 일어납니다.
대신 let과 const에는 일시적 사각지대(Temporal Dead Zone; TDZ)라는 개념이 추가됐는데요.
TDZ란?
호이스팅이 일어나 메모리에 변수/함수 선언을 메모리에 저장은 해두었지만,
변수/함수 선언문이 나오기 전까지 해당 변수/함수에 접근을 할 수 없는 구간입니다.
즉, 스코프의 시작부터 선언문까지의 구간을 뜻하죠.
이것이 바로 var보다 let과 const의 사용이 권장되는 이유입니다!
그리고 또 한가지 var의 사용을 지양하는 이유는 바로 var는 블록스코프를 무시한다는 단점 때문입니다.
지역스코프 내에서 선언된 변수/함수도 스코프를 무시하고 무조건 전역 스코프로 끌어 올려버려서 스코프의 경계가 모호해집니다.
마치며
어렴풋하게 알고만 있던 호이스팅의 개념을 이번에야말로 확실하게 알고가고자 정리 해본 글이다.
지금까지 let, const, var의 차이를 단순 변수/상수 선언정도로만 알고 있던 나 반성해 ,, ㅠ
확실히 이런 개념 하나하나 알아갈 수록 왜 js가 느슨하고 자유분방하다고하는지 알 것같다.
옛날에는 나는 그런점때문에 js가 좋아! 라고 말하고 다녔는데
정말 아무것도 몰랐구나하고 지난날의 나를 돌아보게 된다..ㅋ.. 어렸다..
아직도 공부하고싶은 js나 react 개념이 많은데 차근차근 공부하고
블로그에 꾸준하게 올리는 습관을 길러야겠다!
틀린 내용이 있다면 댓글 부탁드립니다 🙌
참고
