일반적인 C,자바와 같은 강언어들은 함수, 변수를 선언한 후, 다음 라인에서 해당 함수와 변수를 사용할 수 있다.

이에 반해 자바 스크립트에서는 함수 또는 변수 선언 전에 해당 함수 또는 변수를 사용해도 에러를 내지 않는데 이러한 현상을 호이스팅이라 한다.

자바스크립트는 함수와 변수 선언을 실행 전, var 변수를 기억 하고 있어서 컴파일러가 에러를 발생 시키지 않기 때문에 발생하는 현상이다.

호이스팅 현상은 var 키워드와 함수 선언에서만 일어난다.

이러한 호이스팅 같은 유연성은 간혹 프로그래밍 과정에서 오류를 발생시키거 기타 문제를 발생 시킨다.

변수(var)의 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
 //호이스팅(hoisting): 끓어 올림
 //1.변수 호이스팅 , 2.함수 호이스팅
 //변수 호이스팅
  //console.log(a); // Uncaught ReferenceError: a is not defined
  //a=10;
  

 //var b 식으로 선언됬다고 해석-> var b를 해석할 때 위로 끌어올려 선언된것 처럼 해석 
  console.log(b) //undefined :선언은 됬지만 할당은 안됨
  var b =20;

  //실제 실행 순서
 // var b =20; //호이스팅
 // console.log(b) //undefined :선언은 됬지만 할당은 안됨
  
  
  //이러한 호이스팅은 코드의 유연성은 줄수 있지만, 안정성은 떨어뜨린다.

    </script>
</body>
</html>

함수의 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
//함수 호이스팅

getData();

function getData(){
    console.log("hell js world");
}

//실제 실행 순서

// function getData(){  //호이스팅
//     console.log("hell js world");
// }
// getData();

//이러한 안정성 문제를 해결하기 위해서  ES6에서 let,const 가 나왔다.

    </script>
</body>
</html>

해결 방안

호이스팅으로 인한 문제를 해결 하고자 ECMAScript6부터는 let,const와 같은 새로운 문법이 등장했다.