[Javascript]자바스크립트 상속 완벽 가이드: 기본 개념부터 실전 예제까지

자바스크립트는 객체 지향 프로그래밍(OOP)의 강력한 기능을 지원하는 언어입니다. 특히 프로토타입 기반 상속 메커니즘을 통해 코드 재사용성과 유연성을 높일 수 있습니다. 이번 포스팅에서는 자바스크립트의 객체 지향 프로그래밍 개념과 프로토타입을 활용한 상속 방법에 대해 알아보겠습니다.

≣ 목차

• 상속의 기본 개념📚
• 프로토타입 기반 상속 이해하기🔄
• ES6 클래스 상속🆕
• 상속 예제: 실전 코드💻
• 상속의 장단점 분석⚖️

---

01. 상속의 기본 개념📚

상속(Inheritance)은 객체 지향 프로그래밍에서 중요한 개념 중 하나로, 기존의 클래스를 재사용하여 새로운 클래스를 만드는 방법입니다. 상속을 통해 코드의 재사용성을 높이고, 유지보수성을 향상할 수 있습니다. 자바스크립트는 프로토타입 기반의 언어로, 다른 객체 지향 언어와는 다르게 상속을 구현합니다.

---

02. 프로토타입 기반 상속 이해하기🔄

자바스크립트는 프로토타입 기반 언어로, 객체가 다른 객체의 속성과 메서드를 상속받을 수 있는 메커니즘을 제공합니다. 모든 자바스크립트 객체는 숨겨진 프로토타입 속성을 가지며, 이를 통해 상속을 구현할 수 있습니다. 프로토타입 기반 상속의 주요 개념과 예제를 살펴보겠습니다.

1. 프로토타입 체인

자바스크립트의 각 객체는 다른 객체를 참조하는 프로토타입(프로토)을 가지고 있습니다. 객체가 특정 속성이나 메서드를 찾을 때, 먼저 자신이 가진 속성과 메서드를 검색하고, 존재하지 않을 경우 프로토타입 체인을 따라가며 상위 객체를 검색합니다. 이 과정을 통해 객체는 다른 객체의 속성과 메서드를 상속받습니다.

---

2. 함수 생성자와 프로토타입

함수 생성자를 사용하여 객체를 생성하고, 프로토타입을 통해 상속을 구현할 수 있습니다. 함수 생성자는 새로운 객체를 만들기 위한 템플릿 역할을 하며, 생성된 객체는 해당 함수 생성자의 프로토타입을 상속받습니다.

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

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

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

위 예제에서 Animal 함수 생성자는 새로운 객체를 생성하는 템플릿 역할을 합니다. Animal.prototype에 정의된 speak 메서드는 dog 객체에서 사용할 수 있습니다.

---

3. 프로토타입 상속 구현

프로토타입을 사용하여 한 객체가 다른 객체를 상속받도록 구현할 수 있습니다. 이를 위해 Object.create 메서드를 사용하여 새로운 객체를 생성하고, 해당 객체의 프로토타입을 설정할 수 있습니다.

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

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

function Dog(name) {
  Animal.call(this, name); // 부모 생성자를 호출하여 상속
}

Dog.prototype = Object.create(Animal.prototype); // 프로토타입 체인을 설정
Dog.prototype.constructor = Dog; // 생성자를 다시 설정

Dog.prototype.speak = function() {
  console.log(`${this.name}이(가) 멍멍 짖습니다.`);
};

const dog = new Dog('강아지');
dog.speak(); // 강아지이(가) 멍멍 짖습니다.

위 예제에서 Dog 생성자는 Animal 생성자를 호출하여 name 속성을 상속받습니다. Dog.prototype은 Object.create를 사용하여 Animal.prototype을 상속받도록 설정되었고, 생성자를 다시 Dog로 설정하여 올바른 참조를 유지합니다. 이후 Dog.prototype에 새로운 speak 메서드를 정의하여 Animal의 speak 메서드를 오버라이드합니다.

---

4. 프로토타입 체인의 동작 방식

프로토타입 체인을 통해 객체는 상위 객체의 속성과 메서드를 사용할 수 있습니다. 객체가 특정 속성이나 메서드를 찾지 못하면, 프로토타입 체인을 따라 상위 객체로 검색을 계속합니다.

console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true

위 예제에서 dog 객체는 Dog, Animal, Object의 인스턴스입니다. 이는 프로토타입 체인을 따라가며 상속 구조를 확인할 수 있음을 보여줍니다.

---

03. ES6 클래스 상속🆕

ECMAScript 6(ES6)에서는 클래스를 사용하여 더 직관적이고 간편하게 상속을 구현할 수 있는 문법을 도입했습니다. class와 extends 키워드를 사용하여 클래스를 정의하고 상속하는 방법을 살펴보겠습니다.
자바스크립트 클래스에 관한 내용은 아래 포스팅을 참고해 주세요😁

[자바스크립트]자바스크립트 클래스 이해하기

1. 클래스 정의하기

ES6에서는 class 키워드를 사용하여 클래스를 정의할 수 있습니다. 클래스는 생성자(constructor)와 메서드를 포함할 수 있습니다.

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

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

const animal = new Animal('동물');
animal.speak(); // 동물이(가) 소리를 냅니다.

---

2. 클래스 상속하기

