Javascript) 호이스팅(Hoisting) 이란?

이 글을 아래 링크를 공부하며 정리한 글입니다. 

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

---

호이스팅(Hoisting) 이란?

• Hoist : 게양하다
• 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 
• 자바스크립트 parser가 함수 실행전 해당 함수를 한 번 쭉 훑은 다음, 함수 내 필요한 변수 값들을 모두 모아서 유효 범위(함수 블럭 { .. } 내)의 최상단에 선언
• 즉, 현재 실행되는 라인에 필요한 변수가 해당 라인 아래쪽에 위치해있다면 자바스크립트 파서가 내부적으로 끌어올려 사용할 수 있게 처리하는 것인데 실제 코드 위치는 그대로이며 메모리에도 변화가 없다. 

호이스팅의 대상

• var 변수 선언
• 함수 선언문 
• let, const 변수 선언이나 함수 표현식은 호이스팅이 발생하지 않고, 변수에 할당되는 라인도 호이스팅 되지 않음 
• 예시1

  console.log("hi")
  var v = "hi1"
  let v2 = "hi2"
  
  // 코드가 이렇게 생겼다면 parser는 아래와 같이 호이스팅 
  
  var v // var 선언을 호이스팅
  console.log("hi")
  v = "hi1" // var 선언에 대한 할당 부분은 호이스팅 되지 않음 
  let v2 = "hi2" // let 선언은 호이스팅되지 않음​

   
• 예시2

  func1()
  func2()
  
  // 함수선언문
  function func1(){
  	console.log("hi")
  }
  
  // 함수표현식
  var func2 = function() {
  	console.log("hi2")
  }
  
  
  
  // 호이스팅 결과 >>
  
  
  
  var func2 // var 변수는 호이스팅되지만 그 변수에 할당한 함수표현식은 호이스팅되지 않음 
  function func1(){ // 함수 선언문 호이스팅됨
  	console.log("hi")
  }
  func1()
  func2() //이 변수에 할당된 함수는 호이스팅되지 않아서 에러 발생 
  
  func2 = function() { // 할당은 호이스팅되지 않음
  	console.log("hi2")
  }​

 

함수 호이스팅

• 함수선언문은 구현 위치와 상관없이 호이스팅돼서 브라어저가 스트립트 읽을 때 맨 위로 올라간다.
• 그러나 함수표현식은 함수가 할당된 var 변수 자체는 호이스팅 되지만 함수가 할당되는 부분은 호이스팅되지 않기 때문에 함수표현식은 호이스팅되지 않는다고 볼 수 있다. 

 

호이스팅 우선순위

1. var 변수
2. 함수선언문

• 변수와 함수 이름이 같을 경우 
  • var 변수 선언과 동시에 값이 할당된 경우 -> 변수가 덮어써져서 변수 win!
  • var 변수 선언만 되고 값이 할당되지 않은 경우 -> 변수보다 함수가 win!

 

호이스팅 주의사항

• 코드의 가독성과 유지보수를 위해 최대한 발생하지 않도록 하는 것이 좋음 
• 그러니까 가급적 함수와 변수는 코드 상단에 선언
• let , const를 사용하면 호이스팅이 발생하지 않음 

---

References

• https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html