호이스팅(Hoisting) 이란 ?

목표

• 호이스팅(Hoisting) 이란 무엇인지 이해한다.
• 함수선언문과 함수표현식에서의 호이스팅 차이를 이해한다.
  ` let/const 와 var 변수 선언에서의 호이스팅 예시
• 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅에 대해 이해한다.

호이스팅 (Hoisting)의 개념

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

호이스팅이란

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모와서 유효 범위의 최상단에 선언한다 .

○ 자바스크립트 Parser 가 함수 실행전 해당 함수를 한번 훑는다.
○ 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
○ 유효 범위 : 함수 블록{} 안에서 유효

• 즉 , 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
  ○ 실제로도 코드가 끌어올려지는 건 아니며 , 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
  ○ 실제 메모리에서는 변화가 없다.

호이스팅의 대상

• var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.
  ○ var 변수/함수의 선언만 위로 끌어 올려지며 , 할당은 끌어 올려지지않는다.
  ○ let/ const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
• 간단한 예시 (var 변수 vs let/ const 변수 )

함수선언문 에서의 호이스팅

• 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트ㅡㄹ 해석할 때 맨 위로 끌어 올려진다.

function printName(firstname)    //함수 선언문			var result = inner();    // 선언 및 할당
 console.log(typeof inner);  // > "function"
console.log("name is " + result);// "name is inner value" 

	function inner () {
		return "inner value";
	}

}

printName(); // 함수호출

함수표현식에서의 호이스팅

• 함수 표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.

-- 함수표현식에서는 선언과 할당의 분리가 발생한다.

1. 함수표현식의 선언이 호출보다 위에 있는 경우 -정상출력

function printName(firstname){
	var inner: // [hoisting] 함수표현식의 변수값"선언"
	var result ; //[Hoisting] var 변수값 "선언"


  inner = function (){        //함수표현식 "할당"
			return "inner value"
	}
}


		result = inner (); //함수 호출
		console.log("name is" +result );
}

printName();   // > "name is inner value"

-함수표현식보다 함수선언문을 더 자주 사용하지만, 어떤 코딩컨벤션에서는 함수표현식을 권장하기도 한다.
즉, 어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋다.

TIP 호이스팅 사용 시 주의

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
let/const를 사용한다.
var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?
ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.
따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.