JavaScript 21 | 호이스팅 (Hoisting)

호이스팅이란?

• 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑고 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다
• 유효 범위 → 함수 블록 { } 안
• 다시 말해서, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
• 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것.
• 실제 메모리에서는 변화가 없다

호이스팅의 대상

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

  console.log("호이스팅 테스트!")
  var myname1 = "KIM1"; // var 변수 
  let myname2 = "KIM2"; // let 변수 

  이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다

  var myname; // 호이스팅 "선언"
  console.log("호이스팅 테스트!")
  myname1 = "KIM1" // "할당" 은 끌어 올려지지 않기 때문에 그대로 남는다
  let myname2 = "KIM2"; // let은 호이스팅 발생하지 않는다

• 예시 → 함수선언문 vs 함수표현식

  first();
  second();
  
  //함수선언문
  function first() { 
  	  return "111";
  }
  
  //함수표현식
  var second = function() {
    return "222";
  }

  이런 코드가 JS Parser 내부의 호이스팅의 결과로 다음 아래와 같이 순서가 바뀐 것처럼 동작한다

  var second; // 호이스팅 - 함수표현식의 변수값 "선언"
  
  // 호이스팅 - 함수선언문
  function first() { 
    return "111";
  }
  
  first();
  second();
  
  second = function() {
    return "222";
  }

• 호이스팅 예시로 이해

	first(); 
	// 이 함수의 호출은 선언이 뒤에 되어 있더라도 함수선언문으로 선언되어 있기 때문에 호이스팅이 되어서 리턴값이 반환된다
	console.log(second, 1) 
	// second()로 두면 함수표현식은 호이스팅이 되지 않기 떄문에 TypeError: second is not a function 에러 뜸
	// second를 못 찾았기 때문에 undefined

	//함수선언문
	function first() { 
        console.log("나는 1번")
		return "나는첫째";
	} 

	//함수표현식
	var second = function() {
      	console.log("나는 2번")
  		return "나는둘째";
	}

	console.log(second(), "ㅋㅋㅋㅋ", 2)

	/* 
	'나는 첫째'
	undefined 1

	'나는 1번'

	'나는 2번'

	'나는둘째' 'ㅋㅋㅋㅋ' 2
	*/