class의 호이스팅

hoisting이란?

변수와 함수의 선언문을 해당 스코프의 꼭대기로 끌어올리는 동작을 의미한다.

이 과정에서 선언문 자체는 옮겨지지만, 함수 표현식의 대입문을 포함한 모든 대입문은 끌어올려지지 않는다.

 

예시

console.log(a) // undefiend var여서 호이스팅 됬지만 undefiend로 초기화 상태
var a = 1;
console.log(a) // 1     1로 초기화 상태

console.log(b) // Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c); // ReferenceError
const c = '1';

print()  // d

function print() {
  console.log('d')
}

print2()  // error

const print2 = () => {
  console.log('e')
}

 

 

class는 객체를 생성하는 생성자 함수이다.

하지만, 함수 선언과 클래스 선언은 차이점이 있다.

함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 호이스팅이 일어나지 않는다.

클래스를 사용하기 위해서는 클래스를 먼저 선언해야 하며, 그렇지 않으면 ReferenceError가 발생한다.

 

class 선언식

// 클래스 선언 전 클래스 사용 -> 에러 발생
var apple = new Company('Apple');


// 클래스 선언 Class declaration
class Company {
  constructor(name) {
    this.name = name;    
  }
}

// 클래스 선언후 객체 인스턴스화 해서 사용해야 함.
var microsoft = new Company('Microsoft');

 

 

class 표현식

// var Square 출력
console.log(typeof Square);   // => 'undefined'

//Throws TypeError: Square is not a constructor
var mySquare = new Square(10);

// 클래스 표현식
var Square = class {
  constructor(sideLength) {
    this.sideLength = sideLength;    
  }
  
  getArea() {
    return Math.pow(this.sideLength, 2);
  }
};

// 올바른 사용 위치
var otherSquare = new Square(5);

Square 클래스는 var Square = class {...} 형태의 변수 선언문처럼 클래스를 선언했기 때문에 var Square는 undefined가 출력되지만,

클래스 선언 전에 var mySquare = new Square(10)를 실행하면 undefined를 생성자로 호출하려고 시도하는 형태라 JavaScript는 TypeError: Square is not a constructor 에러를 발생시킵니다.

 

 

 

자바스크립트 호이스팅(Hoisting) 완벽 이해