동작원리 1 - JS(호이스팅)

김영현·2023년 9월 20일
0

동작원리

목록 보기
1/7

호이스팅이란?


https://tc39.es/ecma262/multipage/ecmascript-language-statements-and-declarations.html#prod-HoistableDeclaration

ECMAscript사양에서는 이렇다.
어디에도 var, let과 관련된 사양은 없다

그러면 MDN을 보자

자바스크립트 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말합니다.
https://developer.mozilla.org/ko/docs/Glossary/Hoisting

MDN에서 정의한 바는 이렇다.
=> 선언문을 맨 위로 올리는 과정이다.
그러면, const, let와 같은 녀석들도 호이스팅 되는것 아닌가?

소스코드는 평가 과정에서 변수 선언문을 먼저 실행하여 생선된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(Lexical Enviorment Record)에 등록한다.
MDN은 이 과정을 호이스팅이라 부르는 것이다

let foo = 5;
{
	console.log(foo);
  	let foo = 2;
}
/*
Uncaught ReferenceError: Cannot access 'foo' before initialization at <anonymous>:3:17
초기화 되기 전에 접근할 수 없다
*/

let이 호이스팅되지 않는다면, 전역 변수인 foo = 5를 출력해야한다.
하지만 블록 스코프foo = 2호이스팅되었기에, 이미 선언한 사실을 알고있는 엔진은 레퍼런스 에러를 뿜는다.

결국 const, let 등호이스팅이 된다.
아마 강사님이 설명하신 건 temporal dead zone기능이 없는 호이스팅에 가깝다고 본다.

temporal dead zone(tdz)


TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지한다. TDZ는 징계를 내린다: 변수 선언 전에 어떤 것도 사용하지 않는다.
https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/)

위의 설명이 아주 완벽하다.
선언호이스팅된다. 하지만 tdz기능이 선언전에 변수에 접근하는 걸 막는다.
tdz가 적용된 예약어는 다음과 같다.

  1. const
  2. let
  3. class
  4. constructor내부의 super
  5. 함수의 기본 매개변수(default parameter)

적용되지 않는 세가지는 다음과 같다

  1. import
  2. var
  3. function(화살표 함수 제외)

참고로 var은, 선언-초기화(undefined)단계가 동시에 이루어지기에

var x = 5;
function test(){
  console.log(x);
  var x = 2;
  console.log(x);
}
// 결과는 undefined, 2

이렇게 선언되지 않은 var이라도 오류를 내지 않는다.

결론

vartdz가 없기때문에 호이스팅되도 오류를 뿜지 않고
let호이스팅되지만 tdz에 걸리기에 오류를 뿜는다

profile
모르는 것을 모른다고 하기

0개의 댓글

Powered by GraphCDN, the GraphQL CDN