함수 호이스팅(Hoisting)

이 전 글에 변수 호이 스팅에 관련한 글을 올렸었는데,

함수도 호이 스팅이 되기 때문에 이 주제에 대해 관련하여 공부한 것을 기록해 본다.

 

var 키워드로 선언된 모든 변수는 어느 부분에서 선언 되더라도 위로 끌어올려진다.

함수 또한 변수에 할당되는 객체이기 때문에 동일한 방식이 적용된다.

 

아래 예제를 봐 보면

function isDataA(){ // 전역에 선언된 함수 선언문 - 1
	console.log('out-A');
}


function isDataB(){ // 전역에 선언된 함수 선언문 - 2
	console.log('out-B');
}


function setData(){
	console.log(typeof isDataA); // ---- A
    console.log(typeof isDataB); // ---- B
    
    isDataA(); // ---- C
    isDataB(); // ---- D
    
    function isDataA(){ // 함수 선언문 으로 정의된 함수 - 3
    	console.log('in-A');
    }
    
    var isDataB = function(){// 기명 함수 표현식 - 4
    	console.log('in-B');
    }
}

setData();

 

위 코드를 실행해 보면 setData 함수 내부에 있는 isDataB() - D 함수 실행 부분에서 오류가 난다.

오류 메세지는 isDataB() - D를 찾을 수 없다고 한다. 

 

setData 함수 내부에 있는

console.log(typeof isDataA); 이 부분은 -> function

console.log(typeof isDataB); 이 부분은 -> undefined

 

가 출력이 된다.

왜 그럴까?

그 이유는 setData 함수 내부에 선언된 isDataA - 3과 isDataB - 4 이 호이스트 되어서

 

console.log(typeof isDataA); 처음엔 전역에 선언된 isDataA - 1 함수였는데 내부의 isDataA - 3 이 덮어 씌워졌고,

console.log(typeof isDataB); 처음엔 전역에 선언된 isDataB - 2 함수 였는데 내부의 isDataB - 4 가 덮어 씌워져서

 

콘솔 로그가 찍히는 출력 값을 보면 하나는 

console.log(typeof isDataA); // function 이건 setData 함수 내부에 있는 isDataA - 3 이여서 function이라는 출력을 값이 나왔고,

 

console.log(typeof isDataB); // undefined 이건 setData함수 내부에 있는 isDataB - 4 가 선언은 되었지만 순서상 초기화가 안되어 있어서 undefined를 출력한 것이다.

 

그래서 결론을 내보면

setData 함수안에서 isData() 함수를 실행하면 콘솔 로그 in-A 가 출력이 되고,

isDataB() 함수는 undefined라 에러메세지 : 'isDataB is not a function'를 출력한다.

 

 

function setData(){
	console.log(typeof isDataA); // ---- A
    console.log(typeof isDataB); // ---- B
    
    isDataA(); // ---- C
    
    function isDataA(){ // 함수 선언문 으로 정의된 함수 - 3
    	console.log('in-A');
    }
    
    var isDataB = function(){// 기명 함수 표현식 - 4
    	console.log('in-B');
    }
    
    isDataB(); // ---- D
}

setData();

 

위 소스처럼 isDataB 함수의 위치를 아래로 옮기면 에러없이 정상 동작한다.

 

이렇게 함수도 호이 스팅이 되는데 변수처럼 선언하는 기명 함수 표현식과, 일반적으로 많이 사용하는 함수 선언문은

호이 스팅도 약간 차이가 있는데 

 

함수 선언문으로 작성되면 어디 선언이 되어도 최상의로 호이스트가 되고,

기명 함수 표현식으로 작성되면 이건 변수처럼 호이스트가 된다고 생각하면 된다.