[JavaScript] 클래스와 인스턴스

객체 지향 프로그래밍

• 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지 정의해 객체들 간의 상호작용을 통해 프로그램을 만드는 것
• 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법
• 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴

- 객체: 실생활에서 쓰는 모든 것

하나의 모델이 되는 청사진을 만들고,  👉 "class"
그 청사진을 바탕으로 한 객체를 만드는 👉 "instance"
프로그래밍 패턴 👉 객체 지향 프로그래밍

---

class 정의하기! ES5 VS ES6

< ES5 >

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

< ES6 >

class Car{ // class 키워드를 통해 생성
	constructor(brand, name, color){ // 생성자 함수라고 부른다.
    	// 인스턴스가 만들어졌을 때 실행되는 코드
    }
}

---

instance(객체) 만들기

< new 키워드 >

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');
// new 키워드를 사용하여 객체를 만들면, 즉시 생성자 함수가 실행이 돼 새로운 객체 인스턴스가 할당

---

속성 & 메소드

• 속성: 위의 코드에 나와 있는 constructor(brand, name, color) 중 brand, name, color가 클래스의 속성
• 메소드: 객체에 딸린 함수

---

class 속성 정의하기! ES5 VS ES6

< ES5 >

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

< ES6 >

class Car{ // class 키워드를 통해 생성
	constructor(brand, name, color){ // 생성자 함수라고 부른다.
	  this.brand = brand;
  	  this.name = name;
 	  this.color = color;
    }
}

---

class 메소드 정의하기! ES5 VS ES6

< ES5 >

function Car(brand, name, color){
	this.brand = brand;
    this.name = name;
    this.color = color;
    
    Car.prototype.refuel = function(){
    	// 연료 공급을 구현하는 코드
    }
    
    Car.prototype.drive = function(){
    	// 운전을 구현하는 코드
    }
}

< ES6 >

class Car{ // class 키워드를 통해 생성
	constructor(brand, name, color){ // 생성자 함수라고 부른다.
	  this.brand = brand;
  	  this.name = name;
 	  this.color = color;
    }
    
    refuel(){
    	// 연료 공급을 구현하는 코드
    }
    
    drive(){
    	// 운전을 구현하는 코드
    }
}

---

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