[TIL] Day22 #OOP #Class #Instance #Prototype

✍🏻 2022.05.25.Wednesday
[TIL] Day22
[SEB FE] Day22

1️⃣ 객체 지향

📎 객체 지향 프로그래밍(OOP, Object-oriented programming)

• 프로그램 설계 철학
• OOP의 모든 것은 ‘객체'로 그룹화
• 이 객체는 한 번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지
• 재사용성을 얻을 수 있음
• 사람이 ‘세계를 보고 이해하는 방법’을 흉내 낸 방법론
  
  
• 하나의 모델이 되는 청사진 👉 class
• 그 청사진을 바탕으로 한 객체 👉 instance

↔️ ➰ 절차적 언어

• 초기의 프로그래밍 언어 (ex. C, 포트란)
• 순차적인 명령의 조합
  
  
• ✋ 절차적 코드의 경우 데이터의 형태가 바뀔 때마다 코드 흐름에 큰 영향을 미쳐 유지보수 어렵

📎 OOP 주요 개념

1. 캡슐화(Encapsulation)

• 데이터(속성) & 기능(메서드)을 하나의 객체 안에 넣어서 묶는 것
• 느슨한 결합(Loose Coupling)에 유리: 언제든 구현 수정 가능
  • 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아닌, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것
• 은닉화(hiding): 내부 데이터/구현이 외부로 노출되지 않도록 만드는 것
  ⇒ 구현은 숨기고, 동작(메서드)은 노출
• 👍 코드가 복잡하지 않게 만들고, 재사용성을 높임

2. 추상화(Abstraction)

• 내부 구현은 복잡한 반면, 실제로 노출되는 부분은 단순하게 만든다는 개념
• 인터페이스가 단순해짐
• 추상화의 본질: 클래스 정의 시, 메서드와 속성만 정의한 것 👉 Interface
• 👍 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향 최소화
  
  

✅ 캡슐화 👉 코드나 데이터의 은닉에 포커스
✅ 추상화 👉 클래스 사용자가 필요하지 않은 메서드를 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스

3. 상속(Inheritance)

• 부모 클래스의 특징을 자식 클래스가 물려받는 것
• ‘기본 클래스의 특징을 파생 클래스가 상속받는다’
• 👍 불필요한 코드를 줄여 재사용성을 높임

4. 다형성(Polymorphism)

• poly;많은 + morph;형태 ⇒ 다양한 형태
• 같은 이름을 가진 메서드라도 조금씩 다르게 작동
• 만약 다형성을 제공하지 않는다면, 부모 클래스에 종류별로 분기를 시켜서 하나하나 다르게 만들어야 함
• 👍 동일한 메서드에 대해 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능

✋ JS에서는 은닉화의 한계(private 키워드는 없지만, # 키워드 도입) & 추상화(interface) 기능의 부재 존재

➰ 메서드 호출
객체.메서드() 형식으로 객체 내에 메서드 호출

✋ 화살표 함수 사용 ❌

➰ 클로저 모듈 패턴 이용 → 새로운 객체 생성

function makeCounter() {
	let value = 0;
	return {
		increase: function() {
			value++;
		},
		decrease: function() {
			value--;
		},
		getValue: function() {
			return value;
		}
	}
}

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

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

☑️ Class

➰ 속성 & 메소드

• 클래스에 속성과 메소드를 정의하고 인스턴스에서 이용

📎 ES5: Class 작성 문법

• 함수로 정의
• 클래스 이름은 보통 대문자로 시작, 일반명사로 작성
• prototype 키워드를 사용해야 메서드 정의 가능

function Car(brand, name, color) {
	// instance 생성시 실행되는 code
	this.brand = brand;
	this.name = name;
	this.color = color;
}

// 메소드 정의
Car.prototype.refuel = function() {
	console.log('연료 공급!!');
}

Car.prototype.drive = function() {
	console.log('운전 시작!!');
}

📎 ES6: Class 작성 문법

• class 키워드를 이용하여 정의
• 생성자(constructor) 함수 존재 (instance 생성시 실행되는 코드)

class Car {
	// 속성 정의
	// 생성자 함수
	constructor(brand, name, color) {
		// instance 생성시 실행되는 code
		this.brand = brand; // 만들어진 인스턴스에 해당 브랜드를 부여
		this.name = name;
		this.color = color;
	}

	// 메소드 정의
	refuel() {
		console.log('연료 공급!!');
	}

	drive() {
		console.log('운전 시작!!');
	}
}

✋ this keyword: 인스턴스 객체 의미

☑️ Instance

• new 키워드를 사용하여 생성
• 각각의 인스턴스는 Car라는 클래스의 고유한 속성&메소드를 가짐

// 인스턴스 생성
let avanate = new Car('hyundai', 'avante', 'black');

// 인스턴스에서의 사용
avante.color;   // 'black'
avante.brand;   // 'hyundai'
avante.drive(); // '운전 시작!!'

// 배열은 Array의 instance

// 배열 정의 = Array의 instance 생성
let arr = new Array('software', 'engineering');
arr.length; // 2
arr.push('bootcamp'); // new element 추가

🤷‍♀️ Array.prototype.push()에서 prototype이 붙어있는 이유는?
      👉 push 구현이 원형 객체에 정의되어 있기 때문

prototype	constructor	this
모델의 청사진을 만들 때 쓰는 원형 객체(original form)	인스턴스가 초기화될 때 실행하는 생성자 함수	- 함수가 실행될 때, 해당 스코프마다 생성되는 고유한 실행 context - new 키워드로 인스턴스 생성시, 해당 인스턴스가 바로 this의 값

• 클래스: 일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어/청사진 (생성자 함수 포함)
• 인스턴스: 클래스의 사례(instance object) / 클래스를 통해 만들어진 객체

✋ 클래스에서 생성자를 통해 세부 사항(속성)을 넣으면 객체가 됨

---

2️⃣ Prototype

• JS는 Prototype(원형 객체) 기반 언어
  👉 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미
  
• ➰ 상속되는 속성과 메소드들은 각 객체가 아닌 객체의 생성자의 prototype 속성에 정의되어 있음

➰ Prototype 해석
1. 함수의 멤버인 prototype 속성은 프로토타입 객체를 참조하는 속성
2. 함수와 new 연산자를 통해 생성한 객체의 프로토타입 객체를 지정해주는 역할

📎 .proto

• 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 참조하는 숨겨진 링크로써 프로토타입을 의미
• 많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현

✋ Array는 클래스 - 배열은 Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드 존재

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

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

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

// Human 클래스의 생성자 함수(constructor)는 Human
Human.prototype.constructor === Human;     // true

// Human 클래스의 prototype은 Human 클래스의 인스턴스인 kimcoding의 __proto__
Human.prototype === kimcoding.__proto__;   // true

// Human 클래스의 sleep 메서드는 프로토타입에 있으며,
// Human 클래스의 인스턴스의 kimcoding에서 kimcoding.sleep으로 사용 가능
Human.prototype.sleep === kimcoding.sleep; // true

📎 클래스, 인스턴스, 프로토타입의 관계

아래 참고했던 사이트가 이해하기 쉽게 설명되어 있어서 참고해서 관계도?를 그려봤다.

✔️ 프로토타입의 얽힌 관계를 이해하기 좋았던 참고 사이트
✔️ 프로토타입 실습 가이드 사이트