자바스크립트의 프로토타입과 클래스 상속: 깊이 있는 이해와 활용법

자바스크립트는 객체 지향 프로그래밍(Object-Oriented Programming, OOP)의 개념을 적용할 수 있는 유연한 언어입니다. 특히 프로토타입(Prototype) 기반 상속과 ES6 클래스(Class) 문법은 코드의 재사용성과 확장성을 극대화하는 중요한 요소입니다. 이번 글에서는 프로토타입과 클래스 상속의 개념을 깊이 있게 분석하고, 실제로 어떻게 활용할 수 있는지 다양한 예제를 통해 알아보겠습니다.

---

🔹 프로토타입(Prototype)과 객체 상속의 기본 개념

🟢 프로토타입이란?

자바스크립트에서 모든 객체는 숨겨진 [[Prototype]]이라는 내부 슬롯을 가지고 있으며, 이를 통해 다른 객체와 연결될 수 있습니다. 이러한 구조를 프로토타입 체인(Prototype Chain)이라 부릅니다.

즉, 하나의 객체가 다른 객체의 속성과 메서드를 상속받을 수 있도록 하는 기능이 바로 프로토타입 기반 상속입니다. 이러한 개념 덕분에 동일한 기능을 여러 객체에서 공유할 수 있어 코드의 재사용성이 높아집니다.

---

🔹 프로토타입 체인(Prototype Chain)의 동작 방식

자바스크립트에서 객체의 특정 속성이나 메서드를 찾을 때, 해당 객체에서 직접 찾을 수 없다면 프로토타입 체인을 따라 부모 객체를 탐색합니다.

🟢 예제: 프로토타입 체인을 활용한 상속

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

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

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

🔹 dog 객체에는 speak 메서드가 직접 존재하지 않지만, Animal.prototype에 정의된 메서드를 찾아 실행합니다.
🔹 이는 프로토타입 체인 덕분에 가능한 일입니다.

🟢 프로토타입 체인의 작동 원리

1️⃣ dog.speak() 호출
2️⃣ dog 객체에서 speak 메서드를 찾음 → 없음
3️⃣ dog의 프로토타입(Animal.prototype)을 탐색
4️⃣ Animal.prototype.speak 메서드를 발견하여 실행

즉, 자바스크립트 엔진은 객체가 직접 가지고 있지 않은 속성을 찾을 때, 해당 객체의 프로토타입을 거슬러 올라가면서 탐색합니다.

---

🔹 ES6의 클래스(Class)와 상속(Inheritance)

자바스크립트는 기존의 프로토타입 기반의 상속 방식 외에도 ES6에서 도입된 클래스(Class) 문법을 제공합니다. 이는 객체 지향 프로그래밍을 더욱 직관적으로 구현할 수 있도록 도와줍니다.

🟢 클래스(Class) 문법의 기본 구조

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

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

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

🔹 class 키워드를 사용하여 Animal 클래스를 정의하고, constructor 메서드를 통해 인스턴스를 초기화합니다.
🔹 프로토타입 방식과 비교했을 때, 코드가 훨씬 간결하고 가독성이 좋음을 알 수 있습니다.

---

🔹 클래스 상속(Class Inheritance) 구현하기

클래스를 상속하면 기존 클래스의 기능을 그대로 가져오면서, 추가적인 기능을 확장할 수 있습니다.

🟢 예제: 클래스 상속

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

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

class Dog extends Animal {
    bark() {
        console.log(`${this.name}이(가) 짖습니다.`);
    }
}

const dog = new Dog('바둑이');
dog.speak(); // 바둑이가 소리를 냅니다.
dog.bark();  // 바둑이가 짖습니다.

🔹 extends 키워드를 사용하여 Dog 클래스가 Animal 클래스를 상속함.
🔹 Dog 클래스는 Animal의 speak() 메서드를 그대로 사용 가능.
🔹 추가적으로 bark() 메서드를 정의하여 Dog만의 고유한 기능을 확장함.

---

🔹 super 키워드 활용: 부모 클래스의 메서드 호출하기

클래스 상속을 활용할 때, 부모 클래스의 생성자를 호출해야 하는 경우가 많습니다.
이때 super 키워드를 사용하면 부모 클래스의 메서드를 호출할 수 있습니다.

🟢 예제: super 키워드를 활용한 상속

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 myDog = new Dog('바둑이', '진돗개');
myDog.speak(); // 바둑이 (진돗개 종)가 짖습니다.

🔹 super(name)을 사용하여 부모 클래스(Animal)의 생성자를 호출
🔹 breed 속성을 추가하여 Dog 클래스만의 고유한 속성을 정의
🔹 부모 클래스의 speak() 메서드를 오버라이딩(재정의)하여 새로운 동작 구현 가능

---

🔹 프로토타입과 클래스 상속의 차이점

비교 항목	프로토타입 방식	클래스 방식 (ES6)
코드 가독성	상대적으로 복잡	직관적이고 간결
객체 생성 방식	생성자 함수 사용	class 키워드 사용
메서드 정의 방식	prototype에 직접 추가	클래스 내부에서 정의
상속 구현 방법	Object.create() 또는 __proto__ 사용	extends 키워드 사용

---

🔹 결론: 어떤 방식을 선택해야 할까?

자바스크립트에서 객체 지향 프로그래밍을 구현하는 방법에는 프로토타입 기반 상속과 클래스 상속 두 가지가 있습니다.

✅ ES6 이상의 환경에서는 가독성이 뛰어난 클래스(Class) 문법을 사용하는 것이 일반적입니다.
✅ 레거시 코드를 유지보수해야 한다면 기존의 프로토타입 기반 상속 방식을 이해하는 것이 필요합니다.
✅ 결국, 두 개념 모두 자바스크립트의 객체 상속 원리를 이해하는 데 필수적이며, 프로젝트의 성격과 요구 사항에 따라 적절한 방식을 선택하는 것이 중요합니다.