자바스크립트 - 클래스 기본 개념

Class의란?

Class는 사실 함수이다.

함수는 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class표현식과 class선언 두 가지 방법을 제공한다.

 

Class의 선언

class를 정의하는 한 가지 방법은 class 선언을 이용하는 것이다.

class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

 

단, 함수 선언과 클래스 선언의 중요한 차이점은 호이스팅 여부이다.

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

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

const person = new Person(); // ReferenceError 오류

class Person {}

 

여기서 호이스팅(Hoisting)이란?

변수를 선언하기 전에 초기화하여 사용할 수 있는 것을 말한다. 하지만 초기화 하지 않으면 사용할 수 없다.

console.log(num); // num이라는 변수를 선언하지 않았으므로, Reference Error가 발생

num = 6; // 초기화
num + 7;
// 선언
var num; 
/* num이 선언되지 않더라도 에러를 내지 않습니다 */

자바스크립트는 초기화가 아닌 선언만 끌어올리기(Hoist) 때문이다.

만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면, 그 값은 undefined로 지정됩니다. 

 

class 표현식

class 표현식은 class를 정의하는 다른 방법이다. 

class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다.

이름을 가진 class 표현식의 이름은 클래스의 body에 대해 local scope에 한해 유효하다.

// 이름 없는
let Person = class {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
};
console.log(Person.name);
//output : "Person"


// 이름 있는
let Rectangle = class Person2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
};
console.log(Rectangle.name);
//output: "Person2"

 

Class body와 method 정의

Class body는 중괄호 {}로 묶여 있는 안쪽 부분이다. 

이곳은 method나 constructor와 같은 class members를 정의할 곳이라고 생각하면 된다.

여기서 constructor란?

constructor 메소드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드이다.

"constructor"라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있다.

만약 클래스에 여러 개의 constructor 메소드가 존재한다면 SyntaxError가 발생할 것 이다.

또, constructor는 부모 클래스의 constructor 를 호출하기 위해 super 키워드를 사용할 수 있다.