Hoisting의 클래스 호이스팅
JAVASCRIPT
해당 포스팅에서는 호이스팅(Hoisting)의 클래스 호이스팅에 대해 다룹니다.
JAVASCRIPT
- 자바스크립트 장단점
- 데이터 타입
- 데이터 형 변환
- 불변성을 유지하려면 어떻게..
- 프로토타입
- var, let, const 차이
- 호이스팅(Hoisting) ✔️
- es6 문법 특징과 차이
- this
- 제이쿼리 메서드 중 attr(), prop() 차이
- 화살표 함수와 일반 함수 차이
- 스코프(scope)
- 객체 지향
- 클로저(closure)
- 타입스크립트
- 프로세스
- 스레드, 싱글 스레드
- 콜백 함수 / 재귀 함수 차이
- 콜백 지옥, 콜백 지옥을 해결하는 방법
- promise / 콜백 지옥
- ajax
- 함수 선언식/ 표현식 차이
- 이벤트 버블링 / 이벤트 캡처 예시
- 이벤트 위임 (Event Delegation)
- 렉시컬 환경
- 프로퍼티
- stack이 코드 실행할 때 queue에 미뤄두는 것
- 얕은 복사 / 깊은 복사
- 동기 / 비동기
호이스팅(Hoisting)
해당 포스팅에서는 호이스팅(Hoisting)의 클래스 호이스팅 에 대해 다룹니다.
클래스 호이스팅의 개념
호이스팅(Hoisting)은 JAVASCRIPT 에서 함수 선언이 해당 범위의 최상단으로 끌어올려지는 동작 을 의미합니다. 하지만 클래스 호이스팅은 변수 호이스팅과 유사하면서도 약간 다른 동작 방식을 가집니다. 클래스는 선언되기 전에 접근할 수 없으면 이는 TDZ(Temporal Dead Zone)라는 개념과 연관이 있습니다.
클래스 호이스팅의 동작
TDZ(Temporal Dead Zone)
TDZ는 블록 스코프 내에서 클래스 선언이 이루어지기 전까지의 영역 을 의미합니다. 이 기간 동안 클래스에 접근하려 하면 ReferenceError가 발생합니다. 즉, 클래스 선언이 호이스팅되지만, TDZ로 인해 선언 전에 접근 할 수 없습니다.
클래스 선언문(Class Declaration)
클래스 선언문은 호이스팅되지만, TDZ로 인해 선언 전에 접근할 수 없습니다. 클래스 선언이 실제 코드에 도달하기 전까지는 클래스에 접근할 수 없습니다. 아래 코드에서 class MyClass 선언은 호이스팅되지만, 선언 전에 접근하려 하면 ReferenceError가 발생합니다.
1
2
3
4
5
6
7
8
9
// console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {
constructor(name) {
this.name = name;
}
}
let instance = new MyClass('example');
console.log(instance.name); // 'example'
클래스 표현식(Class Expression)
클래스 표현식은 변수 호이스팅 규칙을 따릅니다. 즉, 변수 선언만 호이스팅되며, 변수에 할당된 클래스는 호이스팅되지 않습니다. 따라서 클래스 표현식으로 선언된 클래스는 선언 전에 접근할 수 없습니다. 아래 코드에서 let MyClass선언만 호이스팅되므로, 초기화 전에는 MyClass에 접근할 수 없습니다.
1
2
3
4
5
6
7
8
9
// console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization
let MyClass = class {
constructor(name) {
this.name = name;
}
};
let instance = new MyClass('example');
console.log(instance.name); // 'example'
클래스 호이스팅과 함수 호이스팅 비교
클래스 호이스팅과 함수 호이스팅의 주요 차이점은 클래스의 경우 TDZ로 인해 선언 전에 접근할 수 없다 는 점입니다. 반면 함수 선언문은 전체가 호이스팅되어 선언 전에 호출이 가능 합니다.
함수 선언문(Function Declaration)
아래 코드에서 함수 square는 선언되기 전에 호출되었지만, 정상적으로 동작합니다. 이는 함수 선언문이 호이스팅되어 최상단으로 끌어올려졌기때문입니다.
1
2
3
4
5
console.log(square(5)); // 25
function square(n) {
return n * n;
}
클래스 선언문(Class Declaration)
아래 코드에서 클래스 MyClass는 선언되기 전에 접근하려 하면 ReferenceError가 발생합니다. 이유는 클래스 선언문이 호이스팅되지만, TDZ로 인해 선언전에 접근할 수 없기 떄문 입니다.
1
2
3
4
5
6
7
8
9
// console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {
constructor(name) {
this.name = name;
}
}
let instance = new MyClass('example');
console.log(instance.name); // 'example'
클래스 선언과 표현식의 예시
클래스 선언문
아래 코드에서는 class Car선언이 정상적으로 이루어지며, car클래스의 인스턴스를 생성하고 메서드를 호출할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
class Car {
constructor(model) {
this.model = model;
}
displayModel() {
console.log(this.model);
}
}
let myCar = new Car('Tesla Model 3');
myCar.displayModel(); // Tesla Model 3
클래스 표현식
아래 코드에서는 let Car에 클래스 표현식을 할당하여 Car 클래스의 인스턴스를 생성하고 메서드를 호출할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
let Car = class {
constructor(model) {
this.model = model;
}
displayModel() {
console.log(this.model);
}
};
let myCar = new Car('Tesla Model 3');
myCar.displayModel(); // Tesla Model 3
마무리
클래스 호이스팅은 JAVASCRIPT에서 중요한 개념으로, 클래스 선언이 코드의 최상단으로 끌어올려지지만, TDZ로 인해 선언 전에 접근할 수 없습니다. 이는 클래스 선언문과 함수 선언문 사이의 주요 차이점 입니다. 이러한 동작을 이해한다면 클래스와 함수의 선언과 사용을 더 명확하게 이해하고, 예기치 않은 오류를 방지할 수 있습니다.