자바스크립트 호이스팅 – 자바스크립트 호이스팅(Hoisting)이란 , 함수 안에 선언되어 있는 변수, 함수 등을 모두 끌어올려서 해당 함수 스코프의 최상단에 선언하는 것을 이야기 합니다.
즉, 함수 내에서 아래쪽에 선언되어 있는 변수나 함수 중 필요한 것들은 미리 다 메모리상에 위로 끌어 올리는 것입니다. 변수보다는 함수 선언문이 더 위에 호이스팅 되게 됩니다.
var 변수와 function 함수 선언문의 호이스팅
호이스팅의 대상은 var 변수 선언과 function 으로 시작하는 함수선언문에서만 호이스팅이 발생하게 됩니다.
아래의 예제는 내부 함수 inner는 아직 선언되지 않은 상태이지만, var result = innert(title) 에서 오류가 발생하지 않습니다.
<body>
<script>
// 호이스팅
function hoistingFunc( title ){
//아직 function 이 선언되지 않은 상태이나 사용가능
var result = inner(title);
console.log( typeof inner );
console.log( "My book's title is " + result );
// 자바스크립트가 시작되며 호이스팅에 따라 위로 끌어 올려져서 먼저 실행됨
function inner( title ) {
// console.log( )
return "[" + title +"]";
}
}
hoistingFunc("Javascript");
</script>
</body>
funcion innner는 가장 하단에 있지만 호이스팅에 의해 가장 위로 끌어올라와져 선언되므로 var result = inner(title)은 오류가 발생하지 않습니다.
반면, 아래와 같이 함수선언문의 아닌 경우에는 오류가 발생을 합니다.
<body>
<script>
// 호이스팅
function hoistingFunc(title) {
//아직 function 이 선언되지 않은 상태 >> 오류 발생!!
var result = innerFunc(title);
console.log(typeof inner);
console.log("My book's title is " + result);
//함수 선언문이 아니므로 호이스팅 되지 않음
var innerFunc = (title) => {
return "[" + title + "]";
};
}
hoistingFunc("Javascript");
</script>
</body>
호이스팅을 피하려면
따라서 호이스팅과 관련하여 아래의 사항을 준수하면 애매한 사항을 피할 수 있습니다.
- 변수나 함수는 항상 선언 후 사용
- use strict 모드의 사용
- 변수 선언으로 var를 사용하지 않고 let, const 사용
점차 시간이 갈수록 var의 사용을 지양하고 let, const 등을 사용하는 추세이나, 아직은 과거의 유지보수할 코드 혹은 잘못된 사용이 있을 수 있으므로 이 개념을 알고 있는 것이 좋다고 생각합니다.
오늘은 자바스크립트 호이스팅에 대한 내용을 정리해보았습니다. 더 상세한 내용은 모질라 MDN 문서에서 확인할 수 있습니다.
호이스팅과 관련하여 자바스크립트 use strict는 이 글을 참조해 보시기 바랍니다.