OOP (Object Oriented Programming)

객체 지향 프로그래밍 - 현실 세계를 기반으로 프로그래밍을 만들 때에 유용합니다

하나의 모델이 되는 blueprint를 만들고, - Class

그 blueprint를 바탕으로 객체를 만드는 프로그래밍 패턴 - Instance Object

인스턴스를 만들때에는 new 키워드를 사용합니다

ES5(ECMAScript 5) vs ES6(ECMAScript 6)

// ES5로 만든 코드
function Car(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
}

// ES6에서 class라는 키워드를 이용해서 정의
class Car {
  constructior(brand, name, color) {
    // 인스턴스가 만들어질 때 실행되는 코드
  }
}

각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됩니다.

클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용합니다.

자동차의 속성과 메소드

 

클래스: 속성의 정의

아래 method 호출하기 예제코드를 보시면 this 라는 새로운 키워드가 등장합니다.

객체지향 프로그래밍에서는 빠지지않고 등장합니다!

this는 인스턴스 객체를 의미합니다. parameter로 넘어온 속성은 인스턴스 생성시 지정하는 값이면 this에 할당한다는 것은 만들어진 인스턴스에 해당 속성을 부여하겠다는 의미입니다.

 

Method 호출 실습하기

Method 호출은 객체.Method() 와 같이 객체 내에 method를 호출하는 방법을 의미합니다.

*주의* Method 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다. 

// Singleton 패턴으로 구현한 counter 예시
let counter1 = {
  value: 0,
  increase: function() {
    this.value++; // method 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--;
  },
  getValue: function() {
    return this.value;
  }
}

counter1.increase();
counter1.getValue() // 1
counter1.decrease();
counter1.getValue() // 0

클로저를 이용해 매번 새로운 객체 생성하기

Singleton 패턴은 하나의 객체만 만들 수 있습니다. 똑같은 기능을 하는 카운터가 여러 개 필요하다면, 아래 코드와 같이 클로저 모듈 패턴을 이용할 수 있습니다.

// 위의 예제 코드에서 부터 이어집니다
let counter1 = makeCounter();
let counter2 = makeCounter();

prototype? constructor? this ?

ES6 방식으로 작성한 코드

 

절차적 언어 - 일반적으로 초기의 프로그래밍 언어 / 순차적인 명령의 조합

 

객체 지향 언어 - 현대의 언어(Java, C++, C#) / 클래스라고 부르는 데이터 모델의 blueprint를 사용해 코드 작성

객체 지향 프로그래밍이라는 패러다임이 등장하면서, 순차적으로 작동하는 것을 넘어 데이터와 기능이 별개로 취급되지 않고 한번에 묶어서 처리할 수 있게 되었습니다.

 

OOP(Object Oriented Programming) - 프로그램 설계 철학

모든 것은 객체로 그룹화되고 4가지 주요 개념을 통해 재사용성을 얻을 수 있습니다.

- Encapsulation (캡슐화) : 데이터와 기능을 하나의 단위로 묶는 것. 구현은 숨기고, 동작은 노출시킴

언제든 구현을 수정할 수 있음 -> 느슨한 결합(Loose Coupling)에 유리

 

- Inheritance (상속) : 부모 클래스의 특징을 자식 클래스가 물려받는 것입니다.

예를들어 사람이라는 클래스가 있다고 봤을 때 추가로 학생이라는 클래스를 만든다면 학생의 본질은 결국 사람이므로 상속을 이용해 사람 클래스를 상속받을 수 있습니다. 추가적으로 학습 내용, 공부하다 같은 속성/메소드를 추가합니다.

 

- Abstraction (추상화) : 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념

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

클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스라고 부릅니다. 이것이 추상화의 본질입니다.

 

- Polymorphism (다형성) : 많은(poly) 형태(morph)를 가짐

Textarea, Select, Checkbox는 HTML에서 전부 Element라고 부릅니다. 이들은 각기 다른 형태를 가지고 있고 이들의 공통 부모인 HTML Element에 render라는 메소드를 만들고 실행 시키면 같은 이름을 가진 메소드라도 다르게 작동합니다.

 

JavaScript는 프로토타입 기반 언어입니다. 여기서 프로토타입(Prototype)은 원형 객체를 의미합니다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

Human.prototype.constructor === Human; // 결과는 무엇일까요? true
Human.prototype === kimcoding.__proto__; // 결과는 무엇일까요? true
Human.prototype.sleep === kimcoding.sleep; // 결과는 무엇일까요? true

Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계

 

이 그림은 반드시 기억하세요!

우리가 흔히 쓰는 배열 역시 원리가 동일합니다! 

배열을 Array클래스의 인스턴스로 생각할 수 있고, 프로토타입에 다양한 메서드가 존재합니다.

Must know concepts

OOP의 특성중 상속을 JS에서 구현할 때에는 프로토타입 체인을 사용합니다.

예시로 학생과 사람이라는 클래스가 각각 존재한다고 가정후 클래스 Human의 메서드와 속성을 구현해보겠습니다.

let kimcoding = new Human('김코딩', 30);
// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();

학생은 학생이전에 사람이기 때문에 클래스 Student는 Human의 기본적인 메서드를 상속받을 수 있습니다. 다만 학생은 일반적인 사람의 특징에 추가적인 특징이 필요하므로 클래스 Student의 메서드와 속성을 구현해보겠습니다.

let parkhacker = new Student('박해커', 22);
// 속성
parkhacker.grade;
// 메서드
parkhacker.learn();

JS에서는 extends 와 super 키워드를 통해 상속을 구현할 수 있습니다.