자바스크립트 - 호이스팅(hoisting)

hoist, 호이스트란

'끌어올리는' 이미지이다.

 

그 동안 함수를 작성할때 코드의 윗 줄에서 작성하고

아랫 줄에서 사용하곤 하였는데

 

강의를 듣다보니 이와 다르게 아직 함수 선언이 되지 않은 상단 부분에서 함수를 사용하는 코드를 보았다.

이게 어떻게 가능한지 잊지않게 메모한다.

 

 

자바스크립트에서 함수 선언은 호이스팅(hoisting)이라는 메커니즘에 의해 이루어진다.

호이스팅은 변수 및 함수 선언을 코드의 맨 위로 올려서 처리하는 것을 의미한다.

즉, 변수와 함수가 선언된 위치와 상관없이 함수를 사용할 수 있다.

 

이는 코드 실행 전 컴파일러에 의해 처리된다.

 

함수가 전역 범위에서 선언된 경우 해당 함수는 전역 함수로 간주되어 어디서든 호출할 수 있다.

예시)

sayHello(); // 호출 가능

function sayHello() {
  console.log("Hello!");
}

코드 실행 결과

Hello!

 

위 코드에서 sayHello 함수는 선언 전에 호출되었지만 호이스팅으로 인해 사용이 가능했다.

 

이와 다르게 지역 범위에서 선언된 경우 함수는 해당 지역 밖에서는 사용이 불가능하다. 

예시)

writeText(); // 호출 불가

function sayHello() {
  function writeText() {
    console.log("Hello!");
  }
}

코드 실행 결과

writeText is not defined

 

또, 변수에 함수를 할당한 경우 변수도 호이스팅되지만, 할당된 함수는 호이스팅되지 않는다.

예시)

sayHello(); // 호출 불가

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

코드 실행 결과

sayHello is not a function

 

 

변수의 호이스팅

console.log(x);

실행 결과

ReferenceError: x is not defined

아무런 선언문이 없었을 경우 변수 x가 정의되지 않았다. 라는 메세지가 나오나

 

let, const로 선언하였을 경우

console.log(x);
let x = 10;

실행 결과

ReferenceError: Cannot access 'x' before initialization

 

console.log(x);
const x = 10;

실행 결과

ReferenceError: Cannot access 'x' before initialization

 

초기화 전 x에 접근할 수 없습니다. 라는 메세지가 나온다.

let과 const로 선언된 변수들은 호이스팅이 되기는 하지만

변수의 선언 전까지는 일시적인 사각지대(Temporal Dead Zone, TDZ)라는 곳에 들어가 있는다.

선언 전 변수에 접근하면 위와 같이 변수에 접근할 수 없다는 에러가 나온다.

 

var로 선언하였을 경우

console.log(x);
var x = 10;

실행 결과

undefined

undefined가 나온다. var로 선언한 변수는 호이스팅되어 해당 스코프의 맨 위로 끌어올려진다

이에따라 console.log(x); var x = 10; 은 실제로는 아래와 같이 처리된다.

var x;
console.log(x); // 여기서 x는 선언되었지만 초기화되지 않았으므로 undefined입니다.
x = 10; // 이제 초기화가 이루어집니다.

 

자바스크립트에서는 호이스팅 매커니즘에 따라 이러한 경우가 발생할 수 있다.

익숙치 않은 이런 기능을 응용하려고 하다가는

의도치않은 상황이 발생할 수 있으니 변수와 함수를 먼저 선언한 후 사용하는 것이 좋다..