프로토타입 상속은 자바스크립트의 객체 지향 프로그래밍 기법입니다.

객체 지향 프로그래밍은 현대 소프트웨어 개발에서 핵심적인 개념 중 하나입니다. 코드의 재사용성, 유지 보수성, 확장성을 향상시키는 강력한 방법을 제공하여 많은 개발자들이 객체 지향 프로그래밍을 학습하고 사용하고 있습니다.

자바스크립트는 동적이고 유연한 특성으로 인해 많은 인기를 얻고 있습니다. 그러나 자바스크립트에서 객체 지향 프로그래밍을 제대로 이해하고 활용하기 위해서는 프로토타입 상속에 대한 이해가 필수적입니다. 이 글에서는 자바스크립트의 프로토타입 상속에 대해 깊이 있는 이해를 돕기 위해 설명하고 예시를 제공할 것입니다. 프로토타입 상속을 통해 객체 지향 프로그래밍을 더욱 쉽고 효율적으로 사용할 수 있는 방법을 알아보겠습니다.

객체 지향 프로그래밍(Object-oriented programming)이란

객체 지향 프로그래밍은 소프트웨어 개발 방법 중 하나입니다.
객체 지향 프로그래밍은 처음부터 있었던 방법은 아니고, 소프트웨어 개발에서 발생한 문제들을 해결하기 위해 생겨났습니다. 초기에는 프로그래밍이 순차적인 절차로 진행되는 절차 지향적인 방식(Procedural Programming)으로 주로 개발이 이루어졌습니다. 하지만 소프트웨어의 규모가 커지면서 코드의 재사용성, 유지 보수성, 확장성 등에 대한 요구가 증가하였습니다. 절차 지향적인 방식은 코드를 모듈화하기 어렵고, 한 번 작성한 코드를 재사용하기 어렵다는 단점이 있었습니다. 또한, 기능을 변경하거나 추가할 때 기존 코드를 수정해야 하는 경우가 많아 유지 보수가 어려웠습니다. 이러한 문제들을 해결하기 위해 객체 지향 프로그래밍이 등장하였습니다.

객체 지향 프로그래밍을 알아보기 전에 먼저 절차 지향적인 방식의 프로그래밍('절차지향 프로그래밍' 혹은' 절차지향적 프로그래밍'이라고도 말함)에 대해 살펴보겠습니다.

절차 지향 프로그래밍

절차 지향 프로그래밍은 프로그램을 개발자가 프로그래밍할 내용을 논리를 세운 순서대로 즉, 일련의 절차대로 구성하는 방식을 말합니다. 그래서, 대부분은 프로그래밍할 데이터가 있으면 이 데이터를 처리할 함수를 중심으로 코드를 작성하게 됩니다. 간단한 예제를 통해 절차 지향 프로그래밍에 대해 살펴보겠습니다.

다음의 예제를 자동차에 관련된 절차 지향 프로그래밍 방식에 대한 코드입니다.

JavaScript - 절차 지향 프로그래밍 방식 절차 지향 프로그래밍은 프로그래밍할 데이터를 처리할 함수를 중심으로 코드를 작성하고 그 함수에 데이터를 처리하는 방식입니다. 
let carName = "포르쉐";
let carModel = "911 타르가";
let carColor = "white";

const startCar = name => {
    console.log(`${name} 출발`);
}

const helloCar = (name, model, color) => {
    const hello = `제 차의 이름은 ${name}이고 모델명은 ${model}입니다. 색상은 ${color}입니다.`;
    console.log(hello);
}

const drvingCar = name => {
    console.log(`${name} 운전!`);
}

// 예제 사용
startCar(carName); // 출력: "포르쉐 출발"
helloCar(carName, carModel, carColor); // 출력: "제 차의 이름은 포르쉐이고 모델명은 911 타르가입니다." 색상은 white입니다.
drvingCar(carName); // 출력: "포르쉐 운전!"

위의 자바스크립트 코드 예제는 절차 지향 프로그래밍 방식으로 작성된 간단한 자동차 관련 함수들입니다. 각 함수들은 특정한 코드을 수행하고, 이들을 호출하여 원하는 결과를 얻는 방식입니다.

객체 지향 프로그래밍 방식

앞서 언급한 것처럼 절차 지향적인 방식은 코드를 모듈화하기 어렵고, 한 번 작성한 코드를 재사용하기 어렵다는 단점이 있었습니다. 또한, 기능을 변경하거나 추가할 때 기존 코드를 수정해야 하는 경우가 많아 유지 보수가 어려웠습니다. 이러한 문제들을 해결하기 위해 객체 지향 프로그래밍이 등장하였습니다.

