티스토리 뷰

학습/용어집

호이스팅 (Hoisting)

대싕:) 2025. 2. 3. 23:59

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 실제 코드 실행 전에 메모리에 미리 할당되는 동작을 의미합니다. 즉, JavaScript 엔진이 코드를 실행하기 전에 변수 및 함수 선언을 스코프 최상단으로 끌어올리는 것처럼 동작하는 것을 말합니다.

JavaScript 만의 특징인가?

호이스팅(Hoisting)은 JavaScript 고유의 개념이지만, 다른 언어에서도 유사한 동작을 일부 찾아볼 수 있습니다. 그러나 Hoisting이라는 개념 자체는 JavaScript에서 주로 사용되는 개념입니다.

1. JavaScript에서의 호이스팅

JavaScript에서는 변수와 함수 선언이 실행 전에 메모리에 미리 할당되면서 호이스팅이 발생합니다.

console.log(x); // undefined (호이스팅 발생)
var x = 10;
console.log(x); // 10
  •  var x가 스코프의 최상단으로 끌어올려지지만(undefined로 초기화됨), 값(10)은 나중에 할당됨.
foo(); // 정상 실행 (함수 호이스팅)
function foo() {
  console.log("Hello!");
}
  •    함수 선언문은 코드 실행 전 메모리에 먼저 등록되므로 호출이 가능.

2. Python 에서의 동작

Python에서는 JavaScript와 달리, 함수나 변수를 선언 전에 사용하면 오류가 발생합니다.

print(x)  # ❌ NameError: name 'x' is not defined
x = 10
  • Python에서는 변수를 미리 선언하지 않으면 오류가 발생.

그러나, Python에서도 함수는 전체 스크립트가 실행될 때 먼저 메모리에 로드됩니다.

def greet():
    print("Hello!")

greet()  # ✅ 정상 실행
  • JavaScript와 유사하게 함수를 정의하기 전에 호출할 수 있음.

하지만, 함수가 조건문 안에 있으면 다릅니다.

if False:
    def foo():
        print("This will never be defined")

foo()  # ❌ NameError
  • Python에서는 조건문 내부에서 선언된 함수는 실행될 때까지 메모리에 로드되지 않음.

3. C / C++ 에서의 동작

C/C++에서도 변수 선언이 위로 끌어올려지지는 않습니다.

#include <stdio.h>

int main() {
    printf("%d", x);  // ❌ 오류: 'x'를 찾을 수 없음
    int x = 10;
}
  • C에서는 변수 선언 전에 접근할 수 없음.

하지만, 함수 선언(프로토타입)은 미리 정의하지 않아도 사용 가능.

#include <stdio.h>

void sayHello();  // 함수 선언 (필수 아님)

int main() {
    sayHello();  // ✅ 정상 실행
}

void sayHello() {
    printf("Hello, world!");
}
  • C에서는 함수 선언이 없어도(컴파일러가 자동으로 처리), 실행할 수 있음.
  • 하지만 변수는 선언 전 사용 불가 → JavaScript와 차이점.

4. Java 에서의 동작

Java에서도 JavaScript처럼 변수나 함수를 선언 전에 사용하면 오류가 발생합니다.

public class Main {
    public static void main(String[] args) {
        System.out.println(x); // ❌ 컴파일 오류 (x를 찾을 수 없음)
        int x = 10;
    }
}
  • Java에서는 호이스팅이 발생하지 않음.

하지만 메서드는 선언 전에도 호출할 수 있음:

public class Main {
    public static void main(String[] args) {
        greet(); // ✅ 정상 실행
    }

    static void greet() {
        System.out.println("Hello!");
    }
}
  • Java에서 메서드는 클래스가 로드될 때 미리 정의되므로, 실행 전에 선언 위치에 상관없이 호출 가능.
언어 변수 선언 호이스팅 함수 선언 호이스팅 비고
JavaScript ✅ var은 호이스팅됨 (undefined 할당), let/const는 X ✅ 함수 선언문은 호이스팅됨 Hoisting 개념이 존재
Python ❌ 없음 ✅ 함수는 실행 전에 정의되면 호출 가능 조건문 안에서는 적용 X
C/C++ ❌ 없음 ✅ 함수는 선언 없이도 호출 가능 (컴파일러 처리) 변수는 선언 전에 사용 불가
Java ❌ 없음 ✅ 메서드는 선언 위치와 상관없이 호출 가능 클래스 로딩 시 등록됨

호이스팅(Hoisting) 종류

JavaScript에서 함수 호이스팅var 변수 호이스팅은 동작 방식이 다릅니다. 함수는 전체 함수가 호이스팅되지만, var 변수는 선언만 호이스팅되고 값 할당은 나중에 수행됩니다.

