[JavaScript] 클래스

자바나 파이썬처럼 클래스를 사용하는 언어에 익숙한 사람들을 위해 자바스크립트에서도 클래스가 개발되었습니다. 자바스크립트의 클래스는 ES6부터 만들어졌기 때문에 이전의 만들어진 자바스크립트 문법에 비해 엄격합니다.

 

1. constructor 메서드

자바스크립트에서 constructor 메서드는 파이썬의 __init__ 메서드처럼 초기화를 해주는 메서드라고 생각하면 됩니다.

class Person {
  constructor (name, age, married = false) {
    this.name = name;
    this.age = age;
    this.married = married;
  }
}

const person1 = new Person('zero', 30, true);
const person2 = new Person('week', 18);

console.log(
    person1, //Person {name: 'zero', age: 30, married: true} 
    person2 //Person {name: 'week', age: 18, married: false}
);

다만 인스턴스 초기화가 필요없는 클래스에서는 constructor 메서드를 생략해도 됩니다.

class Empty {}
console.log(new Empty()); //Empty {}

 

2. 필드

필드란 constructor 밖에서 this 키워드 없이 인스턴스의 프로퍼티를 정의하는 것을 말합니다.

따라서 필드를 사용하게 되면 constructor 메서드를 사용하지 않아도 됩니다.

 

class Slime {
  hp = 50; //필드값
  op = 4; //필드값
  attack (enemy) {
    enemy.hp -= this.op;
    this.hp += this.op/4;
  }
}

const slime1 = new Slime();
const slime2 = new Slime();

console.log(
    slime1, // Slime {hp: 50, op: 4}
    slime2 //Slime {hp: 50, op: 4}
);

slime1.attack(slime2);
console.log(
    slime1, //Slime {hp: 51, op: 4}
    slime2 //Slime {hp: 46, op: 4}
);

또한 이러한 필드는 디폴트값을 지정했을 때도 사용합니다.

class PizzaShop {
  no = 0;
  menu = { '페퍼로니': 10000, '포테이토': 12000 };

  constructor (name, no) {
    this.name = name;
    if (no) this.no = no; 
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
  order (name) {
    return `${this.menu[name]}원입니다.`
  }
}

const chain0 = new PizzaShop('(미정)'); 
//파라미터로 no값을 전달받지 못했기 때문에 필드값이 없다면 클래스의 this.no = undifined가 됨
//현재는 필드값이 있기 때문에 no의 값은 0이 됨
console.log(chain0, chain0.introduce()); //PizzaShop {no: 0, menu: {…}, name: '(미정)'} '안녕하세요, 0호 (미정)점입니다!'

const chain1 = new PizzaShop('판교', 3); // 파라미터로 no값이 있기 때문에 no의 값은 3이 됨
console.log(chain1, chain1.introduce()); // PizzaShop {no: 3, menu: {…}, name: '판교'} '안녕하세요, 3호 판교점입니다!'

chain1.menu['페퍼로니'] = 13000; // chain1 인스턴스의 필드값만 변경

console.log(
    chain0.order('페퍼로니'), // 10000원입니다.
    chain1.order('페퍼로니') //13000원입니다.
);

3. static 필드와 메서드

static필드와 메서드는 클래스에서 공용으로 사용하는 필드값과 메서드라고 생각하시면 됩니다.

class PizzaShop  {

  // 정적 변수와 메서드
  static brand = '피자샵';
  static contact () {
    return `${this.brand}입니다. 무엇을 도와드릴까요?`; 
  }

  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  introduce () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
}

console.log(PizzaShop.contact()); //피자샵입니다. 무엇을 도와드릴까요?