[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)

: var를 통해 정의된 변수의 선언을 유효 범위의 최상단으로 끌어올리는 행위.

  변수의 선언부만 분리하여 상단으로 끌어올리고, 메모리할당은 별도로 진행됩니다.

 

개발자가 아래와 같이 코딩하게 되면,

if(true){
  var name = 'A';
}
console.log(name);

 

자바스크립트는 호이스팅을 통해 아래와 같이 해석하게 됩니다.

var name;	// 선언
if(true){
  name = 'A';	// 할당
}
console.log(name);

 

var의 유효범위

자바스크립트의 var는 함수 블록function{ } 안에서 유효합니다. (var는 함수 스코프에서 유효)

 

아래와 같이 짜여진 코드는

function func1(){
  if(true){
    var name = 'A';
  }
  console.log(name);
}

function func2(){
  for(var i=0; i<5; i++){
    // 실행문들
  }
  console.log(i);
}

if(true){
  var score = 100;
}
console.log(score);

 

 

호이스팅을 통해 아래와 같이 해석됩니다.

var score; // 선언

function func1(){
  var name; // 선언

  if(true){
    name = 'A'; // 할당
  }
  console.log(name);
}

function func2(){
  var i; // 선언

  for(i=0; i<5; i++){ // 할당
    // do something
  }
  console.log(i);
}

if(true){
  score = 100; // 할당
}
console.log(score);

 

함수 호이스팅

함수도 최상단으로 끌어 올려져 호이스팅 됩니다.

그래서 함수 선언 이전에 함수를 호출해도 정상 작동하게 됩니다.

여기서함수선언식과함수표현식의 차이가 나타납니다.

함수 선언식 : function 함수명(){};

함수 표현식 : var 함수명 = function(){};

 

아래과 같이 함수를 var로 선언하게 될 경우

sayHello();

var sayHello = function(){
  console.log('Hello world!');
}

호이스팅을 통해 아래와 같이 해석됩니다.

var sayHello;

sayHello();

sayHello = function(){
  console.log('Hello world!');
}

var sayHello는 변수이기 때문에,

sayHello()가 호출은 되지만, 그 변수 내부는 비어있기 때문에 아무것도 실행되지 않습니다.

 

 

변수, 함수 호이스팅 우선순위

실행 순서는

변수선언 -> 함수선언 -> 함수할당 -> 변수할당

으로 진행됩니다.

 

같은 이름을 가질 경우 뒤에 실행된 부분이 우선순위가 높아,

나중에 할당된 값이 이전에 할당된 값에 덮어씌워집니다.

 

아래와 같이 코드가 짜여져 있을 경우

var sayHello = "hello";

function sayHello() {
  console.log("hello world");
}
function sayGoodbye() {
  console.log("ok bye....");
}

var sayGoodbye = "bye";

console.log(typeof sayHello);
console.log(typeof yourName);

아래와 같이 호이스팅 되어

var sayHello;
var sayGoodbye;
function sayHello() {
  console.log("hello world");
}
function sayGoodbye() {
  console.log("ok bye....");
}

sayHello = "hello";
sayGoodbye = "bye";

console.log(typeof sayHello);
console.log(typeof sayGoodbye);

콘솔에는 모두 "String"이 출력됩니다.

 

let과 const 호이스팅

let, const도 호이스팅이 일어나지만 초기화 되기전까지temporal dead zone에 머물러 있습니다.

(잠시 죽어있는 곳이라니 살벌해라....)

 

temporal dead zone은

변수가 초기화, 할당이 되기 전까지 잠시 머무는 곳으로,

이 곳에 있는 변수는 참조할 수 없습니다.

 

아직 부족해서 죄송합니다.

일하면서 공부하게 된 내용을 정리해 둔 것이라, 아직 많이 부족합니다.

추가로 알게 된 내용은 날짜와 함께 수정해 두겠습니다 :)

오늘도 칼퇴하쎄요

 

(아래에 참고한 블로그 추가해 두겠습니당!! 많은 천재 블로거분들 오늘도 감사합니다^^)

yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting

블로그 주소 이쁘게 가져오는 법 아시는 분 댓글 좀 부탁드려요..... :(