[JS] 객체 지향 프로그래밍과 Class

Class에 대해서 이야기하려면 객체 지향 프로그래밍(Object Oriented Programming)을 빼놓을 수 없습니다. 객체 지향 프로그래밍은 프로그램을 여러 개의 독립된 객체들의 모임으로 나누고 이 객체들 간의 상호작용으로 표현하는 프로그래밍 패러다임입니다.

여기서 객체는 모든 것이 될 수 있습니다. 실제 하는 것이든 개념적으로 존재하는 것이든 속성과 행동(기능)을 떠올릴 수 있다면 객체로 표현할 수 있습니다. 예를 들어 사람 객체의 속성과 행동을 생각해보겠습니다. 속성으로는 키, 몸무게, 피부색 등이 뽑아볼 수 있습니다. 행동으로는 걷기, 뛰기, 엎드리기 등을 뽑을 수 있을 겁니다.

이렇게 객체에게서 뽑아낸 속성과 행동은 클래스(class) 안에 프로퍼티(property)와 메서드(method)로 표현됩니다. 프로퍼티는 객체에 붙은 변수, 메서드는 객체에 붙은 함수라고도 볼 수 있습니다.

클래스(class)

클래스(class)는 객체(object)를 만들기 위한 청사진으로 객체가 어떻게 생겼는지 그 상세적인 정보를 알려줍니다. 이 청사진을 이용하면 객체 만들어 낼 수 있습니다. 클래스를 이용해서 구체적인 객체를 만들어 내면 이것을 인스턴스(instance)라고 부릅니다.

자바스크립트에서 class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용합니다. 간단한 클래스를 만들어 보겠습니다. 아래 코드를 하나씩 살펴보겠습니다.

// 클래스 선언
class Monster {
  // 생성자(Constructor)
  constructor(name, hp) {
    // 프로퍼티(property)
    this.name = name;
    this.hp = hp;
    this.alive = true;
  }
  // 메소드(Method)
  damaged(damage) {
    if (this.hp > 0 && this.alive) {
      this.hp -= damage;
      console.log(`${damage}의 데미지를 입었습니다.`);

      if (this.hp < 0) {
        this.alive = false;
        console.log(`${this.name}이 죽었습니다.`);
      }
    }
  }
}

const monster = new Monster("slime", 50);
monster.damaged(100);

생성자(constructor)

생성자 메서드는 class로 객체를 생성하고 그 초기 상태를 지정하기 위한 특수한 메서드입니다. 이 특수한 메서드는 클래스 내에 한 개만 존재할 수 있으며, 만약 여러 개의 생성자 메서드가 존재하면 문법 오류가 발생합니다.

예제 코드의 생성자 메서드는 name과 hp를 인자로 받고 인스턴스에 name, hp, alive라는 속성을 만듭니다.

프로퍼티(property)

프로퍼티는 클래스 내의 변수입니다. this 키워드는 인스턴스를 가리킵니다. 생성자를 실행하면 인스턴스를 만들면서 몬스터의 name과 hp를 지정하고 한 가지 기본값을 갖게 됩니다.

메서드(method)

메서드는 객체에 붙은 함수로 해당 클래스로 만들어진 모든 인스턴스가 공유하게 됩니다. Monster 클래스의 모든 인스턴스는 damaged 메서드를 사용할 수 있습니다.

예제 코드의 damaged 메서드는 인스턴스의 hp 속성 값이 0보다 크고 alive 속성의 값이 true라면 인자로 받은 damage 값에 따라서 hp 속성의 값과 alive 속성의 값을 변경시킵니다.

인스턴스(instance) 생성

인스턴스를 만들기 위해서는 new 연산자(operator)와 함께 클래스의 이름을 호출해야 합니다. new 연산자 없이 클래스의 이름을 호출하면 타입 에러가 발생합니다.

extends 키워드를 통한 클래스 상속(inheritance)

extends 키워드를 이용하면 부모 클래스를 상속받는 자식 클래스를 정의할 수 있습니다. 상속을 이용하면 기존의 클래스를 다른 클래스로 확장할 수 있습니다. Monster 클래스를 상속받는 Orc 클래스를 만들겠습니다.

class Orc extends Monster {
  constructor(name, hp, weapon) {
    super(name, hp);
    this.weapon = weapon;
  }

  attack() {
    console.log(`${this.name}가 ${this.weapon}으로 공격합니다.`);
  }
}

const OrcWarrior = new Orc("오크 전사", 150, "녹슨 검");
OrcWarrior.damaged(30); // 30의 데미지를 입었습니다.
OrcWarrior.attack(); // 오크 전사가 녹슨 검으로 공격합니다.

super 키워드를 사용하면 부모 클래스의 생성자를 호출하거나 부모 클래스를 참조할 수 있습니다. 자식 클래스에 생성자가 있다면 this를 사용하기 전에 super()를 사용하여 부모 클래스의 생성자를 호출해야 합니다. 자식 클래스에서 부모 클래스의 생성자를 호출하지 않으면 참조 에러가 발생합니다. Orc 클래스의 인스턴스는 Monster 클래스의 모든 메서드에 접근할 수 있습니다.

저작자표시

빠른손김참치