25일차, 객체지향 프로그래밍

2021. 08. 23 월요일

1. Today's Key points!🔑

• 객체 지향 프로그래밍
• class
• class, prototype, instance의 관계
• Beesbeesbees

2. 정리해보자!🧹

객체 지향 프로그래밍에 대해 배웠다. 하나씩 정리해 보자.

class? instance? 객체 지향 프로그래밍? 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 한가지 예를 들자면, 자동차 생산을 위한 설계도에 비유할 수 있을 것이다. 자동차가 기능하기 위해서는 네 바퀴와 핸들, 좌석 그리고 엔진이 필요할 것이다. 이러한 기본적인 설계는 차의 종류에 상관없이 대체적으로 동일하게 적용된다. 이런 설계도(청사진)를 바탕으로 각각의 객체가 특정한 자동차 모델로 나오게 된다. 따라서, 이 비유대로 말해보자면 청사진(blueprint)가 클래스(class)이고, 객체(object)가 인스턴스(instance)라고 할 수 있다.

그럼 클래스를 어떻게 만들까? 클래스를 만드는 방법으로는 크게 두 가지가 있다.

ES5 방법

function Car(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}
Car.prototype.refuel = function() {
  console.log(`${this.name}차량 주유합니다.`);
}
Car.prototype.drive = function() {
  console.log(`${this.name}차량 운전 시작합니다.`);
}//brand, name, color가 속성. Car.prototype.refuel, Car.prototype.drive가 메소드.

ES6 방법

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  refuel() {
    console.log(`${this.name}차량 주유합니다.`);
  }
  drive() {
    console.log(`${this.name}차량 운전 시작합니다.`);
  }
}

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');
//avante, mini, beetles가 인스턴스(instance). 
//그리고 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다.

let arr = ['code', 'states', 'pre'];
arr.length; // 3;
arr.push('course'); // ['code', 'states', 'pre', 'course']
let arr = net Array('code', 'states', 'pre'); // 첫째줄에서 우리가 배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일하다.
//예를 들면,
class Array {
  constructor(속성들...){ }
  push() {
    //새 element를 추가합니다.
  }
  filter() {
    // 필터합니다.
  }
  ...
}
//이런식으로 Array클래스가 있고 이런 원리를 우리가 사용하고 있었다.

 

객체 지향 프로그래밍이란? 데이터와 기능을 한번에 묶어서 처리할 수 있는 프로그래밍. 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어서 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식. 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있다.

--> 내가 이해한 객체 지향 프로그래밍 : 자주 쓸 데이터와 기능을 객체에 저장시켜 놓고, 내가 필요한 기능을 쓰고 싶으면 객체에서 꺼내와 사용한다. 

객체 지향 프로그래밍(Object Oriented Programming, OOP)는 4가지 주요 컨셉이 있는데 간단하게 설명하고 넘어가겠다.

• 캡슐화(Encapsulation) : 객체안에 코드를 구현해놓은 것을 은닉하고 동작은 노출.
• 추상화(Abstraction) : 내부 기능의 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만드는 것.
• 상속(Inheritance) : 부모 클래스의 특징을 자식 클래스가 물려받음으로써 불필요한 코드를 줄이고 재사용성을 높인다.
• 다형성(Polymorphism) : 같은 메소드를 사용하더라도 결과물은 다양하게 구현될 수 있다.

 

그럼 class, prototype, instance의 관계를 이해해보자.

JavaScript는 프로토타입 기반 언어다. 여기서 프로토타입(Prototype)은 원형 객체를 의미한다. 내가 만약 Human이라는 class를 생성한다고 해보자.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sleep() {
    return `${name}이(가) 잠을 잡니다.`;
  }
}

그리고 const kimcoding = new Human('김코딩', 21)이라는 인스턴트를 만들면 constructor 함수에 의해 kimcoding안에는 __proto__, name, age라는 property가 만들어진다. 여기서 __proto__는 Human's prototype 객체를 가르키게 된다. 그럼 여기서 kimcoding.sleep()을 하면 우선 kimcoding의 property중에 sleep이 있는지 찾고, 없으면 __proto__를 통해서 Human's prototype 객체안에 있는지 찾는다. 찾아서 있으면 그 값이 도출된다.

이렇게 오늘 섹션2 첫강의를 들었고 또 새로운 개념이 머리에 들어오면서 뒤죽박죽이 되긴했지만, 천천히 다시 읽어보면서 정리를 했다. 오늘 그래서 가장 중요하다고 생각하는건 class를 어떻게 사용하고, 이것이 어떤 방식으로 동작하는지를 이해하는 것이라고 생각한다. 그리고 이걸 가지고 코딩을 잘 하면 되는 것이다. 

3. Sprint 복기

class를 어떻게 사용하고, 어떻게 상속시키는지를 공부하는 과제였다.

Grub이라는 클래스를 만들어 Bee 클래스를 상속시키고, 이 Bee클래스에 ForagerBee, HoneyMarkerBee를 상속시킨다.

ForagerBee는 화분을 찾아다니는 벌이고, HoneyMakerBee는 꿀을 채집하는 벌이다.

class Grub {
  constructor(age, color, food) {
    this.age = 0;
    this.color = 'pink';
    this.food = 'jelly';
  }
  eat() {
    return `Mmmmmmmmm ${this.food}`
  }
}
 
class Bee extends Grub {
  constructor(age, color, food, job){
    super(food);
    this.age = 5;
    this.color = 'yellow';
    this.job = 'Keep on growing';
  }
}
 
class ForagerBee extends Bee {
  constructor(age, color, food, job, canFly, treasureChest){
    super(color, food)
    this.canFly = true;
    this.treasureChest = [];
    this.age = 10;
    this.job = 'find pollen'
  }
  forage(tresure) {
    this.treasureChest.push(tresure);
  }
}
 
class HoneyMakerBee extends Bee{
  constructor(age, color, food, job, honeyPot){
    super(color, food);
    this.honeyPot = 0;
    this.age = 10;
    this.job = 'make honey';
  }
  makeHoney() {
    this.honeyPot++;
  }
  giveHoney() {
    this.honeyPot--;
  }getHoney() {return this.honeyPot;}
}

 

그럼 클래스로 만들어진 벌로 보물을 찾아보고, 꿀을 채취해보자.🐝🐝🐝🐝