호이스팅은
JS(인터프리터)가 변수와 함수의 메모리 공간을 선언전 미리 할당하는 것!!
- var는 선언과 초기화를 세트로함
- let,const는 변수 선언과 초기화를 분리, 선언 코드를 상단에 두는 것.
* 선언 전에 변수를 사용할 경우var 는 undefined 를 꺼내고 나머지는 ReferenceError가 뜬다.
- JS엔진은 선언한 변수와 함수를 먼저 모아둔다. 나중에 어떻게 할당될지는 모른당ㅇㅇ
//var num;//선언 //num=6;//초기화
선언전 따로 모으는 호이스팅으로 인해 실행은 되나 콘솔값이 undefined이다.
선언이 없고 초기화만 있기 때문에 ReferenceError이다.
TDZ (Temporal Dead Zone)
TDZ는 let,const,class구문의 유효성을 관리한다.
예를 들어 let,const,class는 var와 다르게 선언과 초기화 단계가
분리되어 있게 만들어 저 있기 때문에 변수 선언전 변수를 호출 하면
참조 에러가 발생.
즉 변수를 호이스팅(변수나 함수를 미리 메모리 공간에 할당)하나 , 실제 선언
코드가 나타나기 전 JS에서 내보내지 않는다.
TDZ는 변수가 호이스팅되어 선언되기전 머무르는 임시 사각 지대(temporal dead zone)
1. const
2. let
3. class 도 마찬가지
* 참조에러는 선언문이 상단에 존재하지 않거나 없는경우라 보면된다.
//함수 선언문
function getName() {
console.log('name');
}
//함수 표현식
var name = function() {
console.log('name');
};함수를 선언하는것(함수 선언문), 함수를 변수에 담는것(함수 표현식)
차이점
- 함수 선언문 은 해당 함수 전체 내용을 호이스팅한다. (var 초깃값 undefined 세트로 저장하는 것처럼)
- 함수 표현식 은 선언만 저장하고 값은 호이스팅하지 않는다. (let 또는 const 처럼)
호이스팅 규칙
부등호가 큰 쪽이 먼저 인식된다
변수 선언 > 함수 선언
할당되어있는 변수 > 할당되지 않은 변수
출처
https://velog.io/@yunju/JavaScript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ
🐤 실습 과제
- 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.
hi 함수 내부 객체{} 안에 const a=1; 을 밖으로 빼준다.