클래스와 인스턴스

클래스(class)

🧐 같은 속성을 가졌지만 다른 데이터를 가진 객체를 여러 개 만들 수는 없을까?

👉🏼 쿠키 몰드를 사용해서 동일한 모양의 쿠키를 찍어낼 수 있는 것처럼,
객체(instance object)를 만들기 위한 쿠키 몰드가 있다면 어떨까?

👉🏼 여기에는 객체가 어떤 특징을 가질지(속성)와 어떤 동작/기능을 할지(메소드)를 포함해보자!

인스턴스(instance object)

class를 활용해서 만들어진 객체
👉🏼 class 쿠키 몰을 사용해서 찍어낸 쿠키🍪

---

클래스(class) 만들기

속성 지정하기

생성자 함수 construct 활용하기

• 생성자(constructor) 함수는 인스턴스가 초기화 될 때 실행함
  • return 값 만들지 않음
• construct를 통해 동일한 속성을 지정할 수 있음
• 일반적인 다른 함수와 구분할 수 있도록 보통 대문자로 시작하고, 일반명사로 만듦
  cf) 일반적인 함수의 경우, 적절한 동사를 포함하며 소문자로 시작하는 게 일반적임

this 키워드

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

메소드 지정하기

class Cookie{
    //속성 지정하기
    constructor(shape, flavor, color) {
    	//여기서 this는 Cookie를 의미함
        this.shape = shape;
        this.flavor = flavor;
        this.color = color; 
    }
    //메소드 지정하기
    bake() {
        console.log('쿠키를 굽습니다.');
    };
    eat() {
        console.log('쿠키를 먹습니다.');
    };
};

---

인스턴스(instance object) 만들기

new 키워드

• 새로운 객체(instance object)를 만들기 위해 필요함
• 생성자 함수 construct가 실행되어 인스턴스가 할당됨
  • 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖음

let cookie1 = new Cookie('round', 'chocoloate', 'brown');
let cookie2 = new Cookie('diamond', 'mint', 'sky-blue');
let cookie3 = new Cookie('heart', 'blueberry', 'purple');

---

인스턴스에서 속성과 메소드 사용하기

//속성 사용하기
cookie1.shape; //'round'
cookie3.flavor; //'blueberry'
//메소드 사용하기
cookie1.bake(); //'쿠키를 굽습니다.'
cookie3.eat(); //'쿠키를 먹습니다.'

---

작성 문법 비교하기 (ES5 vs ES6)

ES5 작성 문법

• prototype 활용해서 메소드를 지정함
  • prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form)

function Cookie(shape, flavor, color) {
	this.shape = shape;
	this.flavor = flavor;
	this.color = color;
}
//메소드 지정하기
Cookie.prototype.bake = function() {
	console.log('쿠키를 굽습니다.');
}

Cookie.prototype.eat = function() {
	console.log('쿠키를 먹습니다.');
}

ES6 작성 문법

class Cookie{
    //속성 지정하기
    constructor(shape, flavor, color) {
    	//여기서 this는 Cookie를 의미함
        this.shape = shape;
        this.flavor = flavor;
        this.color = color; 
    }
    //메소드 지정하기
    bake() {
        console.log('쿠키를 굽습니다.');
    };
    eat() {
        console.log('쿠키를 먹습니다.');
    };
};