내용 정리
- 변수를 예로 들자면, 변수 선언이 나중에 되었음에도 마치 선언이 위에서 된 것처럼 작동하는데, scope 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 걸 hoisting이라고 할 수 있습니다. 단, 할당된 value 자체는 hoisting되지 않는데, 선언은 hoisting되지만 할당은 hoisting되지 않기 때문입니다.
- TDZ(Temporal Dead Zone) 영역에 있는 변수들은 사용할 수 없는데, let과 const는 TDZ의 영향을 받기 때문에 할당을 하기 전에는 사용할 수 없습니다. 이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있습니다.
- 함수에서도 hoisting이 발생하는데, 함수 선언식의 경우 hoisting에 따라서 실제 컴파일할 때 끌어올려지기 때문에 선언된 위치와 별개로 사용이 가능합니다. 다만 함수 표현식의 경우 hoisting이 일어나기 않기 때문에 좀 더 엄격하게 작동한다고 볼 수 있습니다.
- 자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수 표현식만을 사용할 것을 권고하고 있습니다. 함수 hoisting이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다고 지적하기도 했습니다.
- 함수 표현식의 경우 변수(var / let, const)의 호이스팅과 동일하게 동작하는 반면, 함수 선언식은 자바스크립트 엔진이 해당 함수의 선언과 동시에 완성된 함수 객체를 생성해서 환경 레코드에 기록해둡니다. 따라서 호이스팅되어 선언이 되기 전에도 실행이 가능하다고 볼 수 있습니다.
꼬리 질문
- TDZ(Temporal Dead Zone)가 무엇인가요?
- 왜 let과 const만 TDZ가 적용되나요?
- 호이스팅은 자바스크립트만의 특징인가요?
- 호이스팅이 끌어 올려지는 것 처럼 동작한다고 말씀해주셨는데, 조금 추가적으로 설명 가능하실까요?
- 자바스크립트 엔진이 컴파일 과정에서 모든 스코프를 탐색하며 각 스코프의 식별자를 수집하여 선언된 식별자 정보를 이미 알고 있기 때문에 발생하는 현상입니다. 실행 컨텍스트와 관련이 있습니다.
- 호이스팅은 장점인가요 단점인가요?
참고자료
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.