객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한곳에 묶어서 처리함.
속성과 메서드가 하나의 "객체"라는 개념에 포함되며,
이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게,
클래스(Class)라는 이름으로 부름.

클로저 모듈 패턴

메서드 호출 : 객체.메서드() 과 같이 객체 내에 메서드를 호출하는 방법

똑같은 기능을 하는 카운터를 여러 개 만드는 방법 중 하나는,
아래 예제 코드와 같이 클로저 모듈 패턴을 이용할 수 있음.

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

똑같은 기능을 하는 ageCounter를 여러 개 만들기 위해서 클로저 모듈 패턴을 이용.
클로저 모듈 패턴을 이용함으로써 같은 코드를 그대로 복사/붙여넣기 하지 않고 재사용할 수 있게 되었음.

클래스와 인스턴스

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

앞서 언급된 청사진은 자동차 생산을 위한 설계도에 비유됨.
자동차가 기능하기 위해서는 네 바퀴와 핸들, 좌석 그리고 엔진이 필요할 것.
이러한 기본적인 설계는 차의 종류에 상관없이 대체적으로 동일하게 적용됨.
이런 설계도(청사진)를 바탕으로 각각의 객체가 특정한 자동차 모델로 나오게 되는 것.

사실, 이미 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그래밍과 무관하게 이미 존재함.
따라서 여기서는 용어를 잘 구분하는 것이 중요함.

앞으로, 그냥 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance)라고 부르겠습니다. 청사진은 클래스(class)라고 부릅니다.

객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만듬.

이때 함수를 이용하는 방법이 조금 다름.
그냥 실행하는 것이 아니고 new 키워드를 써서 만듬.
이는 새로운 인스턴스를 만드는 방법.

일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만듬.
일반적인 함수는 적절한 동사를 포함하고 소문자로 시작함.

class:

function Car(color){}

instances:
let avante = new Car ('blue');
let mini = new Car ('cyan');
let beetles = new Car ('red');

그리고 클래스를 만드는 새로운 문법이 ES6(ECMAScript 6, 비교적 최근 자바스크립트 문법)에 도입됨.
바로 class 키워드.
최근에는 ES6 방법을 주로 사용.

여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부름.
인스턴스가 만들어질 때 실행되는 코드.

참고로 생성자 함수는 return 값을 만들지 않음.

ES5 -> 클래스는 함수로 정의할 수 있음

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

ES6 -> class라는 키워드를 이용해서 정의 할 수 있음 : 최근에 주로 사용함

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

인스턴스를 만들 때에는 new 키워드를 사용.
즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당됨.

각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됨.

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

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

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

예를 들어 자동차의 속성은, 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력 등
메서드는 쉽게 말해 "객체에 딸린 함수". 연료 주입, 속력 설정, 운전 등이 메서드.

클래스 : 속성의 정의

this라는 새로운 키워드가 등장.
객체지향 프로그래밍에서는 빠지지 않고 등장하므로 간단하게 알아두기.

ES5

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

ES6

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

한마디로 this는 인스턴스 객체를 의미함.
parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며,
위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미입니다.

클래스 : 메소드의 정의

ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있음.
Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 함.
이후 prototype에 대해서 자세히 공부하고, 지금은 메서드 정의 시 사용법만 숙지.

ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의함.
refuel() {}, drive() {}와 같이 작성되어 있는 부분.

ES5

function Car(brand, name, color) {/*생략*/}

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

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

ES6

class Car{
	constructor(brand, name, color){/*생략*/}
    
    refuel(){
    }
    
    drive(){
    }
}

인스턴스에서의 사용

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

let mini = new Car ('bmw', 'mini','white');
mimi.brand;
mini.refuel();

클래스의 유용한 예제

사실 여러분들은 이런 객체지향적인 방법을 이미 사용하고 있었음
바로 우리가 그동안 만들었던 배열은, 전부 Array의 인스턴스.

속성이나 메서드 사용법이 동일.

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

let arr = ['code','states','pre'];
arr.length; //3
arr.push('course'); // 새 element를 추가함

배열은 (대문자) Array의 인스턴스입니다.
따라서 new Array(, , ___) 와 같은 방식으로도 배열을 만들 수 있음

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

let arr = new Array('code','states','pre'); // 우리가 배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일함.
arr.length; //3
arr.push('course'); // 새 element를 추가함

• mdn 메소드 설명에 prototype이라고 붙어있는 이유?
  배열 메서드 (push, filter, forEach...) 등을 배울 때에, 메서드들이 대부분 Array.prototype.메서드명 과 같이 안내되어 있음을 발견했을 것.

이는 모든 메서드들이 클래스의 원형 객체(prototype)에 정의되어 있기 때문임.