출처 : 유튜브 드림코딩 자바스크립트

class? 연관있는 data들 한 데 묶어놓는 container 같은 아이.

class person{
	name; 
    age;
    speak();}

field 속성 : name, age
method 행동 : speak();

즉 class는 fields와 methods가 종합적으로 묶여있다.

Object-oriented programming

class와 object의 차이

▪️ class : template 틀을 만든다. declare once, no data in.
(클래스 자체에는 data가 들어있지 않다.)
▪️ object : class를 이용해서 실제로 data를 넣어서 만드는 것. instance of a class. created many times. data in.

JavaScript classes

• introduced in ES6
• syntactical sugar over prototype-based inheritance
  // (기존에 존재하던 프로토타입을 베이스로한 것에 기반해서 우리가 간편하게 쓸 수 있도록 문법만 class가 추가 된 것)

1. Class declaration

class Person {
    //constructor
    constructor(name, age){
        // fields
        this.name = name;
        this.age = age;
    }
    //methods
    speak(){
        console.log(`${this.name}: hello!`);
    }}

constructor을 만들어서 나중에 object를 만들 때 필요한 데이터를 전달한다.
전달된 데이터를 fields에 바로 할당해준다.
this = 생성된 object

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

새로운 object를 만들 때 new 라는 keyword를 쓴다.

2. Getter and setters

사용자들이 이상한 값 입력하지 않게끔 해주는 것
get : 값을 return한다. set : 값을 설정한다. set은 값을 설정하기 때문에 value를 받아와야 한다.

class User{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get age(){
        return this._age;
    }
    set age(value){
        // if(value < 0){
        //     throw Error('age can not be negative');
        // }
        this._age = value < 0 ? 0 : value;
    }
}

user라는 class 내에는 총 세개의 field가 존재 : firstName, lastName, _age

get과 set에 _age라고 적는 이유 : 그냥 this.age라고 적으면 constructor내의 this.age가 get을 호출하고 age가 set을 호출하여 무한반복된다.
다른 이름으로 적어줄 것!

* get과 set내의 변수에는 _도 적어주자!

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

field는 _age이지만 user1.age라고 호출할 수 있는 것, this.age에 값을 할당할 수 있는 것은 내부적으로 getter 와 setter를 이용하기 때문.

3. Fields (public, private)

Too soon! (너무 최근에 개발된 것이라 아직 많은 개발자가 쓰고있지는 않음)

class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField); //undefined로 출력된다.

privateField : class 내부에서만 값이 보여지고 접근이 되고 값이 변경 가능. 외부에서는 읽을 수 없음.

4. Static properties and methods

Too Soon!

class Article {
    static publisher = 'Dream Coding';
    constructor(articleNumer){
        this.articleNumer = articleNumer;
    }

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

object와 상관없이 class가 가지고 있는 고유한 값과 data와 상관없이 동일하게 반복적으로 사용되는 method를 static이라는 키워드이용해서 붙이면 object 상관없이 class 자체에 연결되어있다.

ex)

const article1 = new Article(1);
const article2 = new Article(2);

console.log(Article.publisher); //Dream Coding 출력됌
console.log(article1.publisher); //undefined --> static은 class자체에 값이 할당되어지기 때문! 
Article.printPublisher(); //Dream Coding 

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 of`);
    }
    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}`
    }
}

일일히 반복하기보다는 extends를 이용해서 shape를 재사용할 수 있다.

extends Shape{}를 적어줌으로써 shape에 있는 모든 것들이 rectangle에 포함된다.

super.draw() => override되지 않고 부모의 함수도 그대로 가져온다.

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); //drawing blue color of 출력된다.

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

6. Class checking : instaceOf

object : class를 이용해서 만들어진 새로운 instance
a instanceof b : a라는 object가 b라는 class의 instance 인지 아닌지 즉 a라는 object가 b라는 class를 이용해서 만들어진 아이인지 확인한다.
true or false를 반환한다.

console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); //true
console.log(triangle instanceof Shape); // true - shape을 상속했음으로. 
console.log(triangle instanceof Object); //true js에 있는 모든 object는 js 내의 Object를 상속한 것임!
console.log(triangle.toString());

toString() : Object 내에 있는 함수

Javascript reference MDN(js 내부 포함된 object들)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference