JS const, let 호이스팅 그리고 Temporary Dead Zone(TDZ)

Question

안녕하세요.이번에 호이스팅을 다시 살펴보다가 사실은 const, let도 유효범위 내에서 호이스팅 된다는 것을 새로 알게 되었습니다.참고 링크https://yceffort.kr/2020/05/var-let-const-hoisting 그런데 let 변수를 사용한 코드에서 궁금한 점이 있어서 여쭤봅니다.function sayHello() { return name; } let name &#61; 'hi' console.log(sayHello()) // hi이걸 크롬 콘솔에서 돌리면 hi가 잘 찍히는데..제가 이해한 걸로는 먼저 1) 같은 스코프 내이기에, 변수인 let 이 초기화 되지 않고 상위로 올려져 선언(var는 선언과 동시에 undefind로 초기화 되는 것으로 알고 있습니다.)2) 그 다음 함수 호출이 올라감. *3) 그 후 name 에 값 'hi' 할당4) 그 다음 콘솔에서 호출한 함수를 메모리 상에 찾는데, 함수 안에 name 변수가 선언되지 않았기에, 밖에 있는 name을 찾다보니 'hi'가 나온 게 맞을까요?? 이게 아니면2)에서 let 변수가 초기화가 안된 상태면 오류가 나야하는 게 아닌가 싶어서요.. 질문!!!!1) 제가 이해한 게 맞는지, 맞으면 추가설명이나 틀리면 왜 아닌지 알려주시면 감사하겠습니다2) 호이스팅 되는 것들은 변수와 함수고, 둘 중에는 변수가 먼저 올라가는 것으로 알고 있었는데 이것도 맞는지 여쭤보고 싶습니다 호이스팅 좀 안다고 생각했는데.. 찾다보니 정확한 정보는 모르는 것을 알게 되었습니다..도움 부탁드립니다...!!! (--)(__)

현파랑 · Answer

호이스팅이랑 전혀 상관 없이 let을 전역변수로 선언하였는데... 질문의 요지가 잘못됐네요.호이스팅에 대한 내용이 아니라 스코프 체인에 대한 내용입니다. 함수 호출 시점에서 name이라는 식별자를 찾기 위해 스코프 체인 종점까지 검색하다가 전역변수(let, const는 글로벌 객체에 속하지 않는 차이가 있죠) name을 찾고 출력한 것 뿐입니다.

Uksssssssss · Answer

이해하신 부분에 조금만 얹겠습니다!1) '같은 스코프 내'라는게 정확히 어떤걸 말씀하시는지 불분명합니다. 또한 '변수인 let이 초기화되지 않고 상위로 올려져 선언'은 호이스팅을 말씀하시는 것 같은데 '초기화 되지 않아서 -> 선언'이 아닙니다. 변수는 그냥 선언이 먼저됩니다.2) 그 다음 호출이 올라감 -> 아닙니다. 자바스크립트로 순서대로 읽습니다. sayHello는 함수 선언식이죠(모르신다면 함수 선언식과 표현식에 대한 차이를 조금만 보시면 됩니다.)? 해당코드를 Javascript는 sayHello부터 읽어내려갑니다. 가장먼저 실행되는 것은 sayHello이고, 함수 선언식이기 때문에 호이스팅됨과 동시에 함수 컨텍스트가 생성됩니다.3) name은 선언되었지만 아직 할당이 안되었죠? sayHello에서 함수 컨텍스트 생성 후 할당이 됩니다.4) 맞습니다. 해당 함수 컨텍스트 내에서 name을 찾을수 없기 때문에 scope chain rule에 의해 전역객체 내에서 name을 찾습니다. 음.. 그리고 '호이스팅 되는 것들은 변수와 함수'도 맞지만 Javascript 내에선 함수도 값으로 취급하기 때문에 함수 또한 변수라고 생각하시면 됩니다. 그러면 함수가 먼저? 변수가 먼저?가 없어지죠. 순서대로 호이스팅 됩니다. 다만 기억하셔야 할 것은 함수 선언식의 경우엔 선언과 동시에 초기화가 이루어집니다. 반대로 함수 표현식인 경우 해당 함수를 call하는 시점에 함수 컨텍스트가 생깁니다.

Uksssssssss · Answer

아 그리고 질문자님이 주신 링크에서 저는 TDZ라는걸 처음알았네요 ^^ 감사합니다.

JS const, let 호이스팅 그리고 Temporary Dead Zone(TDZ)

3개의 답변

#let 목록