(Javascript) Class vs Object

• javascript는 Object-Oriented Programming
• class: template
• object: instance of a class

Javascript classes

• introduced in ES6
• syntactical sugar over prototype-based inheritance
  • 기존에 존재하던 prototype 기반으로 간편하게 쓸 수 있도록 문법만 class가 추가

Class declarations

class Person {
    // constructor
    constructor(name, age) {
        //fields
        this.name = name;
        this.age = age;
    }

    // methods
    speak() {
        console.log(`${this.name}: hello!`);
    }
}

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

 

Getter and Setter

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;
    }
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

 

이처럼 age라는 getter를 정의하는 순간 this.age는 메모리에 올라가있는 데이터를 읽어오는 것이 아닌 getter를 호출한다.

또한 setter를 정의하는 순간 값을 할당할 때 메모리에 값을 할당하는 것이 아닌 setter를 호출하게 된다. 따라서 setter 안에서 전달된 value를 this.age에 할당할 때 메모리의 값을 업데이트하는 것이 아니라 setter를 호출하게 된다. 무한정 반복됨--> call stack size exceeded

이를 방지하기 위해서 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 be negative');
        // }
        this._age = value < 0 ? 0 : value;
    }
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

 

Fields (public, private)

class Experiment {
    publicField = 2;
    #privateField = 0; // class 내부에서만 값이 보여지고 접근, 변경 가능
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined

 

Static properties and methods

• class 안에 있는 field와 method들은 새로운 object를 만들때마다 그대로 복제되어서 값만 지정된 값으로 변경되어 만들어짐
• object와 상관없이 class가 가지고 있는 고유한 값과 동일하게 반복적으로 사용되어지는 method의 경우 static keyword 붙임
• 즉, object와 상관없이 class 자체에 연결되어있다

class Article {
    static publisher = 'Jiwon';
    constructor(articleName) {
        this.articleName = articleName;
    }
    static printPublisher() {
        console.log(Article.publisher);
    }
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); // class 이름 이용해서 static 호출
Article.printPublisher();

 

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 { };
class Triangle extends Shape {
    // 필요한 함수만 재정의 가능
    // overriding
    draw() {
        super.draw(); // 부모의 method 호출
        console.log('🔺');
    }
    getArea() {
        return (width * this.height) / 2;
    }

    toString() { // Object class에 있는 함수 overriding
        return `Triangle: color: ${this.color}`;
    }
};
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea());

 

Class checking: instanceOf

• object는 class를 이용해서 만들어진 새로운 instance

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 class는 Object를 상속한 것