24.2. 프로그램언어 자바스크립트(JavaScript)의 호이스팅의 동작

by

프로그램언어 자바스크립트(JavaScript)에서의 변수 호이스팅

변수 호이스팅은 JavaScript에서 변수가 선언되기 전에 참조될 수 있는 현상을 말합니다. 이는 변수가 코드 어디에 있든 상관없이 해당 변수가 함수나 스코프의 맨 위로 끌어올려지는 것을 의미합니다.

예를 들어, 아래와 같은 코드를 살펴봅시다.


console.log(x); // undefined
var x = 5;

위 코드에서 변수 x가 선언되기 전에 참조되었지만, JavaScript는 변수 선언을 맨 위로 끌어올려서 해석합니다. 따라서 위 코드는 실제로는 아래와 같이 해석됩니다.


var x;
console.log(x); // undefined
x = 5;

이러한 동작은 변수를 선언하기 전에 사용할 수 있도록 해주지만, 초기화되지 않은 변수는 undefined로 처리됩니다. 함수 내에서 변수 호이스팅은 함수 전체에 적용되며, 함수 내에서 선언된 변수는 함수의 맨 위로 끌어올려집니다.

변수 호이스팅은 코드를 이해하기 어렵게 만들 수 있으므로, 변수는 항상 해당 스코프의 맨 위에서 선언하는 것이 좋습니다. 이를 통해 코드의 가독성을 높일 수 있습니다.

프로그램언어 자바스크립트(JavaScript)에서의 함수 호이스팅

함수 호이스팅은 자바스크립트에서 함수 선언문이나 함수 표현식이 코드 상단으로 끌어올려지는 현상을 말합니다. 이는 코드 실행 전에 함수가 메모리에 등록되어 변수에 할당되기 때문에 함수를 선언하기 전에 호출할 수 있는 특징을 가지고 있습니다.

예를 들어, 아래와 같은 코드에서 함수 호이스팅이 발생합니다.


sayHello(); // 함수 호출function sayHello() {
  console.log("Hello, world!");
}

위 코드에서 함수 `sayHello`가 선언문으로 정의되었지만, 함수 호출이 선언문보다 먼저 일어나도 정상적으로 동작합니다. 이는 함수 호이스팅으로 인해 함수가 코드 상단으로 끌어올려졌기 때문입니다.

반면 함수 표현식에서는 호이스팅이 발생하지 않습니다. 함수 표현식은 변수에 함수를 할당하는 방식으로 정의되기 때문에 변수의 호이스팅만 일어나고 함수 자체는 호이스팅되지 않습니다.

아래는 함수 표현식을 사용한 예제 코드입니다.


sayHi(); // 에러 발생var sayHi = function() {
  console.log("Hi, there!");
};

위 코드에서는 함수 표현식을 변수 `sayHi`에 할당하고 있습니다. 함수 호출이 선언문보다 먼저 일어나기 때문에 에러가 발생합니다. 이는 변수 `sayHi`의 호이스팅은 일어나지만 함수 자체의 호이스팅은 일어나지 않기 때문입니다.

프로그램언어 자바스크립트(JavaScript)에서의 클래스 호이스팅

클래스 호이스팅은 자바스크립트에서 클래스 선언을 해당 스코프의 맨 위로 끌어올리는 현상을 말합니다. 이는 함수 호이스팅과는 다르게 클래스 선언부만 끌어올려지며, 클래스의 초기화는 호이스팅되지 않습니다.

예를 들어, 다음과 같은 클래스가 있다고 가정해봅시다.


class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

이 클래스를 사용하기 전에 선언하면 클래스 호이스팅이 발생하여 선언부가 스코프의 맨 위로 올라갑니다. 하지만 클래스의 초기화는 호이스팅되지 않기 때문에 클래스를 사용하기 위해서는 선언 이후에 초기화해주어야 합니다.

아래는 클래스 호이스팅이 발생하는 예제 코드입니다.


// 클래스 선언
let myCar = new Car('Toyota', 'Corolla'); // ReferenceError: Cannot access 'Car' before initializationclass Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

위의 코드에서 클래스를 사용하기 전에 선언하였기 때문에 ReferenceError가 발생합니다. 이를 해결하기 위해서는 클래스 선언을 사용하기 전에 위치시켜야 합니다.

프로그램언어 자바스크립트(JavaScript)에서의 let과 const의 호이스팅 특성

자바스크립트에서의 let과 const는 호이스팅(hoisting) 특성을 가지고 있습니다. 호이스팅이란 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미합니다. 하지만 let과 const는 var와는 다르게 선언 단계와 초기화 단계가 분리되어 있어서 호이스팅이 발생하지만 일시적인 사각지대(Temporal Dead Zone)에 빠지게 됩니다.

let과 const의 호이스팅 특성을 예제 코드를 통해 살펴보겠습니다.


console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;console.log(y); // ReferenceError: Cannot access 'y' before initialization
const y = 20;

위의 코드에서는 let과 const로 변수를 선언한 후 초기화하기 전에 변수를 참조하려고 하면 ReferenceError가 발생합니다. 이는 일시적인 사각지대(Temporal Dead Zone)에 빠져 있기 때문입니다. 따라서 변수를 선언한 위치보다 이전에 변수를 참조할 수 없습니다.

프로그램언어 자바스크립트(JavaScript)에서의 호이스팅과 초깃값

자바스크립트(JavaScript)에서 호이스팅(Hoisting)과 초깃값(Initialization)은 중요한 개념입니다.

호이스팅은 변수 및 함수 선언이 해당 스코프의 맨 위로 끌어올려지는 것을 의미합니다. 이는 코드 실행 전에 변수 및 함수가 메모리에 할당되는 것을 의미하며, 선언부만 끌어올려지고 할당은 끌어올려지지 않습니다.

초깃값은 변수를 선언할 때 초기값을 할당하는 것을 말합니다. 변수를 선언하면서 값을 할당하지 않으면 자바스크립트는 해당 변수를 ‘undefined’로 초기화합니다.


// 호이스팅 예제
console.log(x); // undefined
var x = 5;// 위 코드는 실제로는 아래와 같이 해석됩니다.
var x;
console.log(x); // undefined
x = 5;// 초깃값 예제
var y = 10; // y 변수를 선언하고 10을 할당
console.log(y); // 10

Leave a Comment