[JavaScript] Class와 Object

1. 클래스 선언
2. Getter and setters
3. Public vs Private
4. Static properties and methods
5. 클래스 상속
6. Class checking: instanceOf

 

1. 클래스 선언

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

const wonju = new Person('wonju', 24);
console.log(wonju.name);
console.log(wonju.age);
wonju.speak();

 

 

2. Getter 와 Setter

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 negatice');
        // }
        this._age = value < 0 ? 0 : value;
    }
}

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

 

 

3. Public field 와 Private field

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

 

 

4. Static properties and methods

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

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

const article1 = new Article(1); // undefined
const article2 = new Article(2); // undefined
console.log(article1.publisher); // undefined

console.log(Article.publisher);
Article.printPublisher();

 

 

 

5. 상속 (Inheritance) : extends

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(); // 부모 메소드 사용 -> super.methods
        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. 클래스 확인 : 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
// 즉, 생성된 모든 Object를 통해 Object Methods를 사용할 수 있음 like below
console.log(triangle.toString());