Javascript - class(1)

안녕하세요, class에 대해 정리해보겠습니다.

 

class에 관한 내용은 많고 깊어서 이번 시간에는 실제 사용하는 데 있어 유용한 기능만 정리하고 좀 더 자세한 내용은 추후 업데이트하도록 하겠습니다. 지난번에 정리한 Object에서는 하나의 객체(인스턴스)를 만드는 것에 대해 정리하였습니다. class는 이러한 객체를 만드는 틀로 여러 객체를 손쉽게 만들 수 있게 합니다. 

 

1. Class declarations : Class를 정의할때는 constructor 메서드(생성자)를 이용해 property를 지정해줘야 합니다. 없다면 본문이 비워진 채로 함수가 생성됩니다. 또한 메서드를 추가해 줄 수 있습니다. 아래 코드를 보며 설명드리겠습니다.

class Person {
    // constructor
    constructor(name, age) {
        // fields 생성할 객체들의 property 지정
        this.name = name;
        this.age = age;
    }

    // methods : 메소드 추가 가능
    speak() {
        console.log(`${this.name}: hello!`);
    }
}

const hoon = new Person('hoon', 20); // hoon이라는 객체를 생성
console.log(hoon.name); // hoon 출력
console.log(hoon.age); // 20 출력
hoon.speak(); // speak 메서드 사용 가능

2. Getter(획득자) and Setter(설정자) : Getter는 프로퍼티를 읽으려고 할때 실행[obj.prop] / Setter는 프로퍼티에 값을 할당하려할때 실행 [obj.prop = value] 합니다. 따라서 set 함수는 parameter를 받아야 합니다.

class User {
    // property 설정
    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');
        // }
        // age 입력 값이 0보다 작으면 0을 set하게 한다!
        this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age); // age가 -1로 0보다 작으므로 age가 0이 된다.

한 가지 예를 더 살펴보겠습니다.

class A {
    _name = 'no name';

    get name() {
        return this._name + '@@@';
    }

    set name(value) {
        this._name = value + '!!!';
    }
}

const a = new A(); 
console.log(a); // {_name: "no name"} 출력
a.name = 'Mark'; // Mark가 value 자리로 들어가면서 !!!가 붙는다(set 된다) 
console.log(a); // {_name: "Mark!!!"} 출력
console.log(a.name); // getter의 결과로 Mark!!!뒤에 @@@가 붙어 Mark!!!@@@ 출력 
console.log(a._name); // _name을 얻은 결과로 Mark!!!만 출력이 된다. 

여기서 주의할 점으로는 get은 읽는 기능만 하므로 get함수를 사용한다고 객체의 property가 바뀌는 것이 아닙니다!

class B {
    _name = 'no name';

    get name() {
        return this._name + '@@@';
    }
}

const b = new B();
console.log(b); // {_name: "no name"} 출력
b.name = 'Hoon'; // setter가 없으면 Error 발생!!
console.log(b.name) // getter에 의해 no name@@@이 출력됨
console.log(b); // {_name: "no name"} 출력

3. Fields (Private, Public) : class 내부에서만 값이 보이고 접근 변경 가능하게 하며 외부에서는 읽지도 변경하지도 못하게 할 수 있습니다. (#을 붙여 private로 만들 수 있습니다)

class Experiment {
    publicField = 2;
    #privateField = 0;
}

const experiment = new Experiment();
console.log(experiment.publicField); // 2가 출력
console.log(experiment.privateField); // private라서 undefined

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);
const article2 = new Article(2);
console.log(article1.publisher); //undefined 출력
console.log(Article.publisher); // Dream Coding 출력
Article.printPublisher(); //Dream Coding 출력

5. Inheritance : 클래스의 속성 및 매서드들을 상속 및 매서드를 바꿔서 적용(다향성)할 수 있습니다.

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 {}

// 삼각형의 경우 2로 나누어 줘야한다 -> 기존 draw매서드를 변형!(다향성)
// overideing (함수를 바꿀수 있다) : 다향성
class Triangle extends Shape {
    draw() {
        super.draw(); // 자식 클래스에서 this를 사용하기 전에는 무조건 super를 사용해줘야한다 (부모의 constructor를 호출)
        console.log("추가로 더 넣을 수 있다 ")
    }
    getArea() {
        return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(20,20,'blue');
rectangle.draw(); // drawing blue color of 출력
console.log(rectangle.getArea()); // 400출력
const triangle = new Triangle(20,20,'blue');
triangle.draw(); // drawing blue color of 출력 후 "추가로 더 넣을 수 있다 "가 추가 출력
console.log(triangle.getArea()); // 200출력 (다향성)

6. Class checking : instanceOf를 이용해 클래스의 상속 여부를 확인할 수 있습니다.

console.log(rectangle instanceof Rectangle); // True
console.log(triangle instanceof Rectangle); // False ( Triangle을 상속받음)
console.log(triangle instanceof Triangle); // True
console.log(triangle instanceof Shape); //True (Triangle이 Shape을 상속받은 것임)
console.log(triangle instanceof Object); //True (Shape이 Object을 상속받은 것임 // 모든 클래스는 Object의 하위 클래스입니다)