JavaScript - class와 object의 차이

객체지향 프로그래밍이란..?

다뤄야 하는 데이터가 많아짐에 따라 프로그램의 복잡성이 늘어나 이것을 감당하기 위해 관리체계를 설정놓을 필요성이 생겼다. 이때 프로그램을 객체들로 구성하고(연관성에 따라 묶어 놓고), 객체들 간에 서로 상호 작용 하도록 프로그래밍하는 방법이 객체지향 프로그래밍이다.

class는 연관있는 데이터들을 한 곳에 묶는 역할을 한다.
데이터에는 속성(field)와 행동(method)이 종합적으로 묶여있다.
class는 template의 역할을 하고 object는 그 template을 이용해 실제로 데이터를 넣어 만드는 것이다.
** 여러개의 object를 찍어낼 수 있는 기계의 역할을 한다고 볼 수 있다.
class를 통해 생성된 객체를 인스턴스라고 부른다. 따라서 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.

1. Class declarations

<script>
<!--class 생성-->
class Person // 보통 class 이름은 영어 대문자로 작명 {
	//constructor 생성자 : object를 만들 때, 필요한 데이타를 전달
    constructor(name, age) {
    	//fields, this는 constructor로부터 생성되는 object(instance)
        this.name = name; // 새로 생성되는 object에 {name: ${name}} 추가해줘
        this.age = age; // 새로 생성되는 object에 {age: ${age}} 추가해줘
    }
    
    //methods
    speak() {
    	console.log(`${this.name}: hello!`);
    }
}

<!--새로운 object 만들기-->
const mia = new Person('mia', 28); // 새로운 object를 만들때에는 new라는 키워드 사용
console.log(mia.name); // mia
console.log(mia.age); // 28
mia.speak(); // mia: hello!
</script>

2. Getter and setters

<script>
class User {
	constructor(firstName, lastName, age) {
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    
    <!--setter에서 저장해 놓은 값을 get, 가져옴-->
    get age() {
    	return this._age;
    }
    
    <!--setter에서 먼저 User의 age를 value로 받아 나이가 음수가 아닌지 체크 후 property에 저장
    (이때 똑같은 이름으로 key값을 설정하면 무한 루프를 돌기 때문에 보통 언더바를 붙여 이름을 만든다.)-->
    set age(value) {
    	if (value < 0) {
        	throw Error('age can not be negative');
        }
        <!--or-->
    	this._age = value < 0 ? 0 : value; 
    }
}

const user1 = new User('steve', 'job', -1);
console.log(user1.age)// "Error: age can not be negative" or 0
</script>

3. Fields (public, private)

constructor없이 field를 정의할 수 있다.
아무것도 없이 정의하는 publicField는 외부에서 접근 가능, 해시태그를 붙이면 privateField로 class 내부에서만 값에 접근, 변경 가능. 외부에서는 값을 보거나 변경 불가.

<script>
	class Experiment {
    	publicField = 2;
        #privateField = 0;
    }
    const experiment = new Experiment();
    console.log(experiment.publicField); // 2
    console.log(experiment.privateField); // undefined
</script>

4. Static properties and methods

class가 가지고 있는 고유한 값과 동일하게 사용되는 method를 static이라는 키워드로 넣어주면 object의 데이터와 상관없이 class 자체에 연결된다. 메모리의 사용을 줄여준다.

<script>
	class Article {
    	static publisher = 'Mia';
        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 : static은 object가 아닌 class에 연결되어있다.
    console.log(Article.publisher); // Mia
    Article.printPublisher(); //Mia
</script>

5. 상속과 다양성

공통적인 부분을 class로 정의 해주고 extends라는 키워드를 사용함으로써 공통된 부분을 각각의 class에 상속 해줄 수 있다. 공통적으로 사용되는 속성 값을 계속 재사용하기 때문에 유지보수가 쉬운 장점이 있다.

<script>
<!--공통된 부분-->
	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 width * this.height;
        }
    }
<!--extends라는 키워드를 사용해 shape라는 클래스를 연장한다.
   이렇게 하면 shape에 있는 field와 method가 자동으로 rectangle에도 포함이 된다.-->
    class Rectangle extends Shape {
    	draw() {
<!--새롭게 정의한 메소드 + 이전에 정의해 놓은 메소드도 부르고 싶을때 
    super를 사용해 부모의 메소드를 가져온다.-->
        	super.draw(); 
            console.log('rectangle')
        }
    }
    class Triangle extends shape {
    	getArea() {
<!--원하는 부분만 바꿀 수도 있다 overridiing-->
        	return (this.width * this.height) / 2;
        }
    }
    
    const rectangle = new Rectangle(20, 20, 'blue');
    rectangle.draw(); // drawing blue color of / rectangle
    console.log(rectangle.getArea()); // 400
    const triangle = new Triangle(20, 20, 'red');
    triangle.draw(); // drawing red color of
    console.log(triangle.getArea()); // 200
</script>

6. InstanceOf

왼쪽에 있는 object가 오른쪽에 있는 class에서 만들어진 것인지 확인하여 true 또는 false를 리턴한다.

<script>
	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
</script>