[JS] 변수와 함수 호이스팅

K00·2022년 9월 2일
0
post-thumbnail

자바스크립트 엔진의 변수 처리 과정

자바스크립트 엔진은 변수 처리 과정을 두가지에 걸쳐 진행함
1. 선언단계 : 변수의 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.(변수의 이름을 비록한 모든 식별자는 실행 컨텍스트에 등록됨 )
2. 초기화단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
! 초기화란: 변수가 설정된 이후 최초로 값을 할당하는것

자바스크립트 엔진의 변수선언 시점

자바스크립트 엔진은 코드를 한줄씩 실행하는 런타임에 앞서 변수 선언을 포함한 모든 선언문의 평가 과정을 거쳐서 소스코드를 실행하기 위한 준비를 한다.
즉 자바스크립트 엔진은 변수선언이 소스코드의 어디에 있든 상관없이 다른 코드들보다 먼저 실행됨

변수 호이스팅

각 변수(var, let, const)들의 특징

var

변수 선언단계와 초기화 단계가 평가과정에서 동시에 진행.
따라서 변수 선언문 도달전에 var변수를 출력 해보면 참조 에러가 아닌 초기화 되어있는 undefined가 출력 되는것을 확인할 수 있다

let,const

변수 선언단계는 평가과정에서 실행 , 초기화 단계가 런타임에 실행
변수의 선언과 초기화(메모리 할당) 사이의 접근할 수 없고 Reference Error 를 발생하는 것이 TDZ(일시적 사각지대)이다.

console.log(V,L,C)

var V = 10;   //undefined
let L = 10;   //Reference Error 
const C = 10; //Reference Error

함수 호이스팅

함수 표현식의 호이스팅은 변수 호이스팅이랑 다르다,
선언문의 평가단계에서 함수객체를 생성하고 식별자에 함수를 할당함 그리고 함수 내부의 코드 변수 포함 런타임 이전에 할당까지 완료가 되어있다.

    console.log(testVar); //undefined
    console.log(testLet); //ReferenceError: Cannot access before initialization

    test()//먼저 호이스팅된 함수 
   
 	var testVar = 20;
	let testLet = 20;


    function test() {
      testVar = 10; //10
	  testLet = 10; //ReferenceError: Cannot access before initialization
    }

0개의 댓글