1. Object literal과 Factory function 사용하기

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

const user1 = createUser('chris123@google.com', '19920321');
const user2 = createUser('jerry99@google.com', '19950719');
const user3 = createUser('alice@google.com', '19931224');

객체를 생성하는 Factory function을 만들고, 그 안에서 Object literal로 객체를 생성하여 리턴하는 방법입니다.

2. Constructor function 사용하기

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

const user1 = new User('chris123@google.com', '1992-03-21');
const user2 = new User('jerry99@google.com', '1995-07-19');
const user3 = new User('alice@google.com', '1993-12-24');

객체를 생성하는 용도로 사용하는 Constructor function을 정의하고, 그 안에서 this 키워드를 사용하여 생성될 객체의 프로퍼티와 메소드를 설정하는 방법입니다. Constructor function으로 객체를 생성하려면 그 앞에 new를 붙여서 실행해야 한다는 사실, 반드시 기억하세요.

3. class 키워드 사용하기

class User {
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

const user1 = new User('chris123@google.com', '1992-03-21');
const user2 = new User('jerry99@google.com', '1995-07-19');
const user3 = new User('alice@google.com', '1993-12-24');

class 키워드를 사용해서 객체의 틀을 정의하고, 마찬가지로 그 앞에 new를 붙여서 객체를 생성하는 방법입니다. class를 사용할 때는 보통 프로퍼티의 경우 constructor 안에 정의하고, 메소드의 경우 constructor 밖에 정의합니다.

이 밖에도 자바스크립트로 객체를 만들 수 있는 방법에는 여러 가지가 있지만 일단은 이 정도만 아셔도 충분합니다.

이제 다음 챕터에서는 객체 지향 프로그래밍을 할 때 알아야 하는 기본 개념들을 배울 건데요. 이때 위의 세 가지 방법 중에서 class 키워드를 사용하는 방법을 쓸 겁니다. Factory function이나 Constructor function을 사용해도 문제는 없지만, class는 자바스크립트 뿐만 아니라 Java 등의 다른 언어에서도 등장하는 보편적인 용어이고, 그 자체로 객체 지향의 원리를 나타내기에 적절해서 React 등의 유명 프레임워크에서도 사용하던 방식이기 때문입니다.

다음 챕터에서는 class 키워드만 사용할 테니까 class 안에 어떤 식으로 코드들이 들어가는지 미리 잘 봐두고 넘어가세요.

클래스는 파일 하나당 선언

class User {
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
} 

class PremiumUser extends User {
  constructor(email, birthdate, level, point) {
    super(email, birthdate);
    this.level = level;
    this.point = point;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);  
    this.point += item.price * 0.05;
  }

  streamMusicForFree() {
    console.log(`Free music streaming for ${this.email}`);
  }
}

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

const user1 = new User('chris123@google.com', '19920321');
const user2 = new User('rachel@google.com', '19880516');
const user3 = new User('brian@google.com', '20051125');
const pUser1 = new PremiumUser('niceguy@google.com', '19891207', 3);
const pUser2 = new PremiumUser('helloMike@google.com', '19900915', 2);
const pUser3 = new PremiumUser('aliceKim@google.com', '20010722', 5);

const users = [user1, pUser1, user2, pUser2, user3, pUser3];

users.forEach((user) => {
  user.buy(item);
});

이때까지 저는 여러 개의 클래스를 하나의 파일 안에 작성했습니다. 지금 보이는 것처럼 User 클래스와 PremiumUser 클래스를 모두 하나의 파일 안에 정의하고 사용했죠.

그런데 사실 개발 실무에서는 이런 식으로 여러 개의 클래스를 하나의 파일에 정의하기보다는 파일 하나당 클래스 하나를 정의해두고 이를 메인 코드에서 가져와 사용합니다. 예를 들어 위 코드는

• User.js

class User {
  constructor(email, birthdate) {
    this.email = email;
    this.birthdate = birthdate;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);
  }
}

export default User;

• PremiumUser.js

import User from './User';

class PremiumUser extends User {
  constructor(email, birthdate, level, point) {
    super(email, birthdate);
    this.level = level;
    this.point = point;
  }

  buy(item) {
    console.log(`${this.email} buys ${item.name}`);  
    this.point += item.price * 0.05;
  }

  streamMusicForFree() {
    console.log(`Free music streaming for ${this.email}`);
  }
}

export default PremiumUser

• main.js

import User from './User';
import PremiumUser from './PremiumUser';

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

const user1 = new User('chris123@google.com', '19920321');
const user2 = new User('rachel@google.com', '19880516');
const user3 = new User('brian@google.com', '20051125');
const pUser1 = new PremiumUser('niceguy@google.com', '19891207', 3);
const pUser2 = new PremiumUser('helloMike@google.com', '19900915', 2);
const pUser3 = new PremiumUser('aliceKim@google.com', '20010722', 5);

const users = [user1, pUser1, user2, pUser2, user3, pUser3];

users.forEach((user) => {
  user.buy(item);
});

이런 식으로 각 클래스와 메인 로직(main.js)을 파일별로 쪼개서 작성합니다. 혹시 모듈 내부의 것을 공개하고(export), 다른 모듈의 것을 가져오는(import) 자바스크립트 문법이 궁금하신 분들은 '모던 자바스크립트' 토픽의 '자바스크립트 모듈' 챕터를 참조하세요.

실무에서는 이렇게 파일 하나당 클래스 하나를 두고 외부에 공개하는 방식을 많이 사용합니다. 그래야 코드를 좀더 편리하게 관리할 수 있기 때문입니다.

이번 토픽에서는 한 눈에 모든 코드를 보기 위해 하나의 파일에 여러 클래스를 작성했지만 실제로는 파일 하나당 클래스 하나를 작성하고, 이를 외부에 공개해서 사용할 수 있도록 하는 방식을 주로 활용한다는 점, 잘 기억하세요.