호이스팅 (Hoisting)

Reference => ** gmlwjd9405 - github 참조 //

개념

호이스팅이란 일반적으로, var 변수와 함수선언문에서 선언 자체가, 코드의 최상단으로 위치하는 것으로 생각되지만, 좀더 명확하게 말해서, 유효한 블록 스코프내의 할당이 아닌 선언 그 자체만을 최상위로 이끌어 올린 후 필요할 때마다 사용하는 것을 말한다.

1. 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
2. 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
3. let/const를 사용한다.

호이스팅의 대상

=> var 변수 선언, 함수선언문
=> 할당이, 아닌 선언 자체만 끌어올려짐
=> let /const 변수 선언, 함수표현식은 호이스팅 발생 X // 블록 스코프가 명확하기 때문

 console.log("martion");

  var thanks = "github"; // var 변수 
  let fastfive = "tommorow"; // let 변수 

/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */

  var thanks; // 실질적으로 변수 thanks가 선언이 끌어올려짐
 
console.log("martion");
  thanks = "github"; // "할당" , 선언은 맨 처음에 이루어짐
  let fastfive = "tommorow"; // [Hoisting] 발생 X

hoist(); // 함수 호출
gravity(); // 함수 호출 

function hoist(){
   console.log("done");
}  // 함수 선언문


var grafity = function(){
     console.log("you can't hoist");
 } // 함수 표현식

=> 결과값 , hoist() : "done"  / grafity() : Error 


// 렌더 과정 풀이

var grafity; // 함수의 변수값 선언이 호이스팅됨

function hoist(){
   console.log("done");
}  // 함수 선언문자체가 호이스팅됨

hosit(); // "done" 출력
grafvity(); // Error

grafity = function(){
     console.log("you can't hoist");
 } // 함수 값 할당

 => 결과적으로 위 값과 동일하다

호이스팅의 우선순위

변수 선언은, 함수선언보다 높이 이끌어진다, 기본적으로 렌더 순서를 확인한다면, 변수 선언 -> 함수 선언 -> 변수 할당 순으로 확인한다.

// 나열 전

var target1 = "boy";

function target1() {
  console.log("girl");
}

function target2() {
  console.log("baby");
}

var target2 = "position";

console.log(target1); //expected => "boy"
console.log(target2); //expected => "position"

// 순서 나열 후

var target1 // 선언 및 할당된 것을 분리해서 선언만 가져옴
var target2 // 선언 및 할당된 것을 분리해서 선언만 가져옴

function target1() {
  console.log("girl");
              }  // 함수 선언문 호이스팅
              
function target2() {
  console.log("baby");
              } // // 함수 선언문 호이스팅


target1 = "boy"; //  값 할당
target2 = "position"; // 값 할당

console.log(target1); //expected => "boy"
console.log(target2); //expected => "position"