모던 자바스크립트 입문 - Chapter 18: 생성자와 클래스 구문 💻

자바스크립트에서 객체를 체계적으로 생성하고 관리하는 방법을 배워보겠습니다.
생성자 함수부터 ES6의 클래스 문법까지, 객체 지향 프로그래밍의 핵심 개념들을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다. 

📌 목차

• 생성자 함수란?
• 생성자 상속
• ES6 클래스 구문
• 생성자 vs 클래스 비교

---

📝 생성자 함수란?

생성자 함수는 비슷한 구조를 가진 객체를 여러 개 만들 때 사용하는 함수입니다.

마치 붕어빵 틀처럼 같은 모양의 객체를 찍어내는 역할을 합니다.

기본 생성자 함수

// 생성자 함수 (관례적으로 첫 글자를 대문자로)
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return `안녕하세요, 저는 ${this.name}입니다.`;
    };
}

// 객체 생성
const person1 = new Person("김철수", 25);
const person2 = new Person("이영희", 30);

console.log(person1.greet()); // "안녕하세요, 저는 김철수입니다."
console.log(person2.greet()); // "안녕하세요, 저는 이영희입니다."

프로토타입을 활용한 메서드 정의

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

// 프로토타입에 메서드 추가 (메모리 효율적)
Person.prototype.greet = function() {
    return `안녕하세요, 저는 ${this.name}입니다.`;
};

Person.prototype.getAge = function() {
    return `나이: ${this.age}세`;
};

const person = new Person("박민수", 28);
console.log(person.greet()); // "안녕하세요, 저는 박민수입니다."
console.log(person.getAge()); // "나이: 28세"

---

📝 생성자 상속

상속을 통해 기존 생성자의 기능을 확장할 수 있습니다.

부모의 특성을 물려받으면서 새로운 기능을 추가하는 방식입니다.

call()을 사용한 상속

// 부모 생성자
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    return `${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.bark = function() {
    return `${this.name}이(가) 멍멍 짖습니다.`;
};

const myDog = new Dog("멍멍이", "골든리트리버");
console.log(myDog.speak()); // "멍멍이이(가) 소리를 냅니다."
console.log(myDog.bark());  // "멍멍이이(가) 멍멍 짖습니다."

---

📝 ES6 클래스 구문

ES6에서 도입된 클래스 문법은 생성자 함수를 더 직관적이고 깔끔하게 작성할 수 있게 해줍니다.

기본 클래스 정의

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `안녕하세요, 저는 ${this.name}입니다.`;
    }
    
    getAge() {
        return `나이: ${this.age}세`;
    }
}

const person = new Person("최유진", 26);
console.log(person.greet()); // "안녕하세요, 저는 최유진입니다."

클래스 상속 (extends)

class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        return `${this.name}이(가) 소리를 냅니다.`;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 부모 생성자 호출
        this.breed = breed;
    }
    
    bark() {
        return `${this.name}이(가) 멍멍 짖습니다.`;
    }
    
    // 메서드 오버라이딩
    speak() {
        return `강아지 ${this.name}이(가) 멍멍 소리를 냅니다.`;
    }
}

const myDog = new Dog("바둑이", "진돗개");
console.log(myDog.speak()); // "강아지 바둑이이(가) 멍멍 소리를 냅니다."
console.log(myDog.bark());  // "바둑이이(가) 멍멍 짖습니다."

---

📝 생성자 vs 클래스 비교

구분 생성자 함수 ES6 클래스

문법	function 키워드	class 키워드
상속	prototype, call()	extends, super()
가독성	복잡함	직관적
호이스팅	함수 호이스팅	호이스팅 안됨

// 생성자 함수 방식
function Car(brand) {
    this.brand = brand;
}
Car.prototype.start = function() {
    return `${this.brand} 시동을 걸었습니다.`;
};

// 클래스 방식 (권장)
class Car {
    constructor(brand) {
        this.brand = brand;
    }
    
    start() {
        return `${this.brand} 시동을 걸었습니다.`;
    }
}

---

📚 마무리 정리

오늘 배운 생성자와 클래스 구문들을 정리하면:

 

생성자 함수: 객체를 생성하는 함수로, new 키워드와 함께 사용하며 프로토타입을 통해 메서드를 공유할 수 있습니다.

생성자 상속: call() 메서드와 Object.create()를 사용하여 부모 생성자의 기능을 자식에게 전달할 수 있습니다.

ES6 클래스: 생성자 함수를 더 직관적으로 작성할 수 있는 문법으로, extends와 super를 통해 간편하게 상속을 구현할 수 있습니다.

💡 오늘 새롭게 알게 된 것

• 생성자 함수와 클래스는 본질적으로 같은 기능을 하지만, 클래스 문법이 더 직관적이다.
• 프로토타입을 활용하면 메서드를 효율적으로 공유할 수 있다.
• super() 키워드로 부모 클래스의 생성자를 간편하게 호출할 수 있다.

🤔 어려웠던 점

• 프로토타입 체인의 개념이 처음에는 복잡하게 느껴졌습니다.
• 생성자 함수의 상속 문법이 다소 번거롭다.

🎯 다음 학습 계획

다음 포스팅에서는 API 활용에 대해 알아보겠습니다.