티스토리 뷰
호이스팅(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
- Remix
- 이진탐색 #중복
- RDBMS
- Angular
- nosql
- vue.js
- oracle
- alpine.js
- REACT
- gcp
- MySQL
- Quasar
- node.js
- svelte
- vue
- SQLite
- PostgreSQL
- Gatsby.js
- Cloud
- JavaScript
- DevOps
- Next.js
- aws
- Azure
- nuxt.js
- hoisting
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |