자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

class
{
	속성 (fields);
	행동 (methods);
}
- 청사진
- template
- delcare once
- no data in (메모리안에 안들어간다)

class를 이용해서 실제 데이터를 넣어서 새로운 인스턴스를 생성하면
object가 된다.
object
- instance of a class
- created many times
- data in (메모리안에 들어간다)

'use strict'
js파일 제일 위에 써서 모던하게 사용하자. 

// class: template
// object: instance of a class

1. Class declarations
class Person {
	// constructor
	constructor(name, age) {
		// fileds
		this.name = name;
		this.age = age;
	}

	// methods
	speak() {
		console.log(`${this.name}: hello!`);
	}
}

const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

2. Getter and setters
내가 만든 클레스를 잘 못 사용해도 방어할 수 있도록 하기 위함
class User {
	constructor(firstName, lastName, age) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
		// age라는 getter를 정의하는 순간 this.age는 메모리에 올라가있는 데이터를 읽어오는것이 아니라 get age를 호출 한다.
 
		// setter를 정의하는 순간. age는 setter를 호출하게 된다. 
		// 전달된 value를 this.age에 할당할때 메모리레 값을 업데이트하는것이 아니라 setter를 다시 호출 -> 무한정 반복되서 콜스택이 닫힐 수 있다.
		// 이를 방지하기 위해서 getter, setter에서 사용하는 변수의 명을 변경해줘야한다. 
		// 이렇게 되면 User라는 class안에는 firstName, lastName, _age 총 세개의 field가 있게 된다.
	}

	get age() { // 값을 리턴
		return this._age;
	}

	set age(value) { // 값을 설정
		this._age = value < 0 ? 0 : value;		
	}
}

const user1 = new User('Steve', 'job', -1);
console.log(user1);

3. Fields (public, private)
// Too soon!
class Experiment {
	publicField = 2;
	#privateField = 0;
}
const experiment = enw Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

4. Static properties and methods
// Too soon!
class Article {
	static publisher = 'Dream Coding';
	constructor(articleNumber) {
		this.articleNumber = articleNumber;
	}

	static printPublisher() {
		console.log(Article.publisher);
	}
}

const article1 = new Article(1);
const article2 = new Artice(2);
console.log(article1.publisher);
console.log(Article.publisher);
Article.printPublisher();
// object에 상관업이 들어오는 데이터에 상관없이 공통적으로 class에서 쓸수있는거라면 static을 사용하는것이 메모리 사용을 줄일 수 있다.


5. 상속과 다양성
// a way for one class to extend another class.
class Shape {
	constructor(width, height, color) {
		this.width = width;
		this.height = height:
		this.color = color;
	}

	draw() {
		console.log(`draw ${this.color} color of`);
	}

	getArea() {
		return this.width * this.height:
	}
}

class Rectangle extneds Shape{}
class Triangle extneds Shape{
	// 필요한 함수만 재 정의 가능 - 오버라이딩

	draw() {
		super.draw();
		console.log('111');	
	}	

	getArea() {
		return (this.width * this.height) / 2;
	}
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Rectangle(20, 20, 'blue');
triangle.draw();

6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6