[객체와 클래스] 05. 객체 만들기 3: Class

Factory Function이나 Constructor Function을 사용해서 객체를 생성하는 방법 사실 이 두 가지 방법이 자바스크립트에서 객체를 생성하는 주된 방법이었는데요.

그런데 2015년에 만들어진 자바스크립트 표준, ES6에서는 Class라는 키워드가 추가되었습니다.

Class 키워드는 자바스크립트에서 조금 더 직관적이고 간편한 방법으로 객체 지향 프로그래밍을 할 수 있도록 해 줍니다. 이 Class 키워드를 어떻게 사용하는지 보여드리겠습니다.

function User(email, birthdate){
  this.email = email;
  this.birthdate = birthdate;
  this.buy = function (item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

class User {
  constructor(email,birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }
  
  buy(item){
    console.log(`${this.email} buys ${item.name}`);
  }
}

const item = {
  name: '스웨터',
  price: 30000,
}

const user1 = new User('chris123@google.com','1992-03-21')

console.log(user1.email);
console.log(user1.birthdate);
user1.buy(item);

const user2 = new User('jerry@google.com','1995-07-19')

console.log(user2.email);
console.log(user2.birthdate);
user1.buy(item);

코드를 보면 function이라고 쓰여 있는 부분을 class라고 바꿔줬는데요.이것이 바로 User 클래스입니다.

이 User 클래스의 경우에도 Constructor Function 때와 똑같이 그 앞에 new를 붙여서 객체를 생성할 수 있습니다.

 

User 클래스 안을 보면 일단 가장 처음에 이렇게 constructor라는 메소드가 보입니다. 이 constructor는 생성자라는 뜻인데요.이 생성자 메소드는 객체가 생성될 때 실행됩니다.

그리고 생성자 메소드 안에 있는 이 this는 생성되는 객체를 나타냅니다.

여기 써있는 것들은 매번 생성되는 새로운 객체의 프로퍼티 값들이 되는 겁니다.

 

그리고 buy가 해당 객체의 메소드가 되는데, constructor안에 프로퍼티들을 쓰고 그 바깥에 메소드를 정의했습니다.

그러니까 프로퍼티와 메소드를 분리했는데요. 보통 클래스에서는 프로퍼티들을 constructor 안에, 메소드는 그 바깥에 분리해서 쓴다는 점을 잘 기억해 주세요.

 

저장하고 실행해보면 user1 객체의 프로퍼티 값과 메소드를 잘 확인할 수 있습니다.

그러면 이번에 User 객체를 하나 더 만들어보겠습니다.

그리고 다시 새로고침을 해보면 마찬가지로 user2 객체가 잘 생성된 것을 확인할 수 있습니다.

이렇게 클래스를 정의해서 이것으로 객체를 만들 수 있다는 사실을 잘 기억해 주세요.