Javascript - OOP / Class / Instance

노종열·2022년 7월 22일

JavaScript

클래스와 인스턴스를 설명하기 전에 OOP가 무엇인지 알고 들어가자.

OOP

객체 지향 프로그래밍 (Object-oriented programming)
컴퓨터 프로그래밍의 패러다임 중 하나
컴퓨터 프로그램을 명령어의 목록으로 보는 시각이 아닌 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 따라서 OOP의 모든 것은 객체로 그룹화 됨.

OOP Basic Concepts

Encapsulation(캡슐화)

데이터(속성)와 기능(메서드)을 하나의 단위(하나의 객체)로 묶는 것
은닉화: 구현은 숨기고, 동작은 노출시킴 즉, 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것.
느슨한 결합(Loose Coupling)에 유리
- 언제든 구현을 수정할 수 있음
- 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미한다.
캡술화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.

Inheritance(상속)

부모 클래스의 특징을 자식 클래스가 물려받는 것을 말함.
부모 / 자식이라는 키워드 보다 전문성 있는 키워드를 사용하자.
"기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속받는다" 라고 표현하는 것이 적합하다.

<기본 클래스>
class Car {
	constructor(brand, name, color) {
    	/.../
    }
  }
  
<파생 클래스>
class SuperCar {
	constructor(brand, name, color, engine, speed) {
    	/.../
    }
  }

앞서 구현했던 Car 클래스의 속성과 메서드를 다시 구현하는 것은 비효율적이다.
따라서 상속을 이용하여 기본 클래스의 속성/메서드를 받고 파생 클래스의 속성/메서드를 추가하는 것이 효율적이다.

Abstraction(추상화)

내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념
추상화와 캡슐화는 다른 것!
캡슐화가 코드나 데이터의 은닉에 포커스가 있다면,
추상화는 클래스 사용자가 필요하지 않는 메서드 등을 노출시키지 않고, 단순한 이름으로 정의한다는 것에 포커스.

Polymorphism(다형성)

Poly는 많은, morph는 형태라는 뜻을 가진다. 따라서 다양한 형태를 가질 수 있다는 의미이다.
객체 역시 똑같은 메서드라 하여도, 다른 방식으로 구현될 수 있다.
만약 다형성을 제공하지 않는다면, 기본 클래스에 종류별로 분기를 시켜 하나하나 다르게 만들어야 할 것이다.

OOP 정리

캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높인다.
추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화한다.
상속 역시 불필요한 코드를 줄여 재사용성을 높인다.
다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해진다.

클래스

일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진 객체를 만들기 위한 생성사(constructor) 함수를 포함한다.
속성과 메서드를 가진다.

자동차를 예로 들 때,

속성 : 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력
메서드 : 연료 주입, 속력 설정, 운전 등 객체에 딸린 함수를 말한다.

인스턴스

클래스의 사례(instance object)
클래스를 바탕으로 만들어진 객체라고 볼 수 있다.
자동차를 예로 들면 컬러나 바퀴에 대한 생김새 등이 다를 수 있다.

new 키워드

class Tea {
	/.../
}

let coffee = new Tea('coffee')

<new 키워드 생략의 경우>
'TypeError가 뜬다'

ES5 클래스 작성 vs ES6 클래스 작성 문법

<ES5>
function Car(brand, name, color) { //클래스 함수로 정의
  this.brand = brand;	//속성의 정의
  this.name = name;
  this.color = color;
  
  Car.prototype.refuel = function() { //메소드 정의
    //연료 공급 구현 코드
}
  Car,prototype.drive = function() {
    // 운전을 구현하는 코드
}

<ES6>
class Car { //클래스 class로 정의
  constructor(brand, name, color) { //속성의 정의
 	this.brand = brand;
    this.name = name;
    this.color = color;
    
    refuel() { //메소드 정의
    }
    
    drive() {
    }
  }
}