자바스크립트 호이스팅 Hoisting 이란?? ( 아주 쉽게 설명 )

 

자바스크립트 호이스팅 Hoisting

 

호이스팅이란 변수나 함수가 어디서 선언이 되든지간에 

최상단에 위치하게 되어 동일 스코프 에서는 어디서든 참조 할수 있다는 것을 말한다.

코드로 설명 하면 아주 간단하니 바로 밑에 예제 보자

 

 

addString("가나다", "라마바사");


function addString(str1, str2)
{
    return str1 + str2;
}

 

결과 : 가나다라마바사

 

선언 된적이 없는 것을 참조하려고 할때

addString을 실행 시점에  function addString이 선언되어있지 않으므로 

에러가 나는 상황이지만 정상 동작 한다.  addString 함수를 상단으로 올려서 참조 할수 있도록 해줬다. 

이를 호이스팅 이라고 한다.

위에서 함수 선언은 동시에 초기화가 이루어 지기 때문에 참조 뿐만 아니라 실행도 가능하다.


아래와 같은 함수표현식 스타일은 어떨까?

 

addString("123123", "456456");

var addString = function (str1, str2)
{
     return str1 + str2;
}

 

addString을 함수표현식 스타일로 선언해도 호이스팅 되며, 실행이 될까??

 

내가 구매한 책에서는 불가능 하다고 되어 있었다.

( 역시 IE11 으로 테스트시 에러가 발생한다. )

 

 

 

크롬에서도 실행시에 결과값을 undefined로 예상 했었다.

 

하지만.. Chrome 버전 95.0.4638.54(공식 빌드)에서는 정상적으로 동작한다. 

 

 

이건.. 브라우저와 javascript 엔진 버전상의 처리 방식이 다르므로, 사용시 유의 해야겠다.

 

 

 

실행이 안되는 케이스는 어떤것이 있을까??

 

함수 표현식으로 사용하되 var를 쓰지 않고 let, const를 사용하면 실행이 안된다.

 

addString("123123", "456456");

let addString = function (str1, str2)
{
     return str1 + str2;
}

 

addString("123123", "456456");

const addString = function (str1, str2)
{
     return str1 + str2;
}

 

 

결과 : Uncaught SyntaxError: Identifier 'addString' has already been declared