[Javascript] Class와 Object 차이점

자바스크립트는 프로토타입 기반의 객체지향 언어이다.
대부분의 사람들은 자바스크립트는 객체지향 프로그래밍이 아닌 함수형 프로그래밍 언어로 알고있지만, 사실 자바스크립트는 프로토타입을 기반으로 한 강력한 객체지향 프로그래밍을 제공하기도 하는 멀티 패러다임 언어이다.

🌹 Class

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

우리가 🐟🍞붕어빵🐟🍞을 만든다고 가정을 해보자.
그러면 붕어빵에 속을 넣기 전의 붕어빵은 여러가지 붕어빵이 될수 있겠다. 팥을 넣으면 팥붕어빵, 크림을 넣으면 크림붕어빵이 되듯이 이처럼 속이 비어있는 붕어빵(template)을 클래스(Class) 할 수 있겠다.
💕 특징
✔ 데이터가 없다. (크림이나 팥이 없다고 상상해보자)
✔ 한번만 선언할 수 있다.
✔ 메모리를 할당하지 않는다.
✔ ES6에서 추가된 친구이다.

🌹 Object

기본적으로 오브젝트를 선언하는 방법

// 첫번째 방법
const obj = { name:'앤쨩', age:24 };
// 두번째 방법
const obj2 = new Object( name:'앤쨩', age:24);

클래스를 이용하여 오브젝트를 만드는 방법

class Person {
  // constructor 생성자
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }
  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}
// 위의 Class로 Object 만들기
conse anne = new Person('anne', '24');
console.log(anne.name); // anne
console.log(anne.age); // 24
anne.speak(); // anne: hello!

🐟🍞비어있는 붕어빵🐟🍞(Class)에 크림이나 팥(Data)을 넣으면 그게 바로 오브젝트(Object)가 된다고 이해하면 될 것 같다.
💕 특징
✔ 메모리를 할당한다.
✔ 오브젝트만을 사용하게 되면 뒤늦게 또다른 프로퍼티를 추가가 가능하다. 그러면 이러한 짓을 할 수가 있다.

const person = { name:'anne', age: 24};
print(person);
--- // 또다른 프로퍼티 추가
person.hasJob = true;
console.log(person.hasJob); // true
--- // 프로퍼티 삭제
delete person.hasJob;
console.log(person.hasJob); // undefined

다른 언어에서는 흔한일은 아니다. 하지만 이렇게 동적으로 코딩을 하게되면 그때 잠시는 편할지 모르지만 나중에 유지보수가 힘들어지고 예상치 못한 에러가 발생한다.

🧩 팁

/*
- .(dot)
코딩하는 그 순간 그 key에 해당하는 값을 받아보고 싶을때
- Computed properties
정확하게 어떤 key가 필요한지 모를때 (런타임에서 결정될때)
*/
console.log(person.name);
console.log(person['name']);
---
person.hasJob = true;
person['hasJob'] = true;