클래스와 오브젝트의 차이점

class
- 연관있는 data들을 한곳에 묶어놓는 컨테이너
- 속성(fields), 행동(methods)
- data class: 관련있는 data(field)만 정의된 클래스
- 캡슐화: 클래스 내에서 내부적으로 보여지는 변수, 외부에서 보여지는 변수를 나눔
- 상속과 다형성

 

1. Class

• 붕어빵을 만들 수 있는 틀
• template(틀)만 정의, 실제 data는 들어있지 않다.
• 한 번만 선언한다.

 

2. Object

• 클래스를 이용해서 실제 data를 넣어서 만드는 것
• 클래스를 이용해서 생성된 새로운 instance
• 여러 번 생성될 수 있다.

 

3. javascript의 class

• ES6에 도입되었다
• 기존의 prototype을 기반으로 문법만 추가되었다. (syntactical sugar)

 

4. Class declarations

class Person {
	// constructor, 생성자, 필요한 data 전달
    constructor(name, age) {
    	// fields
    	this.name = name;
        this.age = age;
    }
    
    // methods
    speak() {
    	console.log(`${this.name}: hello!`);
    }
}

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

 

5. Getter and setters

class User {
	constructor(firstName, lastName, age) {
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    
    get age() { // 정의하는 순간 this.age는 바로 getter 호출
    	return this._age;
    }
    
    set age(value) { // 정의하는 순간 값을 할당(= age)할 때 setter 호출
    	// if (value < 0) {
        // 	  throw Error('age can not be negative');
        // }
   		this._age = value; 
        this._age = value < 0 ? 0 : value;
        // = value에서 setter 계속해서 호출하게 된다
        // 무한반복 방지하기 위해 getter, setter 변수 이름 변경
    }
}

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

• 클래스를 사용하는 user가 잘못 사용해도 방어적인 자세로 만들어줄 수 있는 것

 

6. Fields

class Experiment {
	publicField = 2; // 외부 접근 가능
    #privateField = 0; 
    // 클래스 내부에서만 접근(r/w) 가능
    // 클래스 외부에서는 read, write 불가
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField); // undefined

 

7. 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
// 함수 호출 시에도 class 이름 명시
Article.printPublisher(); // Dream Coding

• 클래스가 가진 고유한 값을 동일하게 반복적으로 사용
• 들어오는 data에 상관없이 공통적으로 클래스에서 쓸 수 있는 것일 때 use
• object에 상관없이 클래스 자체에 연결되어 있는 것
• object마다 할당되는 것이 아니라, 클래스 자체에 붙어있는 것

 

8. 상속과 다형성

class Shape {
	constructor(width, height, color) {
    	this.width = width;
        this.height = height;
        this.color = color;
    }
    
    draw() {
    	console.log(`drawing ${this.color} color!`);
    }
    
    getArea() {
    	return this.width * this.height;
    }
}

class Rectangle extends Shape {
	// Shape의 fields와 methods가 포함된다.
}
class Triangle extends Shape {
	draw() {
    	super.draw();
    	console.log('triangle');
    }
	getArea() {
    // 오버라이딩: 필요한 함수만 재정의해서 사용
    	return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea()); // 400

const triangle = new Rectangle(20, 20, 'red');
triangle.draw(); 
// drawing red color!
// triangle
console.log(triangle.getArea()); // 200

 

9. 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
// js의 모든 object는 js의 Object 상속한 것
console.log(triangle.toString()); // 오버라이딩도 가능

• 왼쪽의 object가 오른쪽의 class의 instance인지 아닌지 확인
• true, false를 return

 

 

 

참고

youtube 드림코딩 by 엘리

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