자바스크립트 4: class vs object

Class

조금 더 연관있는 데이터를 한 곳에 묶어 놓는 컨테이너 같은 역할
-template 틀만 정해져 있고 데이터는 없다.
-declare once 한 번만 선언
-data in 하게 되면 Object가 된다.

class person {
name; (속성 field)
age; (속성 field)
speak(); (행동 method)

즉, fields + methods 가 종합적으로 묶여 있는 것이 Class
간혹 데이터(속성 field)만 들어가 있는 경우도 있다. => Data Class

붕어빵 틀 = class
붕어빵 재료가 들어간 팥붕어빵, 크림붕어빵 = object

JavaScript classes

• introduced in ES6
• syntactical sugar ouer prototyte-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!`};
    }
}

    //object 생성
const sue = new Person('sue', 20);
console.log(sue.name);
console.log(sue.age);
sue.sprak();
= sue, 20, sue: hello!

2. Getter aon setters

: 내가 더 방어적인 자세로 만들어 주는 것

class User {
    constructor(firstName, lastName, ags) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        return this._age; //age 변수의 이름을 바꿔준다.
        바꾸지 않으면 age로 반복작동되어 call stack이 닫히게 된다.
    }

    set age(value) {
         //if (value <0) {
         //   throw Error('age con not be negative');
         // }
         this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('steve', 'Job', -1)
console.log(user1.age);
=-1 
//나이가 -(마이너스)로 나오는 건 말이 안되므로 
이럴 때 getter ane setters을 사용한다.
//또한 console.log(user1.age); 사용할 수 있는 건 내부적으로
getter과 setter을 이용하기 때문에 바뀐 변수의 이름으로 쓰지 않아도 된다.

3. Fields (public, private)

• 최근에 나왔으며 아직 사파리에서도 적용이 되지 않음. Too soon!

const user1 = new User('steve', 'Job', -1)
console.log(user1.age);
=-1 //나이가 -(마이너스)로 나오는 건 말이 안되므로 이럴 때
getter ane setters을 사용한다.

class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
=2
console.log(experiment.privateField);
=undefined

4. static properties and methods

• Field와 마찬가지로 최근에 나옴. 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();
=Dream Coding

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 width * this.height;
    }
}

class Rectangle extends Shape {}
=400
class Triangle extends Shape {}
    getArea() {
        return (this.width * this.height) /2;
=200
}
//class를 확장하여 상속을 이어하게 되면 하나씩 다 적지 않아도
//extends만 작성하면 동일하게 호출하게 된다.
//또한 필요한 함수들만 오버라이딩해서 작성할 수 있다.

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
=drawing blue color!
const Triangle = new Triangle(20, 20, 'red')
triangle.draw();
=drawing red color!

//super 라는 부모요소를 사용하여 두 가지 대답을 들을 수도 있다. 
//추가된 값(super.draw(); colsole.log('세모');)
//=drawing red color! 값과 세모 값 두 가지가 출력된다.

6. Class checking: instanceOf

: 왼쪽에 있는 오브젝트가 오른쪽에 클래스 인스턴스인지 아닌지 즉, 오브젝트가 이 클래스를 통해 만들어진 게 맞는지/아닌지 확인하는 방법 (네/아니오 두 가지 대답이 나옴)

자바스크립트 내부에 포함되어 있는 오브젝트들이 무엇이 있는지 확인할 수 있는 사이트
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

출처: 드림코딩 자바스크립트 기초 강의 (ES5+)