호이스팅이란?

구형 자바스크립트

호이스팅은 구형 자바스크립트에서 발생하는 것이며, 현재 이런 코드가 있다면 개선해야 합니다.

 

호이스팅의 사전적 의미는 다음과 같다.

hoisting
명사
1.끌어 올리기; 들어올려 나르기.

자바스크립트에서 발생하는 호이스팅은 변수를 끌어올린다 라고 생각하고 아래 내용을 보시면 도움이 되겠다.

 

변수 선언

호이스팅이라는 개념을 알기 전 변수 선언에 대한 개념이 필요하다.

 

ECMA6에 들어오면서 JavaScript에는 'let'과 'const'라는 변수선언 예약어가 추가되었다.

이는 var가 가지고 있는 문제를 해결하기 위해서 만들어진 것이라고 한다.

 

var 변수선언의 가장 큰 특징은, 블록 스코프가 없다는 것이다.

 

블록 스코프가 없다는 것은, 변수의 영향범위를 산정하기 어렵다는 의미이다.

다음의 예를 보면 쉽게 이해할 수 있다 .

 

if (true) {
  var test = true; // 'var'를 사용하면
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

if (true) {
  let test = true; // 'let' 또는 'const'를 사용하면
}

alert(test); // Uncaught ReferenceError: test is not defined

 

 

var

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다.

블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근이 가능하다.

 

for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

함수 내에서는 접근이 가능하지만, 함수를 벗어나게 되면 접근이 불가능하다.

 

또한 var는 재선언이 가능하다

 

// let으로 선언된 변수는 재선언이 불가능하다.
let test;
let test; // SyntaxError: 'test' has already been declared

var user = "Pete";
var user = "John"; // 여기에서 'var'는 아무런 동작을 수행하지 않고, 에러도 발생하지 않는다.

alert(user); // John

var의 선언은 함수가 시작될 때 처리된다.

전역에서 선언했다면, 스크립트가 실행되기 전에 처리된다.

 

다음의 예제를 보면 이해가 될 것이다.

다음의 3가지 function은 모두 동일하게 동작한다.

function sayHi() { 
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();


function sayHi() { // 블록스코프가 없기 때문에 동일하게 동작
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

여기에서 '호이스팅'이 발생한다.

 

호이스팅

자바스크립트의 코드 내에서 변수 선언이 끌어올려지는 것을 의미한다.

 

방금 예제에서 보였듯이 자바스크립트 내부에서는 변수선언을 최상단에서 수행한다.

var로 선언된 변수를 모두 함수 최상단으로 이동시켜 선언하도록 되어있다.

 

위의 예제를 다시 보자.

function sayHi() { 
  phrase = "Hello"; 

  alert(phrase);

  var phrase; // 선언된 변수
}
sayHi();


//자바스크립트 내부에서는 다음과 같이 동작한다.(호이스팅)
function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

이처럼 변수를 함수의 최상단에서 선언하도록 되어있다.

그렇다면, 변수에 값이 바로 할당된다면 어떻게 될까?

 

function sayHi() {
  alert(phrase);

  var phrase = "Hello";
}

sayHi();

이 경우에 sayHi 함수의 결과는 undefined이다.

변수의 선언은 호이스팅 되지만, 값의 할당은 호이스팅되지 않기 때문이다.

 

위 코드는 자바스크립트에서 다음과 같이 작성한 것과 동일하게 동작한다.

function sayHi() {
  var phrase;
  alert(phrase);

  phrase = "Hello";
}

sayHi();

요약

1. var, const, let의 차이

	블록스코프	값 재할당	초기 값 필수 부여
var	X	O	X
let	O	O	X
const	O	X	O

2. 호이스팅

 - 호이스팅은 var 변수가 최상단에서 선언될 수 있도록 자바스크립트 내부에서 동작하는 것이다.

 - 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않는다.

 

다음

다음 포스트는 IIFE(즉시실행함수)로 진행할 예정입니다.