[JavaScript] class vs 생성자 함수

 

JavaScript에서 class 문법이 나오기 전에는 생성자 함수(Constructor Function)를 사용해서 객체를 생성함.

ES6부터는 class가 도입되면서 더 직관적이고 가독성이 좋은 문법을 사용할 수 있게 되었지.

 

---

1. 기본적인 차이점

 

🏗 생성자 함수 방식

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function () {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
};

const dog = new Animal("강아지");
dog.speak(); // "강아지이(가) 소리를 냅니다."

🎩 class 방식

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name}이(가) 소리를 냅니다.`);
    }
}

const dog = new Animal("강아지");
dog.speak(); // "강아지이(가) 소리를 냅니다."

 

차이점

1. class 문법이 더 직관적이고 깔끔함.

2. class 내부에서 constructor를 통해 초기화.

3. 메서드는 자동으로 prototype에 추가됨(생성자 함수에서도 가능하지만, prototype을 명시적으로 설정해야 함).

 

---

2. 상속 방식 비교

 

🏗 생성자 함수의 상속

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function () {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
};

function Dog(name, breed) {
    Animal.call(this, name); // 부모 생성자 호출
    this.breed = breed;
}

// 프로토타입을 이용한 상속
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {
    console.log(`${this.name} (${this.breed})이(가) 멍멍!`);
};

const dog = new Dog("바둑이", "진돗개");
dog.speak(); // "바둑이 (진돗개)이(가) 멍멍!"

🎩 class 방식의 상속

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name}이(가) 소리를 냅니다.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 부모 클래스 생성자 호출
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} (${this.breed})이(가) 멍멍!`);
    }
}

const dog = new Dog("바둑이", "진돗개");
dog.speak(); // "바둑이 (진돗개)이(가) 멍멍!"

 

차이점

1. class에서는 extends와 super()를 사용해 상속을 간단하게 처리 가능.

2. 생성자 함수는 Object.create()를 이용해 수동으로 프로토타입을 설정해야 함.

 

---

3. 정적 메서드 (static)

 

🏗 생성자 함수에서 정적 메서드

function MathUtil() {}

MathUtil.add = function (a, b) {
    return a + b;
};

console.log(MathUtil.add(2, 3)); // 5

🎩 class에서 정적 메서드

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(2, 3)); // 5

 

차이점

• class에서는 static 키워드로 간단하게 정적 메서드를 정의할 수 있음.

• 생성자 함수에서는 직접 프로퍼티를 추가해야 함.

 

---

4. class의 특징 및 생성자 함수와의 주요 차이점

특징	class (ES6)	생성자 함수 (ES5)
선언 방식	class 키워드 사용	함수 사용
생성자	constructor 메서드	함수 내부에서 this 사용
메서드 정의	클래스 내부에서 정의하면 자동으로 prototype에 추가됨	prototype을 명시적으로 사용해야 함
상속	extends와 super() 사용	Object.create()와 call() 사용
정적 메서드	static 키워드 사용	직접 프로퍼티 추가
new 없이 호출	오류 발생 (new 없이 호출 불가)	new 없이 호출 가능 (의도치 않은 오류 발생 가능)

 

 

---

5. 결론: 언제 class를 쓰고 언제 생성자 함수를 쓸까?

 

✅ class를 쓰는 것이 좋은 경우

• 객체 지향적으로 설계해야 할 때

• 상속을 사용할 때

• 가독성을 높이고 직관적인 문법을 원할 때

 

✅ 생성자 함수를 사용할 수도 있는 경우

• ES5 이하 환경(구형 브라우저)에서 지원해야 할 때

• 프로토타입 개념을 직접 활용하고 싶을 때

• 특별한 이유가 없으면 class가 더 나은 선택

 

---

🎯 핵심 요약

• class는 문법적으로 더 직관적이고 사용하기 편리함.

• 내부적으로 prototype을 기반으로 동작하지만, 상속과 메서드 정의가 더 쉬워짐.

• class는 new 없이 호출하면 에러가 발생하지만, 생성자 함수는 그냥 실행될 수도 있어 실수할 가능성이 있음.

 

즉, 특별한 이유가 없다면 class를 사용하는 것이 좋다!