호이스팅(Hoisting)

윤한영·2022년 12월 1일
0

React

목록 보기
2/10

🙋‍♂️ 수정이 필요하거나 부족한 부분이 있다면 언제든지 알려주세요!

📚호이스팅(Hoisting)의 개념

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위(스코프)의 최상
단에 선언하는 것 같은 현상을 말함.


👀호이스팅이란?

자바스크립트 함수는 실행되기 전에 함수 안에 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.

  1. 자바스크립트 Parser가 하수 실행 전에 해당 함수를 한 번 훑는다.
  2. 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
  3. 유효범위 : 함수 블록 { } 안에서 유효하다.
  4. 실제로 코드가 끌어 올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것
  5. 실제 메모리에 변화는 없음

✍호이스팅의 대상

  • var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다. (미리 공간을 지정해줘서 ‘undifined’ 출력)
  • let, const 변수 선언과 함수표현식에서는 호이스팅이 안 일어난다?
    • 호이스팅은 되지만, ‘Cannot access ‘{변수명}’ before initialization’ 이라고 뜸(+추가하자..)
  • 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

"use strict"

console.log(myname);
var myname = "HEEE"; // var 변수 
let myname2 = "HEEE2"; // let 변수 
// undefined 출력

foo();  // 함수 선언문
foo2(); // 함수 표현식

function foo() {    // 함수선언문
    console.log("Hello!");
}
var foo2 = () => {  // 함수표현식 -> Hosting은 되지만 오류 발생
    console.log("Hello2!");
}
// Hello 출력되고,
// 오류 발생

0개의 댓글