[JS] OOP : 컴퓨터가 세상을 보는 방법

Yeongsan Son·2020년 11월 14일

OOP란 무엇인가

OOP(Object Oriented Programming)는 프로그래밍의 패러다임의 양대 산맥 중 하나이다.OOP는 "object"라는 개념에 기반하고 있는데, 이를 우리 말로는 "객체"라고 표현한다. 객체라는 표현을 실상에서 많이 사용하지 않는 단어이다 보니 잘 와닿지 않는다. 그렇다면 object란 무엇일까? 위키피디아에선 다음과 같이 object를 정의한다.

objects can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

위 정의에서 data와 code에 대해서 정리해 보자면 다음과 같다.

✒︎ data: fields,attributes, properties
✒︎ code: procedures, methods

즉, data와 code를 통해 클래스라는 어떠한 대상을 실체화해 인스턴스 객체를 생성할 수 있게 된다.

클래스가 생기기 전

자바스크립트에서 클래스라는 개념이 생기기 전에는 어떤 방법으로 인스턴스 객체를 생성했는지 알아보자.

1. Functional instantiation

var Car = function() {
  var someInstance = {};
  someInstance.position = 0;
  someInstance.move = {
    this.position += 1;
  };
  return someInstance;
};

var car1 = Car();
var car2 = Car();
car1.move;

위 코드는 인스턴스 객체를 다루는 함수를 만들어 인스턴스 객체를 생성하는 과정을 보여준다.
car1과 car2라는 인스턴스 객체를 만들어주고, car1은 move라는 메소드를 사용해 car1의 position에 변화를 주었다.

2. Functional Shared

var extend = function(to, from) {
  for(var key in from) {
    to[key] = from[key];
  }
};

var someMethods = {};
someMathods.move = function() {
  this.position += 1;
};

var Car = function(position) {
  var someInstance = {
    position: position
  };
  extend(someInstance, someMethods)
  return someInstance;
};

메서드를 분리해서 합해줌으로써 메모리 효율성을 높일 수 있다.

3. Prototypal

var someMethods = {};
someMethods.move = function () {
  this.position += 1;
};

var Car = function(position) {
  var someInstance = Object.create(someMethods); // 지정된 프로토타입 객체 및 속성을 갖는 새 객체 생성
  someInstance.position = position;
  return someInstance;
}

var car1 = Car(5);
var car2 = Car(10);

4. Pseudoclassical

var Car = function(position) {
  this.position = position;
}

Car.prototype.move = function () {
  this.position += 1;
}

var car1 = new Car(5);
var car2 = new Car(10);