[자바스크립트] Class vs Object

class는 ES6에 도입되었다.

1. Object 생성

'usr strict';

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

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

const goo = new Person('goo',28);
console.log(goo.name);
console.log(goo.age);
goo.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) {
        this.age = value;
    }
}

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

• 위의 코드 같이 적는다면 보이는 결괏값처럼 에러가 난다.
• age라는 getter를 정의하는 순간 생성자에 this.age는 메모리에 올라간 데이터를 읽는 것이 아니라 get age()를 실행하게 된다.
• 그리고 setter를 정의하는 순간 =age; 값을 할당할 때 this.age에 할당하는 것이 아니라 setter를 호출하게 된다. 
  다시 value를 this.age에 할당할 때 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('goo', 'kang', -1);
console.log(user1.age);

 

3. Public & Private 

• 최근에 추가 된 것이라 많은 자바스크립트 개발자가 쓰고 있지는 않다.

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

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

• 그냥 publicField처럼 정의하면 외부에서 접근이 가능하다.
• '#'을 붙이게 되면 private 하게 된다. 클래스 내부에서는 읽고 쓰기가 가능하지만 외부에서는 안된다.

 

4. Static

• 객체를 new로 생성할 때마다 새로운 객체가 생성되고 안에 값도 다르다.
• 하지만 static을 사용한 것은 그 class 자체에 붙어있다.

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

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

const artcle1 = new Article(2);
const artcle2 = new Article(1);
console.log(Article.publisher)  // 출력값 goo
Article.printPublisher();       // 출력값 goo

• Object에 상관없이 들어오는 값 상관없이 공통적으로 사용할 경우 static을 작성해서 메모리의 사용을 줄여준다.

 

5. 상속 & 다양성

class Shape {
    constructor(width, height, color){
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw(){
        console.log(`drawing ${this.color}`)
    }

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

class Rectangle extends Shape {}
class Triangle extends Shape {
    draw(){
        super.draw();
        console.log("tria");
    }
    getArea(){
        return (this.width * this.height) /2;
    }
}

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());

• 상속을 통해 재사용성을 높힐 수 있다.
• 오버 라이딩해서 재 정의해서 사용할 수 있다.
• 재정의를 했는데 부모의 메서드를 쓰고 싶다면 super를 사용하면 된다.

 

6. Class Checking : 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

 

 

출처

• www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6