Hoisting(호이스팅)

sangha__ju·2020년 6월 30일
0

Hoisting이란?

var 키워드로 생성된 변수 혹은 함수를 javascript 엔진이 스코프 최상위까지 끌어올리는 것을 말합니다. 선언문만 호이스팅이 되며 할당이 있는경우는 되지 않습니다. 또한, let, const는 호이스팅 되지 않습니다.

예시를 들어보겠습니다.

showName();

function showName() {
  console.log(name);
  var name = "Mr.Ju";
  console.log(name);
}

위 예시에는 호이스팅의 특징 2가지가 포함되어 있습니다.

  • 변수 호이스팅
  • 함수 호이스팅

실행 결과를 확인하면 다음과 같습니다.

변수 호이스팅

해당 코드는 다른 프로그래밍 언어였으면 첫번째 console.log(name)에서 에러가 발생해야 하지만 자바스크립트의 경우 엔진에서 아래와 같이 해석을 하게 됩니다.

showName();

function showName() {
  console.log(name);
  var name = "Mr.Ju";
  console.log(name);
}

변수 선언문 및 초기화시 해당 함수 안에서 최상단으로 올라가게 됩니다. 이게 변수 호이스팅입니다.
설명이 다소 어려울 수도 있는데 쉽게 생각하면 선언문, 초기화는 무조건 함수 최상단으로 먼저 읽혀진다고 생각하시면 됩니다.

함수 호이스팅

함수 호이스팅도 같은 맥락입니다. 변수 호이스팅이 변수 선언문 및 초기화였다면 함수는 함수 선언문 방식 일때만 호이스팅이 됩니다.
함수 표현식, new 키워드를 통한 함수 정의시에는 호이스팅이 안된다는 점만 기억하시면 됩니다.

//함수 선언문(호이스팅 O)
showName();

function showName() {
  console.log(name);
  var name = "Mr.Ju";
  console.log(name);
}

//함수 표현식(호이스팅 X 에러 발생)
showName();

var showName = function() {
  console.log(name);
  var name = "Mr.Ju";
  console.log(name);
}

//new Function 객체 생성(호이스팅 X 에러 발생)
showName();

var showName = new Function("", console.log("Mr.Ju"));
profile
아름다운 것과 퇴근 후 마시는 맥주를 좋아하며 사람과의 소통을 중요히 여기는 개발자

0개의 댓글