1. 함수 호이스팅 (Function Hoisting)

함수 선언문(function 키워드 사용)은 전체 함수가 호이스팅되므로 선언 위치보다 앞에서도 호출 가능합니다.

예제: 함수 선언문 Hoisting

sayHello(); // ✅ 정상 실행 (함수 전체가 호이스팅됨)

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

호이스팅 과정

// 실행 전에 JavaScript가 내부적으로 아래처럼 처리
function sayHello() {  // ✅ 함수 전체가 메모리에 등록됨
  console.log("Hello!");
}

sayHello(); // 정상 실행
  • 함수 선언문은 실행 전에 메모리에 먼저 로드되므로, 선언보다 앞에서 호출해도 문제없음.

2. var 변수 호이스팅 (Var Hoisting)

var로 선언한 변수는 선언만 호이스팅되고, 값 할당은 원래 위치에서 실행됩니다.
따라서, 선언 전에 접근하면 undefined가 반환됩니다.

예제: var 변수 Hoisting

console.log(name); // ❌ undefined (호이스팅되었지만 값은 없음)
var name = "Alice";
console.log(name); // ✅ "Alice"

호이스팅 과정

// 실행 전에 JavaScript가 내부적으로 아래처럼 처리
var name;  // 선언만 호이스팅 (값 할당은 X)

console.log(name); // undefined (초기값 없음)
name = "Alice";  // 실제 값 할당
console.log(name); // "Alice"
  • 변수 선언(var name;)은 호이스팅되지만, 값("Alice")은 호이스팅되지 않음.
  • 따라서, 선언 전에 변수를 사용하면 undefined가 출력됨.
구분 함수 선언문 Hoisting var 변수 Hoisting
호이스팅 대상 함수 전체 🟡 변수 선언만 (undefined 초기화)
호출 가능 여부 ✅ 함수 코드 자체가 할당됨 ❌ undefined로 초기화
선언 전 호출 가능? ✅ 가능 (정상 실행) ❌ 불가능 (undefined 반환)
예제 function foo() {} var x = 10;
에러 여부 ❌ 없음 ❌ undefined 출력
함수 표현식 (var) ❌ TypeError 발생 ❌ undefined로 초기화

💡 핵심 요약

  • 함수 선언문(function foo() {})은 전체가 호이스팅됨 → 선언 전에도 호출 가능.
  • var 변수는 선언만 호이스팅되고, 값은 나중에 할당됨 → undefined 발생.
  • 함수 표현식(var foo = function() {};)은 호이스팅되지만 undefined가 되어 호출하면 TypeError 발생.
  • let과 const도 호이스팅되지만 "Temporal Dead Zone(TDZ)"에 있기 때문에 선언 전 사용하면 ReferenceError 발생.

3. 함수 표현식과 var 호이스팅 차이점

var로 선언된 함수 표현식은 undefined로 초기화되므로 호출하면 TypeError 발생합니다.

예제: var 함수 표현식 호이스팅

console.log(greet); // ❌ undefined
greet(); // ❌ TypeError: greet is not a function

var greet = function () {
  console.log("Hi!");
};

 

호이스팅 과정

var greet;  // 변수 선언만 호이스팅 (초기값: undefined)

console.log(greet); // undefined
greet(); // ❌ TypeError: undefined() 호출 불가능

greet = function () {
  console.log("Hi!");
};
  • greet 변수는 선언만 호이스팅되고, 값 할당은 나중에 이루어짐.
  • 함수를 실행하려 했을 때 undefined()를 호출하므로 TypeError 발생.

let & const의 호이스팅

let과 const도 호이스팅되지만, 선언 전에 접근하면 ReferenceError가 발생합니다.

예제: let과 const의 호이스팅

console.log(age); // ❌ ReferenceError: Cannot access 'age' before initialization
let age = 25;
console.log(city); // ❌ ReferenceError
const city = "Seoul";

이유:

  • let과 const도 호이스팅되지만 "Temporal Dead Zone(TDZ)"에 있기 때문.
  • 즉, 선언 전에 변수를 사용하면 에러가 발생.

💡 결론:

  • 호이스팅을 완전히 피할 수는 없지만, 혼란을 줄이려면 let과 const를 사용하는 것이 좋습니다.
  • 함수 선언문은 상단에 배치하는 것이 가장 안전합니다. 🚀

'학습 > 용어집' 카테고리의 다른 글

데이터베이스  (0) 2025.01.22
프런트엔드 프레임워크(Front-end Framework)  (0) 2025.01.21
Nods.js  (0) 2025.01.19
libuv 라이브러리(Node.js)  (0) 2025.01.19
클라우드 컴퓨팅(Cloud Computing)  (1) 2025.01.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함