[CS] 객체 지향 JavaScript Day-33

객체 지향 프로그래밍은 데이터와 기능을 한 곳에 묶어 처리합니다.
코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 오래 전부터 프로그래밍 방법론으로 매우 빠르게 적용되었습니다.

클로저란?

외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는다.
함수와 함수가 선언된 어휘적 환경의 조합

function makeCounter() {
  return {
    value: 0,
    increase: function() {
      this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

똑같은 기능을 하는 카운터를 여러 개 만드는 방법 중 하나는, 클로저 모듈 패턴을 이용할 수 있습니다. (위 예시 참고)

객체 지향 JavaScript

객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴입니다.

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

위와 같이 클래스 문법 Counter를 생성 후 counter1 = new Counter()로 호출하여 사용할 수 있습니다.

객체 지향 프로그래밍

객체 지향 언어

• "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성합니다.
• 현대 언어들은 대부분 객체 지향 특징을 갖고 있습니다.
• JavaScript: 객체 지향으로 작성 가능

데이터의 접근, 처리 과정에 대한 모형을 만들어 내는 방식을 고안했습니다. 따라서 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶어서 처리할 수 있게 되었습니다.

OOP

• OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있습니다.
  객체를 한 번 만들면 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지됩니다.

클래스와 인스턴스

• 클래스는 객체를 생성하기 위한 청사진입니다.
  이곳에 세부 사항을 넣어주면 객체가 되는 것입니다. JavaScript에서 사용하는 용어와 별개로 클래스를 통해 만들어진 객체를 인스턴스 객체 또는 인스턴스라고 부릅니다.

OOP Basic Concepts

• Encapsulation (캡슐화)
• Inheritance (상속)
• Abstraction (추상화)
• Polymorphism (다형성)

캡슐화 (Encapsulation)

• 데이터와 기능을 하나의 단위로 묶는 것
• 은닉(hiding): 구현은 숨기고, 동작은 노출
• 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음

느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미합니다.

추상화 (Abstraction)

추상화는 내부는 복잡하지만, 노출되는 부분을 단순하게 만드는 개념입니다.

추상화를 통해 유저들이 경험하고 볼 수 있는 인터페이스가 단순해집니다.

캡슐화는 코드나 데이터의 은닉에 포커스가 맞춰져있고, 추상화는 클래스를 사용하는 사람들이 필요하지 않은 메소드 등을 노출시키지 않고, 단순 이름으로 정의하는 것에 포커스가 맞춰져 있습니다.

상속 (Inheritance)

부모 클래스의 특징을 자식 클래스가 물려받는 것입니다.
일반적으로 부모/자식이라고 이야기하지만, 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속 받는다로 표현하는 것이 적합합니다.

상속 받았을 경우 속성/메소드를 추가 할 수 있습니다.

다형성 (Polymorphism)

다양한 형태를 가질 수 있다는 뜻입니다. 똑같은 메소드라 하더라도 다른 방식으로 구현될 수 있습니다.

언어가 다형성을 제공하지 않는다면, 기본(부모) 클래스에 종류별로 분기 시켜 하나씩 다르게 만들어야 하지만 다형성을 통해 문제를 해결할 수 있습니다.

OOP 내용 정리

• 캡슐화: 코드가 복잡하지 않게 만들고, 재사용성을 높입니다.
• 추상화: 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화합니다.
• 상속: 불필요한 코드를 줄이고 재사용성을 높입니다.
• 다형성: 객체 특성에 맞게 달리 작성하는 것이 가능해집니다.

클래스와 프로토타입

JavaScript는 프로토타입 기반 언어입니다. 프로토타입은 원형 객체를 뜻합니다.

프로토타입 체인

객체 지향 프로그래밍의 특성 중 "상속"을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용합니다.

자식은 부모의 특징을 상속받아 속성과 메소드를 사용할 수 있습니다.