클래스를 이용한 모듈화

메소드 호출

메소드 호출은 객체.메소드()와 같이 객체 내에 메소드를 호출하는 방법을 의미한다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

💻 싱글톤(Singleton) 패턴으로 규현한 counter 예시

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

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

💻 클로저 모듈 패턴으로 구현한 counter 예시

클래스와 인스턴스

객체 지향 프로그래밍이란?

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

• 하나의 모델이 되는 청사진 = class(클래스)
• 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 = instance(인스턴스)

객체 생성 방법

• new 키워드를 써서 만든다

클래스 이름 규칙

• 첫글자 대문자
• 일반 명사

function Car(brand, name, color) { // es5 방식
  // 인스턴스가 만들어질 때 실행되는 코드
  // 생성자 함수는 return 값을 만들지 않는다
}

class Car { // es6 방식
  constructor(brand, name, color) {
    // 인스턴스가 만들어질 때 실행되는 코드
    // 생성자 함수는 return 값을 만들지 않는다
  }
}

💻 함수, class 키워드를 이용하여 정의하는 방법

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');

💻 new 키워드를 사용하여 인스턴스를 만드는 방법

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

💻 OOP 패턴으로 구현한 counter 예시

속성	메소드
brand	refuel()
name	setSpeed()
color	drive()
currentFuel
maxSpeed

function Car(brand, name, color) { // es5 방식
  this.brand = brand;
  this.name = name;
  this.color = color;
}

class Car { // es6 방식
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

💻 this라는 인스턴스 객체에 속성을 할당하는 예시

function Car(brand, name, color) { // es5 방식
  Car.prototype.refuel = function() {
    // 연료 공급을 구현하는 코드
  }

  Car.prototype.drive = function() {
    // 운전을 구현하는 코드      
  }
}

class Car { // es6 방식
  constructor(brand, name, color) {
  }

  refuel() {
    // 연료 공급을 구현하는 메소드
  }

  drive() {
    // 운전을 구현하는 메소드
  }
}

💻 class 안쪽에 만드는 메소드 정의 예시(ES6)

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); // 아반떼가 운전을 시작합니다

let mini = new Car('bmw', 'mini', 'white');
avante.color; // 'bmw'
avante.refuel(); // 미니에 연료를 공급합니다

💻 인스턴스에서의 사용

prototype	모델의 청사진을 만들 때 쓰는 원형 객체
constructor	인스턴스가 초기화될 때 실행하는 생성자 함수
this	함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context. new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값이 됨

절차적 언어

• 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부름 (C, 포트란 등)
• 절차적 언어는 순차적인 명령의 조합

객체 지향 언어

• 클래스라고 부르는 데이터 모델의 청사진을 사용해 코드 작성
• 현대의 언어들은 대부분 객체 지향의 특징을 갖고 있음(java, c++, c# 등)
• javascript : 객체 지향으로 작성 가능

OOP

• OOP는 프로그램 설계 철학
• OOP의 모든 것은 객체로 그룹화
• OOP의 4가지 주요 개념을 통해 재사용성 획득 가능

클래스와 인스턴스

• 클래스는 일종의 원형으로 객체를 생성하기 위한 아이디어나 청사진
• 인스턴스는 클래스의 사례
• 클래스는 객체를 만들기 위한 생성자 함수를 포함

OOP의 4가지 주요 개념

캡슐화

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

추상화

• 내부 구현은 복잡한데 실제로 노출되는 부분은 단순하게 만든다는 개념

상속

• 부모 클래스의 특징을 자식 클래스가 물려받는 것

다형성

• 다양한 형태의 다른 말. 객체 역시 똑같은 메소드라 하더라도 다른 방식으로 구현될 수 있음

클래스와 프로토타입

javascript는 프로토타입 기반 언어이다. 여기서 프로토타입은 원형 객체를 의미한다.

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; // 결과는 무엇일까요?
Human.prototype === kimcoding.__proto__; // 결과는 무엇일까요?
Human.prototype.sleep === kimcoding.sleep; // 결과는 무엇일까요? 

💻 OOP 패턴으로 구현한 Human 예시

프로토타입 체인

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

// 속성
kimcoding.age;
kimcoding.gender;
// 메소드
kimcoding.eat();
kimcoding.sleep();

💻 클래스 Human의 속성과 메소드 예시

let parkhacker = new Student('박해커', 22);

// 속성
parkhacker.grade;
// 메소드
parkhacker.learn();

💻 클래스 Student의 속성과 메소드 예시