클래스와 생성자 함수의 차이

TLDR;

클래스와 생성자 함수의 차이

클래스는 생성자 함수보다 엄격하며, 생성자 함수에서는 제공하지 않는 기능도 제공한다.

1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행된다. 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
5. 클래스의 contructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 Enumerable의 값이 false다. 즉, 열거되지 않는다.

정적 메서드와 프로토타입 메서드의 차이

1. 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다. (Class vs 메서드를 호출한 객체) 다시 말해, 인스턴스를 만들어서 메서드를 호출했을경우, 프로토타입 메서드는 인스턴스를 가리키고, 정적메서드는 class를 가리킨다.
2. 정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다.
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

정적 메서드는 어떤 경우에 사용하는가?

정적 메서드는 상태가 없는 경우에 사용하며, 응집도가 높은 경우에 사용한다. 애플리케이션 전역에서 사용할 유틸리티 함수를 전역 함수로 정의하지 않고 메서드로 구조화 할 때 유용한데, 그 예시로 Math함수와 같은 표준 빌트인 객체가 있다.

본 글에서는 클래스에 대해서 더 알아보도록 하자.

 

---

객체를 일일이 만들지 않고 손쉽게 만들 수 있는 방법에는 두 가지가 있다. 생성자 함수를 이용하는 방식과 클래스를 이용하는 방식이 있다.

 

일반 생성자 함수로 만들어보기

function Fruit(name, emoji){
    this.name = name;
    this.emoji = emoji;
    this.display = () => {
        console.log(`${this.name} : ${this.emoji}`)
    }
    // return this; // 생략 가능
}

const apple = new Fruit('apple', '🌟');
console.log(apple.name); // 이런 식으로 접근도 가능

 

위에서 만든 생성자 함수를 클래스로 만들어보기

class Fruit {
    // 생성자(constructor) : new 키워드로 객체를 생성할 때 호출되는 함수
    constructor(name, emoji){
        this.name = name;
        this.emoji = emoji;
    }

    display = () => {   // function을 붙일 필요가 없다.
        console.log(`${this.name}: ${this.emoji}`)
    }
}

// apple은 Fruit 클래스의 인스턴스이다.
const apple = new Fruit('apple', '🌟');

 

정적 메서드와 프로퍼티

위에서 만든 것은 모두 인스턴스 레벨의 메서드이다. 그런데 만약 모든 객체마다 동일하게 가지고 있어야 할 속성이나 메서드가 있다면 어떻게 해야할까? 이 때 사용할 수 있는 것이 바로 클래스 레벨의 프로퍼티와 메서드인 정적 프로퍼티와 정적 메서드이다.
정적 메서드를 만드려면 static키워드를 붙이면 된다!

class Fruit {
    static MAX_FRUITS = 10;
    // 생성자(constructor) : new 키워드로 객체를 생성할 때 호출되는 함수
    constructor(name, emoji){
        this.name = name;
        this.emoji = emoji;
    }

    // 클래스 레벨의 메서드
    static makeRandomFruit() {
        // 클래스 레벨의 메서드에서는 this를 참조할 수 없음. 그냥 template이기 때문
        return new Fruit('banana', '👍🏻')
    }

    // 인스턴스 레벨의 메서드
    display = () => {   // function을 붙일 필요가 없다.
        console.log(`${this.name}: ${this.emoji}`)
    }
}

const banana = Fruit.makeRandomFruit();  // 인스턴스를 통해서는 접근 X, 클래스를 통해서만 접근 가능
// 그리고 만들어진 인스턴스 안에는 해당 함수가 없다!!

우리가 자바스크립트에서 사용하는 Math, Number등과 같은 빌트인 객체는 사실 static 함수다. 따라서 object를 만들지 않고, 객체 안에 정의되어 있는 해당 함수들을 우리가 바로 사용할 수 있다. 이처럼 정적 메서드는 비슷한 내용을 묶어서 관리할 때 편하다.

Math.pow(); // 사실 이런 것들은 static 함수다!
// object를 만들지 않아도 바로 사용 가능하다!
// 비슷한 내용을 묶어서 관리할 수 있다!

