Object-Oriented Programming과 JavaScript

객체 지향 프로그래밍을 정리해보고, 처음 접했을 때도 혼돈의 카오스였던 자바스크립트의 Prototype Chaining에 대해서 알아보자.

 

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

OOP (Object-Oriented Programming)은 프로그램을 여러 개의 독립적인 단위인 객체들로 나타내는 프로그래밍 패러다임이다.

OOP를 통해 데이터와 기능을 직관적으로 이해할 수 있고 반복적인 내용을 재사용하기 용이하다.

 

반대로 프로그램을 함수의 목록으로 보는 전통적인 방식을 절차 지향 패턴이라고 하며, 객체 지향 패러다임이 있기 전 대부분의 언어가 변수와 함수를 순차적으로 작동시키는 절차적 언어였다.

 

이름을 저장하고 인사하는 기능을 가진 객체를 하나 만드는 예시를 통해 일반 함수와 생성자 함수를 비교해보자.

일반 함수를 이용하면 아래와 같이 함수 내에 새로운 객체를 생성해 그 안에 속성과 기능을 추가한 뒤 반환해준다.

function createNewPerson(name) {
  const obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m ' + name + '.');
  };
  return obj;
}

 

하지만 생성자 함수(객체 지향 언어의 클래스 역할)를 이용하면 더 간단하고 깔끔하게 나타낼 수 있다. 관습적으로 생성자 함수는 일반 함수와 구분하기 위해 명사를 사용하며 대문자로 시작한다.

분명 프로젝트에서도 이렇게 객체 지향적으로 짤 수 있는 코드가 있었을 텐데 잘 활용하지 못했었던 것 같다.

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

 

 

✔️  객체 지향 프로그래밍의 네가지 주요 컨셉

1. 캡슐화 Encapsulation

목적에 따라서 속성과 기능을 결합시켜 복잡성을 낮추며, 내부 구현이 드러나지 않아 데이터에 대한 직접 접근이 불가하고 오로지 함수를 통해서 접근할 수 있도록 은닉화 한다. 

 

2. 추상화 Abstraction

객체를 구성할 수 있는 다양한 속성 중 필요한 것만으로 단순화하여 예기치 못한 변수를 최소화한다.

 

3. 상속 Inheritance

자식 클래스(derive class)는 부모 클래스(base class)의 상속을 통해 불필요한 구현을 피할 수 있다.

 

4. 다형성 Polymorphisom

같은 이름을 가진 기능도 다르게 적용될 수 있다. 부모 클래스에게 물려받은 함수(메소드)는 자식 클래스 내에서 다시 정의(오버라이딩, overriding) 할 수 있으며, 동일한 이름이더라도 인자나 데이터 타입 등이 다르다면 다른 방식으로 연산(오버로딩, overloading)된다.

 

 

---

 

JavaScript는 객체 지향 언어인가?

위 Person 예시와 같이 객체 지향적으로 프로그래밍되지만 명령형이나 함수형 프로그래밍도 지원하므로 멀티 패러다임 프로그래밍이라고도 불린다.
또한 보통 OOP 언어들은 클래스 기반인데 반해 JavaScript는 프로토타입 기반의 객체 지향 언어이다. ES6부터 class를 지원하긴 하지만 문법적 양념일 뿐 여전히 prototype 기반이다.

 

JavsScript가 Prototype-based OOP로 동작하는 방식

전역 객체인 Array 객체를 예시로, JavaScript가 어떻게 prototype 기반으로 동작하는지 알아보자 !

1. class를 생성하면 함수로 존재하는 클래스 객체와 클래스 Prototype이 만들어진다. 

두 객체는 서로를 참조한다. 생성과 동시에 Array에는 prototype이라는 속성이, Array의 Prototype은 constructor라는 속성이 생긴다.

즉 Array.prototype은 Array의 Prototype 객체를 가리키므로 Array.prototype.constructor는 자기 자신인 Array임을 이해할 수 있다.

 

2. class에 속성이나 기능을 추가한다면 Prototype에 추가된다.

클래스 그 자체는 간판이며, 실질적인 기능을 담은 Prototype은 공장이라고 생각하면 쉽다.

MDN에서 배열 메소드를 찾아볼 때 항상 Array.prototype.메소드()라고 표현된 것도 이 때문이다. 추가로 JavaScript에는 메소드가 없지만 속성으로 함수를 사용하는 것을 편의상 메소드라고 표현한다.

 

3. 클래스로 새로운 인스턴스를 생성하면 Prototype을 참조한다.

새로운 배열을 생성했을 때 __proto__라는 속성이 생겨 Prototype 객체를 참조한다. 또한 그 Prototype이 가진 기능들을 사용할 수 있는데, 배열에서 forEach이나 fill 등 여러 메소드를 쓸 수 있었던 것은 Array prototype이 가지고 있는 기능들이기 때문이다.

 

 

---

 

Prototype Chaining이 왜 중요한데?!

MDN 상속과 프로토타입을 바탕으로 정리했다.

여기서 생성자 함수 및 인스턴스 선언과 속성 할당은 아래와 같은 순서로 이루어진다.

1. doSomething 생성자 함수를 선언한다. (여기서는 일반 함수처럼 동사형으로 시작하면서 관습을 따르지 않았다 .. (?))
2. doSomething 프로토타입(공장)에 foo라는 속성을 추가한다.
3. 이 doSomething 클래스로 doSomeInstancing이라는 인스턴스를 생성한다.
4. doSomeInstancing 인스턴스에 새로운 속성 prop을 추가한다.

 

그 결과로 doSomeInstancing을 확인해보면 복잡한 객체로 이루어져있는데, 그림으로 나타낸 것과 같이 안으로 갈수록 근본에 가까워지다 결국 window 객체에서 참조를 끝낸다.

이를 바탕으로, 한 인스턴스의 속성을 찾는다는 것은 자신을 생성한 모든 프로토타입 체인들을 검토한다는 것임을 알 수 있다.

만약 doSomeInstancing.coffee를 조회한다면 브라우저는 doSomeInstancing - doSomthing.prototype - window.Object.prototype을 모두 확인하고서야 undefined를 반환할 것이다.

 

 

Prototype Chaining을 이해함으로써 복잡한 코드에서의 성능 저하를 막을 수 있다.

프로토타입의 상속에 대해 이해한다면 속성 검색에서 발생할 수 있는 성능 저하를 미리 고려할 수 있다. 존재하지 않는 속성에 접근하려는 시도를 미리 방지해 (hasOwnProperty 메소드를 통해 체인 상 어딘가에 원하는 속성이 있는지 확인할 수 있다) 탐색에 걸리는 시간을 줄일 수 있을 것이다.