본문 바로가기
Web/JavaScript

[JavaScript] 호이스팅(Hoisting)이란? & 함수 선언문과 함수 표현식에서의 호이스팅

by coding-choonsik 2023. 4. 11.
728x90
반응형
SMALL

1. 호이스팅(hoisting)이란 ❓

  • 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
  • var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
  • letconst 로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음
  • 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언되는 현상을 말하는 것
  • 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음!

2. 함수선언문과 함수표현식에서의 호이스팅

📌 함수선언문과 함수표현식의 차이⬇⬇⬇

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>호이스팅</title>
</head>
<body>
    <h2>호이스팅</h2>
    <script>
        func1(); // 함수선언문 호이스팅
        func2(); // 변수타입으로 함수 선언시 해당하는 변수만 초기화되고 함수는 끌어올려지지 않기 때문에 함수 선언 전에 호출하면 에러
        
        // 함수 선언문
        function func1(){
            alert('func1 호출')
        }
        
        // 함수 표현식
        const func2 = function(){
            alert('fun2 호출')
        }

        //func1();
        //func2(); 
    </script>
</body>
</html>

 

▲ func2()는 변수로 지정했기 때문에 호이스팅되지 않아 실행되지 않음
▲ 에러

 

 

 


MDN: Hoisting

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다

developer.mozilla.org

 

 

728x90
반응형
LIST