객체지향프로그래밍(OOP) in JS

유자·2020년 10월 31일

JavaScript Prototype TIL 객체지향

Object Oriented Programming (OOP) in JavaScript

OOP는 무엇인가

🐾 OOP에 앞서 프로그래밍 언어를 나누는 방식부터 보자

큰 범위로 봤을 때, 프로그래밍 언어는 아래와 같이 나눌 수 있다

Machine Languages (기계어)
Assembly Languages (어셈블리어)
High-Level Languages (low-level일수록 어셈블리 언어에 가깝고 high-level일수록 인간어에 가깝다.)

자바스크립트는 High-level Languages에 속함

Machine Languages

1과 0로 구성되어있음. 즉 컴퓨터가 알아들을 수 있는 언어
프로그래밍하기 어려움

Assembly Languages

기계어에서 좀 더 프로그래밍하기 쉽게 만들어진 언어
하지만 이또한 명령어,변수가 한정되어 있음 (대략 10개)
사용할 CPU에 따라 언어가 달라짐

High-level Languages

어셈블리어에서 더 프로그래밍하기 좋게 발전된 언어
C의 경우 현재 사용되는 언어 중에 가장 어셈블리어와 비슷

고레벨 언어로 갈수록 Portability(휴대성), Flexibility(유연성) 이 좋고, Implematation(실행)하기가 쉽다.
기계어로 갈수록 Speed of Execution(실행 속도)가 빨라지고 코드의 Density(밀도)가 높아지지만, 특정 머신에 종속되는 언어일 확률이 높다.

더하여 고급언어는 아래와 같이 두가지 그룹으로 나눌 수 있다
1. Procedural languages 절차적언어
2. Object-Oriented languages 객체지향언어

Procedural Languages 절차적언어

초기 High-level 언어는 절차적 언어이다. (C, HTML 등)

Object-Oriented Languages 객체지향언어

데이터의 blueprint(청사진)을 사용한다. (C++, Python 등)
자바스크립트 또한 초반에는 아니었지만 최근에는 객체지향언어로 바뀌고 있다.

🐾 그래서 OOP는?

프로그램을 디자인하는 방법론
청사진(blueprint)이라는 기본 속성을 미리 만들어 놓고, 기본 속성을 상속받는 무언가(instance)를 만들어내는 것

OOP의 중요한 4가지 개념

Encapsulation 캡슐화 : 들고다니기 좋게 하는 것 = class 안에 property(속성) 및 method(메소드) 들을 저장한다.
Abstraction 추상화 : 알기 쉽게 하는 것 = 복잡한 코드를 알기 쉬운 키워드로 치환한다.
Inheritance 상속성 : 부모의 재산을 자식이 받는 것 = 상속을 통해 부모 class, 자식 class 가 생기는데, 이때 자식은 부모의 속성, 메소드를 물려받는다.
Polymorphism 다형성 : 같은 부모 밑에 같은 자식 하나 없는 것 = 부모 class 밑의 자식 class는 부모의 속성, 메소드에 overwriting을 통해 다양한 변화를 줄 수 있다.

클래스는 빵틀이고, 인스턴스는 빵틀로 찍어낸 빵이다

Object를 생성하는 방법 2가지

1. Object Literal Syntax

const obj1 = {};

2. Object Constructor Syntax

const obj2 = new Object();

여기서 obj2는 Object의 instance라고 말할 수 있다

Object를 생성하는 constructor (생성자 함수) 정의 방법 2가지

1. Class (ES6)

class Car { //class 안에 생성자 함수, 메소드 전부 정의
  constructor(color, brand) {
    this.color = color;
    this.brand = brand;
  }
  drive() {
    console.log(`I\'m on ${this.brand}`)
  }
}

let mine = new Car('red','avante');
mine; // Car {color: "red", brand: "avante"}
mine.drive(); // I'm on avante

2. Pseudoclassical

function Car(color,brand) { //생성자 함수 먼저 정의
    this.color = color;
    this.brand = brand;
}

Car.prototype.drive = function() { // prototype에 메소드 따로 정의
  console.log(`I\'m on ${this.brand}`);
}


let yours = new Car('blue','morning');
yours; // Car {color: "blue", brand: "morning"}
yours.drive(); // I'm on morning

Prototype은 무엇이고 왜 사용해야 하는가

왜 객체지향을 배우는데 prototype을 알아야하는가 묻는다면, 자바스크립트는 프로토타입 기반 언어이기 때문이라고 말할 것이다.
자바스크립트는 원래 class를 갖고 있지 않았다.
때문에 기본 기능으로라도 객체지향을 구현하기 위해 다양한 시도가 있었으며, 결국에는 prototype을 사용한 객체지향을 구현해냈다.
최근 들어 class문법이 추가되어 객체지향을 더 쉽게 구현할 수 있게되었다. 하지만 일을 하다보면 최신 기술만 사용하는 것이 아니다. 자바스크립트 고전문서를 읽거나 고전 웹사이트를 분석해야 하는 일이 생길 수도 있기 때문에 이를 대비해 prototype에 대해 반드시 알 필요가 있다.

그래서 prototype이 무엇이냐하면

함수를 만들면 자동적으로 생성되는 원형(original form) 객체이다.
그 안에는 constructor(생성자), __proto__ (prototype chain)이 있다.
constructor는 생성자 함수를 담고 있고, __protp__는 부모객체의 prototype을 연결하는 위치를 담고 있다.
prototype을 연결하는 것을 prototype chain이라고 하는데, 객체지향언어에서 중요한 개념 중 하나인 상속 을 구현한다.
더하여, 같은 constructor로부터 만들어진 instance 객체들은 모두 같은 prototype을 공유한다.