호이스팅(Hoisting)

호떡집사·2023년 4월 14일

JavaScript

목록 보기
1/1
post-thumbnail

1. 호이스팅 (Hoisting)

1) 호이스팅 : 자바스크립트에서 코드를 위에서 아래로 읽어가기전, 변수,함수, 클래스 등의 선언부를 먼저 읽어들이는 작업

2) function은 function구문 전체가 먼저 읽어들여짐 => function은 함수 표현식으로 쓰되, 함수 선언식이 필요할 경우가 있기에 상황에 맞춰서 사용

3) var을 사용하는것은 지양(같은 이름의 변수를 두번 선언 하는 것도 가능하며 전역 변수에 또 바로 등록해 선언하는 것도 가능), let과 const를 활용

4) var와 let,const가 호이스팅 관련해서 다른 이유 : 호이스팅 과정에서 읽어들이는 부분에 차이가 있기 때문인데,
- 변수 생성과정: 크게 1. 변수선언 2. 초기화(undefined) 3. 할당. 세 가지 과정

- var는 호이스팅 과정에서 1.변수선언과 2.초기화까지 이루어짐 : 스코프의 유효범위 처음부터 변수가 선언된 위치 전까지

var은 참조하여 초기화 값(undefined)를 끌어낼 수 있음

- let,const는 초기화가 안되어있는 상태라 var과 달리 reference erroe 발생. // 이러한 방시으로 참조할 수 없는 구간을 일시적 사각지대라 하여 TDZ라고 한다



2. TDZ (temporal Dead Zone) :

1) TDZ은 let, const, class 구문의 유효성을 관리
2) var, function, import 구문은 현재 scope에서 hoisting되기 때문에 TDZ의 영향을 받지 않는다.
3) typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인 시 유용. TDZ 안에서는 다르게 동작

      //TDZ는 선언문이 존재하는 scope 범위 안에서 변수에 영향을 줌.
      function doSomething(someVal) {
      // Function scope
      typeof variable; // => undefined
      if (someVal) {
          // Inner block scope
          typeof variable; // throws `ReferenceError`
          let variable;
        }
      }
      
      doSomething(true);
      
profile
성장하는 Front-End 개발자를 목표로!(✿◡‿◡)

0개의 댓글