자바스크립트 : class vs object (드림코딩)

Class vs Object

 

1. Class

표현하고자 하는 물체와 연관있는 데이터를 한 곳에 묶어놓는 (encapsulation) 컨테이너, value와 methods등으로 이루어질 수 있음. 

class Person() {
	height,
    weight,
    speak(){}
}

class vs object

class(틀) : 템플릿, 한 번만 선언됨, 데이터가 없이 이러이러한 데이터가 들어올 수 있다는 것만 정의, 실제 데이터 x

object(물체) : 클래스의 인스턴스, 여러번 만들 수 있음, 데이터 존재

* class는 붕어빵을 만드는 틀. Object는 class 붕어빵 틀로 만든 크림붕어빵, 팥붕어빵, 피자붕어빵 등

** class는 ES6에 새로 만들어진 규칙으로, 이전에는 바로 object prototype을 만드는 방식으로 정의했음

 

2. Class 선언

클래스라는 키워드를 통해 클래스를 선언하고, constructor (생성자)를 통해 추후 만들게 될 object에 할당할 데이터를 정의할 수 있음

class Person {
	constructor(name, age){
    	this.name = name;
        this.age = age;
    }
    
    speak(){
    	console.log(`${this.name}: hello!`);
    }
}

 

3. Object 생성

const 변수명 = new Person('ellie', 20);

 

4. getter & setter

class 사용자가 실수로 형식에 맞지 않는 object를 만드는 것을 방지하기 위해 미리 class에 정의하는 장치

getter : class 내부에 값을 가져오는 메소드

setter : class 내부에 값을 미리 설정하는 메소드

class Person {
	constructor(name, age){
    	this.name = name;
        this.age = age;
    }
    
    get age() {
    	return this._age;
    }
    
    set age() {
    	if (value < 0) throw Error('age cannot be negative');
        this._age = value;
    }
}

 

5. Public & Private

가장 최근에 자바스크립트에 추가된 규칙으로, 생성자를 별도로 정의하지 않고, public 값과 private 값을 정의할 수 있음

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

 

6. Static

생성된 object에 할당되는 것이 아니라 class 자체에 공통적으로 적용할 수 있는 값 또는 메소드. 틀 자체에 정의하기 때문에 메모리를 절약할 수 있음

 

7. 상속 & 다양성

상속 : 재사용이 가능한 값 또는 메소드들을 class에 정의한 후, 해당 class를 바탕으로 새로운 class를 상속하여 생성할 수 있는 기능

다양성 : class를 상속하여 신규 class를 생성하지만, 해당 class에만 사용되는 메소드는 재정의할 수 있음

class shape (width, height, color) {
	this.width = width;
    this.height = height;
    this.color = color;
    
    getArea(){
    	return this.width * this.height;
    }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
	// 특정 클래스에서만 필요한 함수는 재정의할 수 있음 overriding이라고 함.
    return (this.width * this.height) / 2;
}

 

8. instanceOf

클래스가 특정 클래스를 상속했는지를 판단하는 기능

console.log(rectangle instanceof Rectangle); // true;
console.log(rectangle instanceof Triangle); // false;
console.log(triangle instanceof Triangle); // true;
console.log(triangle instanceof Object); // true;

 

참조

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference