[엘리의 드림코딩 JS] 6. Class vs Object

https://youtu.be/_DLhUBWsRtw

class 내에 속성(fields, property)만 있고 method 없는 경우는 데이터 class라 부른다.

1. class(틀, 자체에 데이터는 없다 => 메모리에 안올라간다.)
- template
- declare once
- no data in

2. object(객체, 인스턴스. 실제 데이터 있음 => 메모리에 올라감) 
-  instance of a class
- created many times
- data in

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

JavaScript reference - JavaScript | MDN

참고하기

'use strict';
// Object-oriented programming(OOP)
// class: template
// object: instance of a class
// JavaScript classes
//  - introduced in ES6
//  - syntactical sugar(문법상으로 달달한, 편리함을 제공하는) over prototype-based inheritance

//  1. Class declarations
class Person {
  // constructor(생성자)
  constructor (name, age) {
    //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. Getters and setters
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    this._age = value < 0 ? 0 : value;
  }
}

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


// 3. Fields (public, private)
// Too soon yet!
class Experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new 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 Article(2);
console.log(article1.publisher); //undefined
console.log(Article.publisher); // 'Dream Coding'
Article.printPublisher();


// 5. Inheritance
// 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!`);
  }

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

class Rectangle extends Shape {};
class Triangle extends Shape {
  draw() {
    super.draw();
    console.log('🔺')
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

  toString() {
    return `Triangle: color ${this.color}`;
  }
};

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea());


// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle); //true
console.log(triangle instanceof Rectangle); //false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true. 모든 클래스는 JS의 object를 상속
console.log(triangle.toString());