[JS] 클래스와 오브젝트의 차이점(class vs object)

class 

class person{
 name;
 age;
 speak();
}

연관 있는 데이터를 묶어 놓는 컨테이너 같은 존재

persion클래스 안에 name과 age 같은 속성(field), speak()와 같은 행동(method)이 들어있다.

→ 변수들이나 함수들을 묶어 놓은 것을 class 라고 한다.

 

클래스 내에서도 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수를 나누어서 캡슐화라고 한다.

그리고 클래스를 이용해서 상속과 다형성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 객체 지향 언어이다.

 

Class 

 - template : 클래스 자체에는 데이터가 들어있지 않고 틀(template)만 정의

 - declare once : 한번만 선언 

 - no data in 

 

object : 클래스를 이용해 실제 데이터를 만드는 것을 object 라고 한다.

 - instance of a class 

 - created many times 

 - data in 

 

→ 클래스는 데이터가 들어있지 않아 메모리에 올라가지 않지만 object는 메모리에 올라가게 된다.

 

클래스는 ES6에서 도입된 것으로 그 전에는 클래스를 사용하지 않고 오브젝트를 사용해 만들 수 있었다.

 

1. Class declarations

class Person {
	constructor(name, age) {	// 생성자
    	// fields
    	this.name = name;
        this.age = age;
    }
    
    // methods
    speak() {
    	console.log(`${this.name}: hello!`);	// this 는 생성된 object 를 가리킨다
    }  
}

// object 생성 
const dream = new Person('MARK', 22);

console.log(dream.name);	// MARK
console.log(dream.age);		// 22

dream.speak();				// MARK: hello!

- 새로운 object 를 만들 때는 new 키워드를 사용

 

2. Getter & Setter 

class User {
	constructor(firstName, lastName, age) {	// 생성자
    	// fields
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}

get age() {
	return this._age;
}

set age(value) {
	this._age = value;
}

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

사용자가 age를 -1 이라고 잘못 설정해도 우리가 좀 더 방어적인 자세로 만들어줄 수 있는 것이 getter와 setter이다.

age가 -1은 말이 안되기 때문에 get 메서드로 값을 리턴하고 set이라는 키워드로 값을 설정할 수 있다.

get에선 age 값을 리턴하고 set에서는 새로운 value를 받아와야 한다.

 

age getter를 정의하는 순간 생성자에 this.age는 메모리에 올라간 데이터를 읽어오는 것이 아니라 getter를 호출

setter를 정의하는 순간 값을 할당할 때 바로 메모리에 값을 할당하는 것이 아니라, setter를 호출

 

User라는 클래스 안에는 총 3개의 field가 있는데 firstName, lastName, _age 가 있다.

 

3. Public & Private

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

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

생성자를 사용하지 않고 필드 정의할 수 있다.

그냥 정의하게되면 Public 외부에서 접근 가능하다.

해시기호를 붙이게 되면 Private 필드. 클래스 내부에서만 접근 가능하다.

 

4. Static

class Article {
	static publisher = 'cooo';
	
    constructor(articleNumber) {
    	this.articleNumber = articleNumber;
    }
    
    static printPublisher() {
    	console.log(Article.publisher);	// cooo
    }
}

 

Static은 클래스 자체에 연결되어 있다. Article(클래스명).publisher 로 사용가능하다.

 

5. Inheritance (상속) / 다형성

 

도형을 그릴 때 네모 동그라미 세모를 그렸을 때 3가지 도형은 모두 width, height, color를 가지고 있다.

공통된 속성들을 묶어 놓은 클래스를 미리 만들어 놓고 재사용하면 유지보수도 쉽다. 

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

class Rectangle extends Shape{}
class Triangle extends Shape{
	draw() {
		super.draw() // 부모의 draw 호출
		console.log(`Triangle drawing`);	// Triangle drawing
	}
	getArea() {
	   return (this.width * this.height) / 2;
	}
}

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

const triangle = new Triangle(20, 20, 'red');
console.log(triangle.getArea); // 200

Shape라는 공통된 클래스를 만들고 extends 를 사용해서 재사용 할 수 있다.

rectangle은 Shape클래스를 상속 받았으므로 Shape 클래스의 field나 method를 사용할 수 있게 된다.

 

Triangle클래스 내에서 Shape클래스의 getArea()메서드를 다시 재정의해서 사용할 수 있는데 이것을 override라고 한다.

Triangle클래스에서 draw메서드를 override 했기 때문에 Shape클래스의 draw함수는 호출하지 않는다.

 

super.draw() 를 사용하면 부모의 draw( ) 를 호출한다.

 

6. InstanceOf

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

// JS에서 만든 모든 클래스는 JS에 있는 Object를 상속한 것이다.
console.log(triangle instanceof Object); // true

왼쪽에 있는 object가 오른쪽에 있는 클래스의 인스턴스인지 아닌지 확인 (object가 class를 이용해서 만들어졌는지)

true 와 fasle 반환 한다.

 

 

 

드림코딩 by 엘리 의 JS 강의를 시청 후 정리한 내용입니다.