Class

자바스크립트의 클래스는 청사진,템플릿과 같다. 클래스 자체에는 데이터가 들어있지 않고 틀만 들어있다. 여기에 실제로 데이터를 넣는 것이 object. 클래스를 이용해 인스턴스를 생성하면 object가 된다.

붕어빵틀이라는 클래스를 이용해 팥을 넣으면 팥붕어빵이라는 오브젝트가 된다고 볼 수 있다.

class: template
object: instance of a class

Javascript classes

• introduced in ES6
  syntactical sugar over prototype-based inheritance

🧨1. Class declarations

'use strict';

class Person {
  constructor(name, age) {
    //constructor로 나중에 object를 만들때 필요한 데이터를 전달한다.
    //fields
    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 Setter

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  get age() {
    //getter를 정의하면 class에 있는 this.age는 메모리의 데이터를 읽지 않고 getter를 호출하게 된다.
    return this._age;
    //같은 변수로 인해 계속 get age를 호출해 콜스택이 계속 쌓이게 된다.
    //이를 방지하기 위해 변수이름을 변경해주는데, 보통 언더대시를 사용한다.
  }
  set age(value) {
    // if (value < 0) {
    //   throw Error('age can not be negative');
    //setter를 정의하면 바로 메모리에 있는 값을 할당하지 않고 setter를 호출하게 된다.
    // this._age = value;
    this._age = value < 0 ? 0 : value;
    //음수를 입력하면 setter에서 지정된 양수 value를 사용할 수 있도록 설정해준다.
    }
  }
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

🧨3. Fields (public, private)

class Experiment {
  publicField = 2;//constructor생성자 없이 정의하면 외부에서 접근가능한 publicField
  #privateField = 0;//외부에서 수정 접근 불가.
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);//console에서 undefined로 나온다.

🧨4. static properties and methods

class Article {
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }
  static printPublisher() {
    console.log(Article.publisher);
  }
}
//class안에 있는 필드와 메소드들은 새로운 오브젝트를 만들 때마다 복제되어서 값만 변경되어 만들어진다.
//데이터에 상관없이 클래스에 들어있는 동일한 값을 사용하는 메소드가 있는 경우 static을 사용하 ㄹ수 있다
//메모리의 사용을 줄일 수 있다.
const article1 = new Article(1);
const argicle2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();

상속과 다양성

다양한 도형을 클래스로 묶을 때, 너비와 높이,색상 등의 기준들이 있을 것이다.
shape을 정의한다음, shape에 포함되는 너비와 높이,길이 등의 동일한 속성들을 정의해주면 용이하다.

🧨5. Inheritence

//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(`drawing ${this.color} color of`);
 }
 getArea() {
   return this.width * this.height;
 }
}
class Rectangle extends Shape {}
class Triangle extends Shape{
 draw() {
   super.draw();//부모 클래스까지 함께 호출
   console.log('triangle')
 }
 getArea() {
   return (this.width * this.height) / 2;
   //다양성 : 특정 클래스에서만 원하는 메소드를 변경해 사용할 수 있다.(oberwriting)
 }
}
//shape에 정의된 필드와 메소드가 자동으로 Rectangle에 포함이 된다.
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
//Shape 한 곳에서만 속성을 수정하면 전부 반영된다.

🧨6. Class checking: instanceOf

console.log(rectangle instanceof Rectangle);
//rectangle object는 Rectangle class의 인스턴스이므로 true;
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);
//모든 클래스들은 모든 오브젝트를 상속한다.
class Counter {
  //class를 이용해 object를 만드는 순간counter라는 변수는 0으로 초기화된다.
  constructor(runEveryFiveTimes) {
    this.counter = 0;
    this.callback = runEveryFiveTimes;
    //함수에 인자로 받아온 내용을 클래스에서 기억해야 하기 때문에 이렇게 써준다.
  }
  increase() {

reference

https://www.youtube.com/watch?v=1Lbr29tzAA8