코드의 재사용성, 유지 보수성, 확장성은 매우 중요한 이슈가 되었고, 이를 향상시키기 위해서 현실 세계의 사물에 대한 개념을 도입해 코드의 재사용성, 유지 보수성, 확장성이 향상될 수 있다는 것을 고안하게 되었습니다.

예를 들어, 자동차는 현실 세계의 사물입니다. 자동차는 엔진, 바퀴, 좌석 등과 같은 여러 개의 구성 요소를 가지고 있습니다. 또한, 자동차는 주행, 정지, 회전 등과 같은 여러 가지 기능을 가지고 있습니다. 객체 지향 프로그래밍에서는 자동차를 객체로 표현합니다. 자동차 객체는 엔진, 바퀴, 좌석 등과 같은 속성을 가지고 있습니다. 또한, 자동차 객체는 주행, 정지, 회전 등과 같은 메서드(객체에 포함되어 있는 함수)를 가지고 있습니다.

객체 지향 프로그래밍이란
사람이 인식하거나 파악하기 쉬운 현실 세계의 사물이나 개념 (혹은 집합)을 프로그램 내에서 적용한 것입니다.

다음은 위 예제를 자바스크립트 프로토타입 상속을 이용한 객체 지향 프로그래밍 방식의 코드로 바꾼 예제입니다.

JavaScript - 객체 지향 프로그래밍 방식 
// Car 객체 생성자 함수
function Car(name, model, color) {
    this.name = name;
    this.model = model;
    this.color = color;
}

// Car 객체의 메서드를 프로토타입으로 정의
Car.prototype.start = function() {
    console.log(`${this.name} 출발`);
};

Car.prototype.hello = function() {
    const hello = `제 차의 이름은 ${this.name}이고 모델명은 ${this.model}입니다. 색상은 ${this.color}입니다.`;
    console.log(hello);
};

Car.prototype.drive = function() {
    console.log(`${this.name} 운전!`);
};

// 예제 사용
let myCar = new Car("포르쉐", "911 타르가", "white");

myCar.start(); // 출력: "포르쉐 출발"
myCar.hello(); // 출력: "제 차의 이름은 포르쉐이고 모델명은 911 타르가입니다. 색상은 white입니다."
myCar.drive(); // 출력: "포르쉐 운전!"

위 예제를 보면 절차 지향 프로그래밍 방식과는 다른 큰 차이점이 있습니다.
절차 지향 프로그래밍 방식에서는 여러 개의 개별, 즉 각각의 함수를 사용했습니다. 객체 지향 프로그래밍 방식도 마치 여러 개의 함수를 사용한 것 같지만 사용한 모든 함수는 myCar.start(), myCar.hello(), myCar.drive()처럼 myCar.xxxx()로 되어 있어 "myCar의 start", "myCar의 hello", "myCar의 drive"처럼 'myCar"라는 객체와 그 객체에 속한 함수로 쉽게 인식할 수 있습니다.

객체란 현실 세계의 사물이나 개념을 프로그램에서 객관적으로 표현하기 위한 그릇으로, 데이터와 그 데이터를 처리하는 함수들을 하나로 묶은 것입니다. 예를 들어, 자동차 객체는 자동차의 속성(색상, 모델 등)과 동작(가속, 정지 등)을 가지고 있습니다. 이렇게 객체는 데이터와 해당 데이터를 다루는 함수들을 함께 가지고 있어 쉽게 관리하고 사용할 수 있습니다. 즉, 데이터와 그 데이터를 처리하는 메서드를 포함하는 프로그래밍 요소입니다.

이처럼 객체 지향 프로그래밍 방식은 코드의 인터페이스를 쉽게 파악할 수 있는 장점이 있습니다. 또한 프로그래밍의 확장성, 캡슐화, 성능 향상, 유지보수의 편의성 증대 등 많은 장점이 있습니다. 그럼, 자바스크립트의 객체 지향 프로그래밍 방식의 핵심인 프로토타입 상속에 대해 알아보겠습니다.

자바스크립트 프로토타입 상속

프로토타입 상속이란? 프로토타입이라는 방식으로 부모(혹은 조상) 객체가 가지고 있는 속성이나 메서드를 자식(혹은) 객체에 상속되는 것을 말합니다. 프로토타입 상속이 무엇인지 다음의 예제로 살펴보겠습니다.

JavaScript 
// 부모 객체 선언
function Animal() {
    this.name = "Animal"; // 부모 객체(Animal)가 가지고 있는 속성입니다.
}

// 부모 객체(Animal)에 프로토타입이라는 방식으로 메서드 추가
Animal.prototype.say = function() {
    console.log("I am an animal.");
};

// 자식 객체 선언
function Dog() {
    this.name = "Dog";
}

