[JavaScript] : JS의 꽃 CLASS (1)

이젠 자바스크립트의 꽃!! CLASS에 대해서 한 번 알아보자

비록 엄청나게 자세히 쓰지는 못하겠지만 최대한 아는 내용에 한해서 정도껏 나열해보자

✍️ CLASS의 정의

이전 게시물에서 객체에 대한 개념을 정리 할 때, 생성자 함수에 대해 언급한 적이 있다.

객체를 손쉽게 생성하기 위해 마치 BLUE PRINT처럼 템플릿을 만들어 객체를 찍어내는 것이다.

다음과 같은 생성자 함수가 있다고 하자

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

이걸 클래스로 바꾼다면 다음과 같이 바꿀 수 있다.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

사실 주어진 예제를 볼 때 큰 차이가 없어보인다. 실제로 CLASS의 개념은 ES6부터 도입되기도 했었고 그 전까지는 생성자 함수를 사용해 프로그래밍을 진행해 오기도 했다.

하지만 객체 기반 프로그래밍을 다뤘던 프로그래머들이 프로토타입 기반 프로그래밍에 어려움을 느껴 ES6에 CLASS가 도입되었고 그 이후로 CLASS가 생성자 함수를 (차이가 있기에 절대적은 아니지만) 대체해 활발하게 사용되고 있다.

그럼 CLASS와 생성자 함수의 차이점은 무엇일까?

📝 CLASS와 생성자 함수의 차이점

• 클래스 호출 시 NEW는 필수 이지만 생성자 함수에서는 생략이 가능하다.
• 클래스는 상속이라는 특징이 존재해 extends & super와 같은 키워드가 존재한다.
• 클래스는 호이스팅이 발생하지 않는 것처럼 동작하는 반면 생성자 함수는 정의 방식에 따라 함수 호이스팅 및 변수 호이스팅 방식으로 호이스팅 된다.
• 클래스는 암묵적으로 strict mode가 실행된다.
• 클래스의 constructor, 프로토타입 메서드, 정적 메서드들은 모두 열거되지 않는다.

✍️ CLASS의 인스턴스 생성

위에서도 언급되었듯이 클래스는 항상 new 연산자를 사용하기에 클래스로 생성된 모든 생성물들은 인스턴스라고 할 수 있다.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('John', 30);

✍️ CLASS와 메서드

클래스에는 총 0개 이상의 메서드가 정의 가능한데 크게 3 종류가 있다.

• constructor : 인스턴스 생성 및 초기화를 위한 특수 메서드
  => 생성자 함수의 constructor와 클래스의 constructor는 겉으로는 유사하지만 차이가 있다.
  - 클래스 내 constructor는 딱 1개만 존재 할 수 있다.
  - 클래스 내 constructor는 생략이 가능하다.
  - 클래스 내 constructor는 별도의 반환문을 갖지 않아야 한다.
• 프로토타입 메서드 : 생성자 함수와는 다르게 일반적인 함수를 정의하듯 정의되며, 인스턴스의 프로토타입에 존재하는 프로토타입 메서드가 되고 인스턴스는 이르 상속받아 사용할 수 있다.
• 정적 메서드 : 정적 메서드는 아래와 같이 static 키워드를 사용하여 정의 할 수 있으며, 인스턴스를 생성하지 않아도 사용 할 수 있다.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  static createPerson(name, age) {
    return new Person(name, age);
  }
}

📝 정적 vs 프로토타입

• 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 체인이 다르다.
  - 정적 메서드는 클래스에 프로토타입 메서드는 인스턴스에
• 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출 한다.
• 정적 메서드는 인스턴스 프로퍼티를 참조 할 수 있지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조 할 수 있다.

클래스는 자바스크립트의 핵심이 되는 용법 중 하나이기에 다뤄야 할 주제가 터무니 없이 많다. 여기서도 사실 딥하게 다뤄본 것은 아니지만 각 기초적인 개념들을 가볍게 다뤄보았고 아직도 다뤄야 할 내용이 많기 때문에 2장에서 계속될 예정이다.