[JS 100제] 문제12 - 게임 캐릭터 클래스 만들기

문제

다음 소스코드에서 클래스를 작성하여 게임 캐릭터의 능력치와 '파이어볼'이 출력되게 만드시오. 주어진 소스 코드를 수정해선 안됩니다.

데이터
<여기에 class를 작성하세요.>

const x = new Wizard(545, 210, 10);
console.log(x.health, x.mana, x.armor);
x.attack();

출력
545 210 10
파이어볼

 

나의 풀이

class Wizard {
  constructor(a, b, c) {
    this.health = a;
    this.mana = b;
    this.armor = c;
  }
  attack() {
    console.log("파이어볼");
  }
}

const x = new Wizard(545, 210, 10);
console.log(x.health, x.mana, x.armor);
x.attack();

// 출력
545 210 10
파이어볼

1. class 선언식을 이용하여 Wizard 라는 class 를 정의해주었다.
2. constructor 파라미터로 a, b, c 를 주어 세개의 값을 받을 수 있게 하였다.
3. this.health = a; 와 같이 값을 지정해주었다.
4. attack 함수도 클래스 내부에 정의하여 출력에 맞게 작성하였다.

 

정답

const Wizard = class Wizard {
    constructor (health, mana, armor){
        this.health = health;
        this.mana = mana;
        this.armor = armor;
    }
    attack(){
        console.log('파이어볼');
    }
}

const x = new Wizard(545, 210, 10);
console.log(x.health, x.mana, x.armor);
x.attack();

답안은 표현식으로 class를 선언해주었고, 파라미터 값의 이름도 동일하게 지정해 준 것을 확인할 수 있었다. 차후에 class 를 선언하게 되면 표현식으로 정의해두는 것이 재사용성에 용이할 수 있으니,, 다음부턴 문제라도 그렇게 풀어보자 생각했다.

 

JS 간단 복습

JavaScript Class 에 대해서

 

Class

class는 객체를 생성하기 위한 템플릿이다. class는 데이터와 이를 조작하는 코드를 하나로 추상화하는 역할을 한다.

 

Class 문법

class 문법은 class 선언과 class 표현식 두 가지 방법을 제공한다. 

 

Class 선언

클래스의 이름(예제에선 Rectangle)과 함께 class 키워드를 사용하여 선언한다. class 내부의 constructor 는 한번만 사용할 수 있다. 이유는 constructor 가 생성자 그 자체를 가리키기 때문이다. 즉, 아래의 예시로 보면 constructor 대신 Rectangle을 사용할 수도 있다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

 

Class 표현식

변수를 선언하고, 그 변수에 class를 넣어주는 것을 class 표현식이라고 한다. 이는 class를 정의하는 또 다른 방법이다.

class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다. 이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효하다.

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 출력: "Rectangle2"

 

추가적으로, 함수 선언과 클래스 선언의 차이는 바로 호이스팅이다.

함수는 정의하기 하기 전에 호출할 수 있지만, 클래스는 정의하기 전에 호출할 수 없다. 즉 반드시 정의 후에 호출할 수 있는 것이다.