JavaScript 기초 <16. 클래스(Class)와 생성자 함수(ES6 이후 차이점 포함)>

자바스크립트 JavaScript

16. 클래스(Class)와 생성자 함수(ES6 이후 차이점 포함) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 클래스(Class)란?

클래스(Class)는 객체를 생성하기 위한 템플릿(설계도) 역할을 하는 구조입니다.
ES6 이전에는 **생성자 함수(Constructor Function)**를 사용하여 객체를 만들었지만,
ES6 이후에는 class 문법이 추가되면서 객체 지향 프로그래밍(OOP)이 더 쉬워졌습니다.

📌 클래스를 사용하면 객체를 더 체계적으로 정의하고 재사용할 수 있음!

---

 

2. 생성자 함수(Constructor Function)로 객체 생성

ES6 이전에는 생성자 함수를 사용하여 객체를 만들었습니다.

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

Person.prototype.greet = function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
};

const user1 = new Person("Alice", 25);
user1.greet(); // "안녕하세요, 저는 Alice입니다."

📌 생성자 함수는 new 키워드를 사용하여 새로운 객체를 생성함!

---

 

3. ES6 클래스(Class)로 객체 생성

ES6 이후 class 키워드를 사용하여 객체를 쉽게 정의할 수 있습니다.

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

    greet() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
}

const user2 = new Person("Bob", 30);
user2.greet(); // "안녕하세요, 저는 Bob입니다."

✅ 클래스를 사용하면 코드가 더 직관적이고 읽기 쉬워진다!

---

✅ 여기까지 클래스와 생성자 함수의 개념을 배웠습니다!
👉 "그렇다면, 클래스에서는 어떻게 상속을 구현할 수 있을까?"
✅ 2부에서 클래스 상속, super, 정적 메서드까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 클래스 상속(Inheritance) 구현하기

클래스에서는 extends 키워드를 사용하여 상속을 구현할 수 있습니다.

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

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

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

    bark() {
        console.log(`${this.name}가 멍멍 짖습니다.`);
    }
}

const dog = new Dog("바둑이", "골든 리트리버");
dog.makeSound(); // "바둑이가 소리를 냅니다."
dog.bark(); // "바둑이가 멍멍 짖습니다."

📌 자식 클래스에서 super를 사용하여 부모 클래스의 생성자를 호출해야 함!

---

 

2. 정적 메서드(Static Method)란?

정적 메서드는 클래스의 인스턴스가 아니라, 클래스 자체에서 호출할 수 있는 메서드입니다.

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

console.log(MathUtils.add(3, 5)); // 8

📌 정적 메서드는 new 없이 클래스명으로 직접 호출할 수 있음!

---

 

3. 클래스 vs 생성자 함수 차이점 정리

비교 항목생성자 함수(Constructor Function)클래스(Class)

문법	function 키워드 사용	class 키워드 사용
상속 방식	prototype을 사용하여 상속	extends 키워드 사용
new 필요 여부	new 필수	new 필수
정적 메서드	ConstructorFunction.prototype.method	static 키워드 사용

📌 클래스가 생성자 함수보다 더 직관적이고, 객체 지향 프로그래밍(OOP)에 적합!

---

 

✅ 지금까지 클래스와 생성자 함수, 상속, super, 정적 메서드 개념을 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 모듈(Module) 시스템이란 무엇일까?"
✅ 다음 회차에서 import/export, CommonJS, ESM 모듈 시스템을 배워봅시다! 🚀