[JavaScript] 함수 유효범위 - 호이스팅(hoisting)

JavaScript의 Scope는 Block(블록 { } ) 이 아닌 Function(함수)에 의해 정해집니다.

블록 안에서 선언된 변수 들은 블록 안에서 끝나지 않고 Function(함수) 단위로 가게 됩니다.

그에 해당 하는 테스트 샘플 코드입니다.

function foo()
{
		console.warn('__Before__');	
		typeof first ==='number' ? console.log('first exist') : console.error('first not exist');
		typeof Internal==='function' ? Internal() : console.error('not exist');
		/*
			first not exist  'number'로 비교하였지만 undefined로 호이스팅(끌어올리다) 
			Internal exist   'function' 으로 비교하여 참조 의 호이스팅이 되는점 확인 -> 실제 함수 사용까지 가능)

		*/
		var first = 1;
		function Internal(){console.log("Internal exist");}

		console.warn('__after__');
		typeof first ==='number' ? console.log('first exist') : console.error('first not exist');
		typeof Internal==='function' ? Internal() : console.error('not exist');

		/*
			first exist 
			Internal exist 
		*/
		if(first===1){var third = 3;};

		typeof third==='number' ? console.log('third exist') : console.error('third not exist');
		
		/*
			third exist  var third 선언은 if(first===1) 분기를 타고 블록(block) 안에 선언되었지만 밖에서도 참조가 가능
		*/

}
foo();

호이스팅(일명 끌어올리기) 에 대해서는 매우 중요하다기보다는 

이런느낌으로 알고 지나가는게 좋을 것 같습니다.

펑션은 호이스팅으로 참조까지 가능하지만

변수(var)는 undefined로 호이스팅이 되는점만 알면 되며 

let 과 const에 대해서는 호이스팅은 되지않는다고 는 하지만 실제로 디버거시에 undefined로

호이스팅되는점은 확인은 되는데

되든 안되든 변수의 경우 undefined로 올라오기 때문에 이에 대해서는 더 깊게 생각하지 않기로

했습니다.