클래스를 상속하려면 extends 키워드를 사용합니다. 자식 클래스는 부모 클래스의 모든 속성과 메서드를 상속받으며, 필요에 따라 메서드를 재정의(오버라이드)할 수 있습니다.

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

const dog = new Dog('강아지');
dog.speak(); // 강아지이(가) 멍멍 짖습니다.

---

3. 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() {
    super.speak(); // 부모 클래스의 메서드 호출
    console.log(`${this.name}이(가) 멍멍 짖습니다.`);
  }
}

const dog = new Dog('강아지', '진돗개');
dog.speak();
// 강아지이(가) 소리를 냅니다.
// 강아지이(가) 멍멍 짖습니다.
console.log(dog.breed); // 진돗개

---

4. 클래스 상속의 실전 예제

다음은 과일 클래스와 상속을 사용하여 빨간색 과일과 초록색 과일을 구분하는 예제입니다.

class Fruit {
  constructor(korean, english) {
    this.korean = korean;
    this.english = english;
  }

  describe() {
    return `${this.korean} (${this.english})`;
  }
}

class RedFruit extends Fruit {
  color() {
    return '빨간색 과일입니다.';
  }
}

class GreenFruit extends Fruit {
  color() {
    return '초록색 과일입니다.';
  }
}

const strawberry = new RedFruit('딸기', 'strawberry');
console.log(strawberry.describe()); // 딸기 (strawberry)
console.log(strawberry.color()); // 빨간색 과일입니다.

const watermelon = new GreenFruit('수박', 'watermelon');
console.log(watermelon.describe()); // 수박 (watermelon)
console.log(watermelon.color()); // 초록색 과일입니다.

---

04. 상속 예제: 실전 코드💻

자바스크립트 상속을 활용한 실전 예제를 살펴봅니다. 먼저 프로토타입 기반 상속을 통해 객체를 확장하는 방법을 보겠습니다.

// 프로토타입 기반 상속 실전 예제
function Vehicle(make, model) {
  this.make = make;
  this.model = model;
}

Vehicle.prototype.getDetails = function() {
  return `${this.make} ${this.model}`;
};

function Car(make, model, doors) {
  Vehicle.call(this, make, model);
  this.doors = doors;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.getDetails = function() {
  return `${this.make} ${this.model}, ${this.doors} doors`;
};

const car = new Car('Toyota', 'Corolla', 4);
console.log(car.getDetails()); // Toyota Corolla, 4 doors

---

05. 상속의 장단점 분석⚖️

자바스크립트 상속은 코드의 재사용성을 높이고, 구조적인 프로그래밍을 가능하게 하는 중요한 기능입니다. 그러나 상속을 사용할 때는 주의해야 할 점도 있습니다. 여기서는 자바스크립트 상속의 장단점을 살펴보겠습니다.

장점

1. 코드 재사용성 증가

• 상속을 통해 공통된 기능을 부모 클래스에 정의하고, 이를 자식 클래스에서 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고, 유지보수가 용이해집니다.

2. 구조적이고 읽기 쉬운 코드 작성 가능

• 상속을 사용하면 클래스 간의 관계가 명확해지고, 코드의 구조가 체계적이며 읽기 쉽게 됩니다. 이는 협업 시 코드의 이해도와 유지보수성을 높이는 데 도움이 됩니다.

3. 유지보수성 향상

• 공통된 기능을 부모 클래스에 정의하면, 해당 기능을 수정할 때 모든 자식 클래스에서 자동으로 적용됩니다. 이를 통해 유지보수가 용이해지고, 일관성을 유지할 수 있습니다.

---

단점

1. 과도한 상속 구조는 복잡도를 증가시킴

• 상속 구조가 너무 깊거나 복잡하면 코드의 이해도가 떨어지고, 디버깅이 어려워질 수 있습니다. 따라서 상속은 필요할 때 적절히 사용하는 것이 중요합니다.

2. 다중 상속이 불가능

• 자바스크립트는 다중 상속을 지원하지 않습니다. 따라서 여러 클래스의 기능을 동시에 상속받아야 할 때는 믹스인 패턴을 사용해야 합니다.

const canFly = {
  fly() {
    console.log('날고 있습니다.');
  }
};

const canSwim = {
  swim() {
    console.log('수영하고 있습니다.');
  }
};

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

class Duck extends Animal {
  constructor(name) {
    super(name);
  }
}

Object.assign(Duck.prototype, canFly, canSwim);

const duck = new Duck('오리');
duck.fly(); // 날고 있습니다.
duck.swim(); // 수영하고 있습니다.

3. 상속의 오용 가능성

• 모든 경우에 상속을 사용하는 것은 바람직하지 않습니다. 상속은 "is-a" 관계(한 객체가 다른 객체의 일종일 때)를 나타낼 때 사용해야 하며, "has-a" 관계(한 객체가 다른 객체를 포함하고 있을 때)는 조합(Composition)을 통해 구현하는 것이 좋습니다.

class Engine {
  start() {
    console.log('엔진을 시작합니다.');
  }
}

class Car {
  constructor(engine) {
    this.engine = engine;
  }

  start() {
    this.engine.start();
  }
}

const engine = new Engine();
const car = new Car(engine);
car.start(); // 엔진을 시작합니다.