객체 지향 프로그래밍

• 하나의 모델이 되는 청사진(blueprint)을 만들고 ➡️ Class
• 그 청사진을 바탕으로 한 객체(object)를 만드는 ➡️Instance
  프로그래밍 패턴.

👉🏽자바스크립트의 '객체'와 구분하기
: 자바스크립트의 (그냥) 객체와, 클래스를 바탕으로 한 인스턴스 객체를 구분해서 쓸 것!

---

클래스

• 클래스명은 대문자로 시작, 일반명사
  (소문자로 시작, 적절한 동사 포함한 일반 함수와 구분하기 위해서)

새로운 클래스 만들기

1. [ES5] 함수로 정의

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

2. [ES6] 'class' 키워드로 정의 (🌟NEW!🌟)

• 최근에는 이 방법을 주로 사용
• 생성자(constructor) 함수 : 인스턴스가 만들어질 때 실행 / return 값을 만들지 않음.
• 🌟클래스는 생성자 함수를 포함한다🌟
• 클래스 고유의 속성과 메서드를 정의해준다.

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

---

인스턴스

새로운 인스턴스 만들기

1. 'new' 키워드를 쓴 클래스의 실행값을 변수에 할당

• 즉시 생성자 함수가 실행되며
• 변수에 클래스의 설계를 가진 새로운 객체(인스턴스)가 할당된다.
• 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖는다.

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

---

속성과 메서드

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

(클래스에서) 속성의 정의

• this : 인스턴스 객체를 의미.
• 인자로 넘어온 것들('hyundai', 'avante', 'black'..)은 각각 인스턴스의 어떤 속성(brand, name, color) 혹의 메서드의 값을 지정하는데 이용됨.

ES5

function Car(brand, name, color) { // 🌟 괄호 안은 그냥 클래스의 매개변수들(아래의 this.XX 형태의 속성과 구분할 것)
    this.brand = brand; 
    this.name = name;
    this.color = color;
}

ES6

class Car {
	constructor(brand, name, color) { // 🌟 괄호 안은 그냥 클래스의 매개변수들(아래의 this.XX 형태의 속성과 구분할 것)
    this.brand = brand;
    this.name = name;
    this.color = color;
	}
}

(클래스에서) 메서드의 정의

ES5

function Car(brand, name, color) {---생략---} // 일단 클래스 정의 후

Car.prototype.refuel = function() {
  // 연료 공급 구현하는 코드
}

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

ES6

class Car {
	constructor(brand, name, color) {---생략---}

	refuel() {
 	// 연료 공급 구현하는 코드
	}

	drive() {
	// 연료 공급 구현하는 코드
	}
}

(인스턴스에서) 속성, 메서드의 이용

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

---

개념 정리

prototype (프로토타입)

• 모델의 청사진을 만들 때 쓰는 원형 객체

constructor

• 인스턴스가 초기화될 때 (= 만들어질 때) 실행하는 생성자 함수

this

• 함수가 실행될 때, 해당 scope 마다 생성되는 고유한 실행 콘텍스트.
• new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값이 됨.

---

사용 예제

ES5

ES6

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }

  drive() {
    console.log(this.name + '가 운전을 시작합니다.')
  }
  }

let avante = new Car('hyundai', 'avante', 'black')
avante.color;
avante.drive();