[JavaScript] Hoisting에 대하여

Hoisting이란?

Javascript에는 Hoisting이라는 개념이 존재한다. 사전적인 의미는 '끌어올리다'라는 뜻을 가지고 있고, 의미 그대로 변수와 함수의 선언을 자동으로 파일의 가장 상단으로 끌어올려서 처리하는 것을 말한다. 예를 들면 아래와 같다.

Test(); //함수가 선언되기 이전에 참조했는데 정상 작동함

function Test() {
    console.log("Hi");
}

for (var i=0;i<3;i++){
    console.log("Hi")
}

console.log(i) //반복문 안에 있던 지역 변수인데 밖에서도 출력이 됨

// Hi
// Hi
// Hi
// 3

//After Hoisting
var i
for(i=0;i<3;i++){
	console.log("Hi")
}

console.log(i)

var n=1
function test(){
    console.log(n)
    var n=2
    console.log(n)
}

test()
// undefined
// 2

//After Hoisting
var n // 변수 선언
function test(){ // 함수 선언
	console.log(n) //undefined
    n=2
    console.log(n) //2
}
n=1
test()

for(var i=0;i<3;i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}

//0 1 2가 출력될 것 같지만, 3 3 3이 출력됨

//After Hoisting
var i
for(i=0;i<3;i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}

//비동기 처리는 대기 상태에 올려둔 후, 해당 블록이 끝난 후에 처리됨
//따라서 i가 3이 된 후 반복문을 빠져나와서 log가 3번 찍힘

---

Hoisting 해결법

해결법은 간단하다. 변수의 경우, 선언을 var이 아닌 let이나 const로 선언한다. 변수는 선언, 초기화, 할당의 단계를 거쳐서 생성되는데 var은 선언과 초기화가 한번에 이루어지는 반면, let과 const는 선언과 초기화가 분리되어 진행된다. var은 변수 선언과 동시에 값이 할당이 안 되면 undefined가 자동으로 할당된다. 그러나 let과 const는 아무것도 할당이 안 되기 때문에 이 때 변수를 참조하려고 하면 에러가 발생한다. 따라서 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 좋다.

함수의 경우, 함수 선언문이 아닌 함수 표현식으로 나타낸다.

t() //ReferenceError: t is not defined

const t = function Test(){
    console.log('Hi')
}

//익명 함수
const t = function(){
    console.log('Hi')
}

//화살표 함수
const t = () => {
	console.log('Hi')
}