▶ 클래스

지금까지 객체 리터럴, 생성자함수를 사용하여 객체를 생성하는 방법을 배웠다.

• 하지만, 객체 리터럴은 단일 객체를 생성하기때문에 비슷한 객체를 여러개 만들어야 할 경우가 번거롭고,
• 생성자 함수는 생성자 함수를 상속할 때 프로토타입 체인을 조작해야 하기 때문에 복잡하다는 단점이 있다.

따라서 ES6부터 생성자 함수를 좀 더 편하게 쓸 수 있도록 클래스 문법을 도입했다.

생성자 함수

function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}

const user1 = new User("sieun", 22);
const user2 = new User("kori", 7);

생성자함수에 메서드를 추가

• 생성자 함수에 메서드를 추가하려면 prototype이라는 속성 안에 추가해야한다
• prototype을 사용하면 생성자 함수와 프로토타입 메서드를 별도로 정의해야해 구문이 복잡해진다.

function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}

// 프로토타입 메서드
User.prototype.addAge = function (user) {
  this.age += 1;
  console.log(`${user.name}님 주름이 하나 늘었네요(;´༎ຶД༎ຶ)`);
};

const user1 = new User("sieun", 22);
const user2 = new User("kori", 7);

console.log(user1.age); // 22
user1.addAge(user1); // sieun님 주름이 하나 늘었네요(;´༎ຶД༎ຶ)
console.log(user1.age); // 23

---

Class

class User {
  // 생성자 메서드
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
      console.log(this.name);
    };
  }
}
const user1 = new User("sieun", 22);
const user2 = new User("kori", 7);

Class에 메서드를 추가

class를 사용하면 생성자와 메서드를 하나의 구문으로 묶을 수 있어 코드가 간결해진다.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
      console.log(this.name);
    };
  }
  
  // 프로토타입 메서드
  addAge(user) {
    this.age += 1; // or user.age
    console.log(`${user.name}님 주름이 하나 늘었네요(;´༎ຶД༎ຶ)`);
  }
}

const user1 = new User("sieun", 22);
const user2 = new User("kori", 7);

console.log(user1.age); // 22
user1.addAge(user1); // sieun님 주름이 하나 늘었네요(;´༎ຶД༎ຶ)
console.log(user1.age); // 23

클래스는 new 연산자 없이 호출하면 에러가 발생하지만, 생성자 함수는 일반함수로서 호출된다.

(생성자 함수를 사용할 때, 사람들이 new를 많이 빼먹어 오류가 자주 발생한다고 한다. -> Class를 사용하면 오류 방지 가능하다.)

(질문🤯) 위 코드에서 this.age를 user.age로 변경해줘도 똑같은 결과가 출력이 된다.
나이를 1씩 더하는 메서드를 추가하고 싶다면, 둘 중 아무거나 사용해도 상관이 없는 걸까?

📎참조

https://www.youtube.com/watch?v=SRediokShYs