// 프로토타입이라는 방식으로 부모 객체(Animal)가 가지고 있는 속성을 자식 객체(Dog)에게 상속됩니다.
Dog.prototype = new Animal();

// 자식(Dog) 객체에서 부모 객체(Animal)의 속성과 메서드를 사용합니다.
const myDog = new Dog();
console.log(myDog.name); // 출력: "Dog"
myDog.say(); // 출력: "I am an animal."

위 예제 코드는 프로토타입 상속에 대해 쉽게 설명할 수 있는 예제입니다.

  1. 먼저 Animal이라는 부모 객체를 선언합니다. 이 객체에는 name이라는 속성이 정의되어 있습니다.
  2. Animal.prototype을 이용하여 부모 객체에 메서드 say()를 추가합니다. 이 메서드는 "I am an animal."이라는 메시지를 출력합니다.
  3. 그 다음으로 Dog라는 자식 객체를 선언합니다. 이 객체는 부모 객체인 Animal을 상속받아야 합니다.
  4. Dog.prototype을 부모 객체 Animal의 인스턴스로 설정하여, 부모 객체의 속성과 메서드를 자식 객체에 상속합니다.
  5. myDog라는 객체를 생성하고, 이 객체는 Dog의 인스턴스입니다.
  6. myDog.name을 출력하면 "Dog"가 나오는데, 이는 자식 객체인 Dog에서 name 속성을 상속받은 것입니다.
  7. 마지막으로 myDog.say()를 호출하면 "I am an animal."이라는 메시지가 출력됩니다. 이는 부모 객체인 Animal의 메서드인 say()를 상속받아 사용한 것입니다.

이렇게 프로토타입을 이용하여 부모 객체의 속성과 메서드를 자식 객체에 상속하고 사용할 수 있습니다.

프로토타입(Prototype) 방식이란 무엇인가?

프로토타입(Prototype)이란 무슨 뜻일까요?
사전적 의미로는 "원래의 형태 또는 원본"이라는 뜻입니다. 자바스크립트에서 "프로토타입은 객체를 만들 때 사용하는 템플릿 또는 원본"이라는 의미로 사용됩니다. 간단하게 말하면 객체의 원본이라고 생각할 수 있습니다.

예를 들어, 자동차의 설계도라고 생각해볼 수 있습니다. 자동차의 설계도에는 모든 자동차가 가져야 할 공통된 특징과 기능이 정의되어 있습니다. 이러한 설계도를 바탕으로 여러 대의 자동차를 생산할 수 있습니다. 이때 각각의 자동차는 설계도를 기반으로 만들어지는 것이죠.

마찬가지로, 프로토타입은 객체를 만들 때 사용되는 템플릿이나 원본으로 생각할 수 있습니다. 프로토타입에는 해당 객체들이 가져야 할 공통된 속성과 메서드가 정의되어 있습니다. 자바스크립트에서는 모든 객체는 자신의 프로토타입을 가지고 있습니다. 이 프로토타입을 통해 객체들은 공통된 속성과 메서드를 상속받을 수 있습니다.

예를 들어, 여러 대의 자동차 객체를 생성할 때 하나의 프로토타입을 만들고, 이를 기반으로 각각의 자동차 객체를 생성할 수 있습니다. 이렇게 하면 각각의 자동차 객체들은 프로토타입에 정의된 속성과 메서드를 공유하게 됩니다.

프로토타입을 사용하면 코드의 재사용성과 효율성을 높일 수 있습니다. 객체를 생성할 때마다 동일한 속성과 메서드를 정의할 필요 없이, 프로토타입에서 상속받아 사용할 수 있기 때문입니다.

이러한 프로토타입 방식은 프로토타입 구현을 위한 prototype 속성과 추가되는 몇 가지 속성을 제공합니다.

prototype 속성

prototype 속성은
자바스크립트에서 객체들 간에 속성과 메서드를 공유하기 위해 객체의 속성과 메서드를 저장하는 속성입니다.

줄여서 그냥 '프로토타입'이라고도 합니다. 모든 객체는 prototype 속성을 가지고 있으며, 이를 통해 속성과 메서드를 상속받을 수 있습니다.

prototype 속성의 사용 방법

자바스크립트에서 객체는 prototype속성을 가지고 있습니다. 이 prototype 속성은 해당 객체의 프로토타입 객체를 가리킵니다. 프로토타입 객체에 정의된 속성과 메서드는 해당 객체를 상속받은 다른 객체들이 공유할 수 있습니다.

예를 들어, Animal이라는 생성자 함수가 있고 이 함수로부터 생성된 객체 dog가 있다고 가정해봅시다. Animal.prototype은 Animal 생성자 함수로부터 생성된 모든 객체들이 상속받는 프로토타입 객체입니다.

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

