[클래스] 클래스를 왜 배우는가?

객체지향 프로그래밍에서는

세상에 존재할 수 있는 것이거나, 우리가 어떤 개체로써 볼 수 있는 것들을 추상화하여

객체(Object)로 표현을 한다.

 

그리고 우리는 프로그래밍에서 오브젝트를 { key: value } 의 형태로 만들 수 있다.

하지만 프로그래밍이 복잡해지면 복잡해질수록

const a = { } 의 형태로 오브젝트를 찍어내는 것은 효율성이 매우 떨어진다.

 

따라서 우리는 비슷한 객체들을 빠르게 찍어낼 수 있는 템플릿 기법에 대해 배울 필요가 있다.

 

그 템플릿은 클래스이며,

이번 글에서는 함수를 이용해서 어떻게 클래스를 만들어내는지 배울 것이고

클래스로부터 오브젝트를 만들어내기 위해 new 키워드를 사용해볼 것이다.

---

 

오브젝트는 게임에서 매우 많이 쓰이는 개념이다.

 

게임 내 캐릭터들이 있고, 캐릭터마다 각자의 전직(마법사, 전사, 도적 등)이 있다고 가정해보자.

캐릭터들마다 공격, 방어, 이동 모션은 그다지 틀리지 않을 것이다.

하지만 마법사, 전사, 도적의 공격, 방어, 이동 모션은 다를 수 있을 것이다.

 

이를 제어하기 위해 우리는 클래스 문법을 사용할 수 있다.

 

function Student (name, age) {
    this.age = age
    let life = 100
    this.getName = () => {
        return name
    }
    this.getLife = () => {
        return life
    }
    this.getHurt = () => {
        if (age > 28) {
            life = life - 10
        }
        life = life - 10
    }
}

 

일단 위는 클래스로 생성자 함수를 만든 것이다.

Student는 함수이지만 객체를 찍어내는 역할을 할 것이므로,

관례에 따라 앞에 대문자가 붙어있다.

이 생성자 함수와 함께 new 키워드를 함께 사용하면

새로운 오브젝트들을 원하는대로 찍어낼 수 있을 것이다.

 

const a = new Student('2DC', 30)
const b = new Student('3DC', 40)
const c = new Student('4DC', 50)

 

이제 const a, b, c는 각각 Student의 템플릿으로 찍어낸 오브젝트들이 들어있을 것이다.

또한 템플릿 내부에 있던 템플릿 메서드들을 사용해볼 수 있을 것이다.

new 키워드와 생성자 함수를 함께 쓰는 것은 굉장히 강력하다.

 

여기서 age를 바꾸는 것은 쉽다.

객체 내 age는 생성자 함수에서 this.age로 설정이 되었기 때문에 직접적으로 접근이 가능하다.

만약 이것이 진짜 게임이었다면 플레이어는 this.age를 이용하여 플레이어 본인의 나이를 수정할 수 있을 것이다.

 

this.age에 접근하는 것은 가능하다.

 

하지만 life는 let life = 100 로 초기에 설정되어 있으며, 이것은 객체에서 직접적으로 접근이 불가능하다.

위 스크린샷을 보면 a.life에 1000을 할당하고 출력을해도 1000이라는 값이 나온다.

하지만 메서드를 실행했을 경우 let에 저장된 life가 출력된다.

 

이는 let으로 선언된 life가 접근자 프로퍼티로 연결되어 있어서 우리의 의도와는 다르게 동작한다.

life를 우리가 자조적으로 설정하면 게임을 하는 플레이어는 목숨을 강제로 연장할 수 있을 것이다.

클래스의 특성을 잘 이용하면 우리는 다양한 조작을 객체에 가할 수 있게된다.

 

---

클래스 문법을 잘 사용하면 괜찮은 코드가 만들어질 것이다.

복잡한 HTML 페이지를 만들어야 할 경우

일단 어떤 것들을 클래스로 만들어서 코드를 심플화 할 수 있을지 생각해보아야 한다.