Class

🚗 Javascrip는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 Class라는 개념을 제공하지 않는다.
하지만 Javascript에서는 Class처럼 사용할 수 있는 방법을 3가지 지원한다.
👉 리터럴 방식 , 함수 방식 , 프로토타입 방식

✅ 함수(Function) vs 클래스(Class)

Function
특정 로직을 구현하는 변수와 실행 코드로 구성.
기능 단위의 코드 그룹화(기능 단위의 중복코드 제거 및 코드 재사용)
Class
연관 있는 변수와 함수(메소드)로 구성.
객체 단위의 코드 그룹화(객체 단위의 중복코드 제거 및 코드 재사용)
➡ 객체로 묶어서 변수와 함수(메소드)를 구분해서 코드를 작성하면 필요한 함수들을 찾기 편해지고, 객체단위의 코드 재사용 및 중복코드를 제거할 수 있다.

✅ 클래스(Class) 기본 개념

⏩ Class = Object
ex. 붕어빵 틀
⏩ Instance = Object
ex. 붕어빵 틀로 만들어낸 붕어빵
❗ Class의 프로퍼티 초기화 역할(자동으로 Class를 호출되는 함수)
⏩ Property = Class 내부에 만드는 변수(=멤버변수)
ex. 붕어빵 안에 들어가는 팥 (슈크림 대체 가능)
즉 클래스 객체 내부에서 사용하는 정보로써 처리한 결과값 저장.
⏩ Method = Class 내부에 만드는 함수(=멤버함수)
ex. 붕어빵 안에 들어가는 팥 (붕어빵 안의 작은 붕어빵 같은 개념)
즉 객체 내 함수 프로퍼티로써, 주로 객체 프로퍼티 값 변경 및 탐색.

🚀 클래스는 결국 객체(object)를 잘 설계하기 위한 틀이라고 할 수 있다. 이 때 객체는 특정 로직을 갖고 있는 행동(method)와 변경 가능한 상태(변수)를 갖는다.
원하는 구조의 객체 틀(=class)을 짜 놓고, 비슷한 모양의 객체(=instance)를 공장처럼 찍어낼 수 있다.

🚀 class로 객체를 생성하는 과정을 인스턴스화라고 부른다

// 클래스 생성
class Car {
    constructor(name, price) {  //constructor 메소드는 2개의 인자를 받았다.(=멤버변수)
                                // 멤버변수: 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수    
        this.name = name;
        this.price = price;
    }
}
// 인스턴스 생성(Car클래스의 instance를 morning이라는 변수에 저장)
const morning = new Car('morning', 200);
//constructor()의 인자(name과 price)를 사용해 Car instance의 name, price프로퍼티에 값을 할당

• Car는 클래스 이름(❗ 항상 대문자로 시작, CarmelCase)
• Car 클래스의 인스턴스를 생성할 때마다 constructor메소드가 호출된다.
• 클래스는 프로퍼티마다 ;로 구분
  (일반 객체는 프로퍼티마다 ,(콤마)로 구분)
• 인스턴스는 클래스를 통해 생성된 객체. class의 property이름과 method를 갖는 객체이다. (인스턴스마다 모두 다른 property value(값) 을 갖고 있다)
• 새로운 인스턴스를 생성하려면 new키워드가 필요. 즉 new키워드는 constructor()메서드를 호출하고 새로운 인스턴스를 return해준다.

✅ 리터럴 방식 으로 Class Object 만들기

var user = {        // instance
    name : "kirin", // property1
    age : 20,       // property2
    showInfo : function() {
       document.write( `이름: ${this.name} 나이: ${this.age}` )
        },
    // 객체 내부에서 자신의 프로퍼티에 접근(this)
    callShowInfo : function() {
        this.showInfo();
    }
    // 객체 내부에서 자신의 메소드에 접근(this)
}

user.showInfo();   //메소드 접근
user.age;          // 프로퍼티 접근

👉 인스턴스를 여러개 만들 수 없다(자체가 인스턴스). 주 용도는 여러개의 데이터 포장용.
코드 재사용을 위해 사용하기 보단 여러개의 데이터를 묶어 값을 보관하거나, 함수의 매개변수 값으로 전달할 때 주로 사용.

✅ 함수 방식 으로 Class Object 만들기

function User = {        // Class이름
    this.name : "kirin", // property1
    this.age : 20,       // property2
    this.showInfo : function() {
       document.write( `이름: ${this.name} 나이: ${this.age}` )
        },
    // 객체 내부에서 자신의 프로퍼티에 접근(this)
}

let user = new User // 인스턴스 생성
User.showInfo();    //메소드 접근
User.age;           // 프로퍼티 접근

👉 객체지향 프로그래밍 언어의 경우 class이름 { 프로퍼티와 메소드} 의 형태로 class를 정의하지만, Javascript는 클래스를 만드는 키워드가 따로 없다.
따라서 일반 함수와 함수 방식의 클래스의 형태가 같다. 하지만 일반 함수의 경우, 일반적으로 소문자로 시작하고 class의 경우 대문자로 시작한다.
❗ class작성 시, 클래스 이름은 꼭 대문자로 시작하기

👉 코드 재사용이 가능하다. 하나의 class로 여러개의 객체(인스턴스) 생성 가능

let userInfo1 = new User();
let userInfo2 = new User();
let userInfo3 = new User();

❗ 메소드 중복 생성 ➡ 클래스의 메소드는 독립적이기 때문에 userInfo1,2,3 모든 인스턴스의 메소드도 각각 독립적으로 만들어진다. 따라서 똑같은 메소드를 세 인스턴스가 모두 중복되어 생성된다는 단점이 있다.

✅ 프로토타입 방식 으로 Class Object 만들기

function User = {        // Class이름
    this.name : "kirin", // property1
    this.age : 20,       // property2

    // 함수 방식과 같지만, 프로토타입은 메소드에 prototype이라고 프로퍼티에 정의하는 구조
    User.prototype.showInfo : function() {
       document.write( `이름: ${this.name} 나이: ${this.age}` )
        },
    // 객체 내부에서 자신의 프로퍼티에 접근(this)
}

let user = new User // 인스턴스 생성
User.showInfo();    //메소드 접근
User.age;           // 프로퍼티 접근

👉 함수 방식과 동일하게 만들어진다.(메소드 생성 방법만 다르다)
❗ 메소드 공유 ➡ 모든 인스턴스(userInfo1,2,3)가 prototype에 만든 메소드를 공유하여 사용하기 때문에 메소드 중복 생성을 막을 수 있다.