// Animal 생성자 함수로부터 생성된 모든 객체들이 상속받는 프로토타입 객체
Animal.prototype.speak = function() {
    console.log(`안녕하세요, ${this.name}입니다.`);
};

const dog = new Animal("멍멍이");
dog.speak(); // 출력: "안녕하세요, 멍멍이입니다."

위의 예제에서 Animal.prototype.speak은 Animal 생성자 함수로부터 생성된 모든 객체가 상속받는 메서드입니다. dog 객체는 Animal.prototype을 통해 speak() 메서드에 접근할 수 있게 됩니다.

따라서, 객체.prototype 형식을 사용하여 프로토타입 객체에 접근하고 속성과 메서드를 정의하거나 가져올 수 있습니다.

지금까지 대략적인 prototype 속성에 대해 알아 보았습니다. 자바스크립트에서 프로토타입 방식을 이해하기 위해서는 prototype 속성의 역할을 이해하는 것이 중요합니다.

객체 리터럴과 Object.create()

지금까지 살펴본 프로토타입 방식의 상속은 생성자 함수로 선언한 객체에 활용한 것이었습니다. 프로토타입 방식의 상속은 생성자 함수로 선언한 객체 이외에도 다른 방법으로도 사용할 수 있습니다. 자바스크립트는 프로토타입 기반의 언어이기 때문에 객체 간에 상속을 구현하는 다양한 방법이 있습니다.

Object.create() 속성을 사용하여 새로운 객체를 생성하고, 이를 기존 객체의 프로토타입으로 설정함으로써 상속을 구현할 수 있습니다.

여기에서는 객체 리터럴과 Object.create() 속성을 활용한 방법을 소개하겠습니다.

JavaScript 
const parent = {
    sayHello: function() {
        console.log("안녕하세요!");
    }
};

const child = Object.create(parent);
child.sayHello(); // 출력: "안녕하세요!"

위의 예제에서 child 객체는 parent 객체를 프로토타입으로 상속받았으며, sayHello() 메서드를 호출할 수 있습니다.

클래스와 extends

ECMAScript 2015(ES6)부터 클래스와 extends 키워드가 도입되었습니다.

클래스를 사용하여 객체를 정의하고, extends를 통해 다른 클래스를 상속받을 수 있습니다.

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

class Dog extends Animal { // extends키워드로 Animal 클래스를 상속받음
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

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

const myDog = new Dog("멍멍이", "리트리버");
myDog.speak(); // 출력: "멍멍이이 소리를 냅니다."
myDog.bark(); // 출력: "멍멍이이 짖습니다."

위의 예제에서 Dog 클래스는 Animal 클래스를 상속받아 사용하고 있습니다.

마무리

이번 글에서는 자바스크립트의 프로토타입 상속에 대해 알아보았습니다. 프로토타입 상속은 자바스크립트의 핵심 개념 중 하나로, 객체 지향 프로그래밍의 강력한 도구입니다.

우리는 프로토타입이란 무엇인지, 프로토타입 체인이 어떻게 동작하는지, 생성자 함수와 프로토타입 방식를 이용한 상속 방법을 살펴보았습니다. 또한 다른 상속 방식인 객체 리터럴과 Object.create(), 클래스와 extends 키워드를 사용한 상속도 간단히 살펴보았습니다.

프로토타입 상속은 객체 지향 프로그래밍을 이해하고 활용하는 데 중요한 개념입니다. 이를 통해 코드의 재사용성을 높이고 유지 보수성을 개선할 수 있으며, 객체들 간의 관계를 효율적으로 구성할 수 있습니다. 자바스크립트의 프로토타입 상속을 이해하면 더욱 효과적인 코드 작성과 자바스크립트의 핵심 개념을 깊이 이해할 수 있습니다. 프로토타입 상속에 대한 이해를 바탕으로 자바스크립트 개발에 더욱 자신감을 가질 수 있으며, 더욱 효율적이고 확장 가능한 코드를 작성할 수 있을 것입니다.

참고문헌

  • "더글라스 크락포드의 자바스크립트 핵심 가이드" - 이 책은 JavaScript의 핵심 개념 중 하나인 프로토타입 상속을 깊이 있게 다루고 있습니다. 프로토타입 기반의 언어 설계에 대한 이해를 도와줍니다.
  • 모던 자바스크립트 Deep Dive(저자 이웅모) - 이 책에서는 프로토타입에 대한 개념과 프로토타입 체인의 작동 방식을 친절하고 깊이 있게 설명하고 있습니다.
  • MDN - 상속과 프로토타입
  • javascript.info - 함수의 prototype 프로퍼티

같이 보기