Number.isFinite(1);

 

private 필드와 public 필드

위에서 정적으로 만든 static함수는 재정의가 가능하다. 다시 말해, 외부에서 변경이 가능하다. class에서 한번 정하면 외부에서 변경되지 않도록 막아주고 싶다면! 이 때 사용하는게 private 필드이다. private으로 만들고 싶다면 프로퍼티나 메서드 앞에 #을 붙이면 된다. 참고로 다른 언어에서는 private, public, protected가 있는데, 자바스크립트에는 이런 키워드가 없고, 일반적으로 작성하면 모두 접근 가능한 public이 된다. ㄱ

// 접근 제어자
class Fruit {
    #name;        // 이게 필드인데, constructor아 있으면 생략 가능
    #emoji;
    #type = '과일';   // 초기화가 미리 되어있음

    constructor(name, emoji){
        this.#name = name;
        this.#emoji = emoji;
    }

    display = () => {   // function을 붙일 필요가 없다.
        console.log(`${this.name}: ${this.emoji}`)
    }
}

const apple = new Fruit('apple', '👍');

apple.#name = '오렌지';  // private이기 때문에 접근 불가능함 undefined 출력됨

 

클래스에서의 Getter && Setter

아래의 코드에서 fullName을 가져오려면 다음과 같이 fullName이란 함수를 호출해야 한다.
student.fullName() 그런데, 어떤 값, 즉 상태를 가져오는 건데 함수처럼 쓰는게 조금 이상하다. 그냥 프로퍼티로 만들고 싶다! 이럴 때 사용하는 것이 바로 getter 이다!

class Student {
    constructor(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName(){
        return `${this.lastName} ${this.firstName}`;
    }
}

const student = new Student('수지', '김');
console.log(student.firstName);
console.log(student.fullName()); // 아니 그런데 이거 사실 상태인데 함수처럼 쓰는게 좀 이상한거 같아.

Getter와 Settter를 사용해서 다음과 같이 바꿀 수 있겠다.

class Student {
    constructor(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
    }
    get fullName(){
        return `${this.lastName} ${this.firstName}`;
    }

    set fullName(value){
        console.log(value);
    }
}

// 이렇게 getter를 만들어주면, 프로퍼티처럼 접근이 가능하다!

const student = new Student('수지', '김');
console.log(student.fullName); // getter 호출
student.fullName = '김철수';  // setter 호출

 

상속(확장 extends)

extends라는 키워드를 이용해서 어떤 클래스의 프로퍼티와 메서드를 상속받을 수 있다.

// Animal이란 class를 만들어준다.
class Animal {
    constructor(color){
        this.color = color;
    }
    eat() {
        console.log('먹자!');
    }
    sleep(){
        console.log('잔다');
    }
} 

// Tiger라는 클래스는 Animal의 요소를 모두 상속받도록 한다.
class Tiger extends Animal {}
const tiger = new Tiger('노랑이');
tiger.sleep(); // 확장했기때문에 Animal의 메서드를 사용할 수 있다.
tiger.eat();

class Dog extends Animal{
     play() {
      console.log('놀자아~~!')
    }
}

const dog = new Dog('빨강이');
dog.eat();  // 상속한 메서드 
dog.play(); // 새로 추가한 메서드

위 Dog라는 class는 Animal을 상속받은 후, 새로운 메서드를 추가하였다. 그렇다면 만약에 새로운 클래스만의 프로퍼티를 추가하고 싶다면 어떻게 해야할까? super로 부모꺼를 가져온 후, 자신 꺼를 추가로 사용하면 된다.

class Cat extends Animal{
     constructor(color, ownerName){
         super(color); // 부모꺼 가져옴
          this.ownerName = ownerName;
    }

  // 오버라이딩
  // 자식 클래스에서 부모클래스의 함수를 덮어씌운다.
  eat() {
       super.eat(); // 이렇게 해주면, 부모의 eat()이 실행되고 나서 아래 오버라이딩한 함수가 호출된다.
    console.log('와구먹는다!');
  }
}

const cat = new Cat('파랑이', 'Ariel');