자바스크립트에서의 객체 지향 프로그래밍(OOP)

이번에는 객체 지향 프로그래밍에 대해 간단히 알아보고, 자바스크립트에서 이를 어떻게 구현해냈는지도 알아보자.

객체 지향 프로그래밍이란?

객체 지향 프로그래밍(OOP, Object-Oriented Programming)은 사람이나 동물 등 실제 세상의 존재를 프로그래밍에서 묘사하기 위한 패러다임이다.

const 이름 = '이름';
const 나이 = '20';
const 주소 = '대한민국';

const 사람 = {
    이름: '이름';
    나이: '20';
    주소: '대한민국';
}

둘 중 어느 것이 더 좋은 방법일까? 후자의 사례가 사람을 표현하는 데 더 좋은 방법같이 보인다.
현실 세계의 객체를 보다 정확히 묘사하기 위한 방법이라는 표현이 좀 와닿을 것이다.

객체의 특징

객체는 속성(property)나 메서드(methods)를 가질 수도 있다.
사람으로 치면 밥 먹기, 잠 자기 등을 묘사하고 싶다면 메서드로 만들어주면 된다는 말이다.

자세히 묘사를 할 수록, 현실의 객체와 더 유사해질 것이고 그래서 객체는 그 자체로 완전한 객체가 될 수 있다.
또한, 이 객체들은 서로 소통이 가능하니 복잡한 현실을 묘사하는 좋은 패러다임인 것이다.

인스턴스(Instance)

객체 지향을 이해하려면 인스턴스도 함께 알아두면 좋다.

const 사람 = {
    이름: '이름';
    나이: '20';
    주소: '대한민국';
}

const 김씨 = new 사람();

이런 방식으로 사람이라는 객체(또는 클래스)를 기반으로, 실제 데이터로 선언을 한 객체를 인스턴스라고 한다.

쉽게 말해, 설계도를 기반으로 생성한 객체가 메모리에 적재되는 순간 인스턴스라고 부른다는 말이다.

자바스크립트에서의 객체 지향 설계

자바스크립트의 경우, 다른 언어들과 조금 차이가 있다.
이 글에서는 차이점을 고전 OOP 와 JS OOP 라는 표현을 사용해 구분하겠다.

고전 OOP

클래스(Class) 간의 상속을 통해 구현한다. 코드를 통해 살펴보자.

class Animal {
    void eat() {
        system.out.println("eat");
    }
}

class Dog extends Animal {
    void bark() {
        system.out.println("woof");
    }
}

Dog dog = new Dog;
dog.eat();
dog.bark();

고전 OOP 에서는 클래스를 기반으로 인스턴스 생성이 이루어진다.

JS OOP

const Animal = {
    eat() {
        console.log("eat");
    }
}

const dog = Object.create(Animal);

dog.bark = function () {
    console.log("woof");
}

dog.eat();
dog.bark();

JS OOP 에서는 객체를 기반으로 인스턴스 생성이 이루어진다.
이 뿐만으로는 잘 이해가 되지 않을 수 있는데, Object.create() 를 통해 어떻게 상속이 되는지를 이해하려면 결국 프로토타입 기반 상속에 대해 이해해야 한다.

프로토타입 기반 상속

자바스크립트가 갖는 독특한 상속 구조인데, 이를 프로토타입 체인이라고 표현한다.

쉽게 표현하자면, 자바스크립트의 객체는 항상 [[Prototype]] 이라는 슬롯이 존재한다.

[[Prototype]] 은 부모 객체를 가리키고 있으며, 객체에 존재하지 않는 속성에 접근하려고 하면 이 슬롯을 통해 부모 객체에서 속성을 찾는 구조를 가진다.

예시를 살펴보자.

위 예시에서, Person 을 상속해 만든 me 를 살펴보면 [[Prototype]] 이 존재하고 있다.

constructor 를 보면 Person 의 생성자 함수를 가리키고 있는데, 여기서 한 층 더 들어가고 싶다면 Person 생성자 함수의 [[Prototype]] 을 살펴보자.

이번엔 Obejct 생성자 함수가 존재하는 것을 알 수 있다.

이것이 프로토타입 체인인데, 인스턴스 me 는 다음과 같은 계층을 가지게 된다.

me -> Person -> Obejct -> null

갑자기 설명하지 않은 null 은 무엇이냐고?
바로, 프로토타입 체인의 종료 지점이다. Object 의 상위 객체는 존재하지 않는다는 말이다.

조금 더 정돈한 표현을 사용해보자면, [[Protoype]] 은 한 객체의 부모 객체의 생성자 함수를 가리킨다고 할 수 있다.

위 예시에서 처럼, Person.prototype 속성에 접근해서 상속을 위한 메서드나 데이터를 할당하는 것도 가능하다.
(ES6 에서는 class 문법이 도입되어 이 방식도 가능)

자바스크립트의 상속은 이런 독특한 방식으로 구성되어 있다.

마무리

자바스크립트의 상속은 고전 OOP 와 달리 프로토타입 기반의 상속으로 이루어져있다.
이 독특한 방식을 이해하고 클래스 문법을 사용하는 것이 좋을 것 같아 작성해보았다.