Object-oriented Programming in JavaScript: Made Super Simple | Mosh강의를 정리한 내용입니다.

OOP 의 특징

  • Encapsulation
  • Abstraction
  • Inheritance
  • Polymorphism

📎 절차 지향 프로그래밍

  • 프로그램이 여러 개들의 함수로 구성된다. 함수, 변수에 각각 데이터가 저장된다.
  • 짜기 쉽고, 간결하지만 프로그램이 커지면서 함수가 많아질 수 록 복사하는 코드들이 많아지고 하나의 함수를 고치면 줄줄이 연속으로 다른 함수도 고쳐야 하는 상황이 발생한다.
  • 일명 스파게티 코드

이러한 문제점을 해결하기 위!해!서 객체 지향 프로그래밍 이 등장한다.

📎 객체 지향 프로그래밍의 특징

  • 객체란 쉽게 말해서 관련된 변수(variables)과 해당 변수들을 조작하는 함수(function)들을 한 unit으로 묶은 것

1. Encapsulation 캡슐화

PP.jpeg

  • 절차 지향은 함수의 parameter가 많아진다. 함수의 parameter는 적으면 적을 수록 좋다.

OOP.jpeg

  • 객체 지향은 Object로 묶었기 때문에 인자 필요 없음, 코드 수정도 쉽다. 즉 하나의 객체로 묶을 수록 function의 인자값이 줄어들고 함수가 쉬워진다.

2. Abstraction, 추상화

  • DVD 플레이어를 예로 들면 겉은 재생, 정지, 빨리 감기 등의 버튼으로 되어있지만 내부에는 매우 복잡한 회로로 구성되어있다.
    하지만 사실 내부에 어떤 구조로 되어있는지 알 필요까지 없다. 밖에 있는 몇개의 버튼만으로 DVD 플레이어를 제어할 수 있기 때문이다.

마찬가지로 Object 내에서도 밖에서 접근하지 못하게 properties 와 methods를 숨길 수 있다.

Simple interface
객체가 메소드나 속성들을 많이 가지고 있지 않기 때문에 객체에 대한 이해가 쉽고 조작이 쉬워진다.
Reduce the impact of Change
변수명이나 메소드를 변경해도 그 변경으로 바꿔야하는 코드가 줄어든다. 밖에서는 내부 private code를 접근하지 조차 못하기 때문에 !

❗️이후 Private Properties 에서 코드로 확인 가능

3. Inheritance, 상속

  • 중복 코드를 줄여줌 !

OOP-Inheritance.png

  • Html 태그 중 TextBox, Select, CheckBox 는 hidden, innerHTML, click(), focus() 라는 공통의 속성을 가지고 있다.
  • 각각의 모든 엘리먼트에 속성들을 정의 해줄 필요 없이 HTMLElement라는 generic object로 정의 후 다른 오브젝트들이 이 속성, 메소드들을 상속받게 하면 된다.

4. Polymorphism

  • Poly(Many) + morph(Form)

  • 긴 switch, case 문을 막아줌

  • 각각의 html 엘리먼트 들은 화면에 렌더되야한다. 하지만 각자 렌더링되는 방법이 다 다르다.
    만약 이런 html elements 들을 procedural 방법으로 렌더한다고 하면 이럴것이다.

    switch(...){
    case 'select' : renderSelect();
    case 'text' : renderTextBox();
    case ...
    case ...
    }

    이런 복잡한 switch 문을 쓰지 않고, object를 이용하면 각각의 object 마다 다른 render() 를 사용할 수 있다.

OOP-polymorphism.jpeg

element.render();

결국 OOP를 사용하면 코드가 비교적 간단해지고, 재사용이 쉬워진다.

다음은 자바스크립트에서 객체를 만드는 방법과 Constructors에 대해서 알아보고자 한다.