JavaScript: 클래스(Class)

클래스란?

자바스크립트의 클래스란, 붕어빵 기계 같은 것. 같은 형태의 것들을 계속해서 찍어내는 데에 사용된다.

그렇다면 object는 붕어빵...

즉, 클래스와 오브젝트는 아래와 같다.

• class = template
• object = instance of a class

JavaScript의 classes는 ES6에서 소개되었는데, 이전에는 템플릿없이 함수로 오브젝트를 만들 수 있었다고 한다. 즉, 클래스는 기존에 존재하던 프로토타입에 기반하여 문법만 클래스에 추가된 것이다.

클래스의 기본 문법

1. Class declarations

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

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

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

//여기서 this는 생성된 오브젝트를 뜻함.

2. Getter and setters

class User {
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age; //getter와 setter를 호출
    }
    get age() {
        return this._age;
    }

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

const user1 = new User('Steve', 'Jobs', -1);
//user가 멍청하게 나이를 -1으로 설정하면 말이 안됨! --> getter와 setter를 이용해서 자동으로 수정되도록 함.

console.log(user1.age) //여기서 '_age'가 아닌 'age'를 사용해도 되는 이유는 getter와 setter를 이용했기 때문.

3. Fields (public, private)

// 너무 최근에 나옴! 아직 최신 브라우저에서도 지원되지 않음
class Experiment {
    publicField = 2;
    #privateField = 0; //class내부에서만 값에 접근, 수정이 가능하다.
}
const experiment = new Experiment();
console.log(experiment.publicField); //2
console.log(experiment.privateField); //undefined

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(Article.publisher);
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 of`);
    }

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

이렇게 Shape라는 클래스를 만들고 이를 바탕으로 다양한 도형을 생성하기 위해서는 아래와 같이 할 수 있다.
예를 들어 사각형의 경우,

class Rectangle extends Shape {}
const rectangle = new Rectangle(20, 20, 'tomato');
rectangle.draw(); //drawing tomato color of
console.log(rectangle.getArea()) //400

이렇게 만들 수 있는데, 사각형의 너비는 class Shape에서와 같이 높이 * 너비이기 때문에 문제가 없다. 하지만 다른 도형의 경우는 어떨까?

삼각형을 만들어보자.

class Triangle extends Shape {
    draw(){
        super.draw(); //원한다면 super를 통해 본래 부모의 함수를 호출할 수 있다.
        console.log('🔺'); //새로운 기능을 추가했다.
    }
    getArea() {
        return (this.width * this.height) / 2; //삼각형의 너비 공식을 추가했다.
    }
} //이처럼 원하는 함수만 재정의 할 수 있다.
const triangle = new Triangle(20, 30, 'blue');
triangle.draw(); //drawing blue color of, 🔺
console.log(triangle.getArea()) //300

6. Class checking : instanceOf

• 좌측의 인스턴스가 우측의 클래스에서 만들어진 인스턴스인지를 검사하는 것
• true와 false를 리턴한다

console.log(rectangle instanceof Rectangle); //ture
console.log(triangle instanceof Rectangle); //false
console.log(triangle instanceof Triangle); //true
console.log(triangle instanceof Shape); //Shape을 상속했으므로 ture
console.log(triangle instanceof Object); //자바스크립트에서 만든 모든 클래스들은 자바스크립트의 object를 상속한 것이므로 ture
//따라서 모든 오브젝트, 클래스들은 공통으로 존재하는 메소드를 사용할 수 있다. ex.toString()