10. 클래스 (1)

이번 글에서는 ES6에서 추가된 핵심 기능인 클래스에 대해 알아보자.

 

1. 자바스크립트에는 클래스가 없었다?

 

프로토타입 지향 언어인 자바스크립트는 객체는 있지만 클래스라는 개념은 없는 특이한 언어였다. "붕어빵을 만들기 위한 틀이 클래스" 라고 배웠는데, 붕어빵 틀은 없는데 붕어빵은 있다니 대체 붕어빵은 무엇으로 만들어진 것인가... 라며 멘붕하기 딱 좋은 언어가 자바스크립트였던 것이다.

 

그러다가 2015년 ES6가 발표되면서 공식적으로 자바스크립트에도 클래스 문법이 추가되었다. 엄밀히 말하면 ES6에 추가된 클래스도 다른 언어에서 말하는 클래스와는 개념이 다르긴 하지만, 어쨋든 다른 객체 지향 언어에서 익숙하게 사용해 온 클래스를 자바스크립트에서도 적용할 수 있다는 것은 큰 행운이었다.

 

클래스가 추가되면서 ReactJS나 VueJS 등 프론트 엔드 프레임 워크들도 많은 변화가 있었다. 가령, 컴포넌트의 스크립트 부분을 리터럴 객체로 표현하던 것들을 클래스로 표현하여 유지보수가 용이하고 알아보기 쉬운 코드를 작성한다던지, 객체 지향 언어에 익숙한 개발자들이 좀 더 빠르게 적응할 수 있게 한다던지 말이다.

 

2. 자바스크립트 클래스 문법

 

자바스크립트의 클래스는 엄밀히 말하면 특수한 함수이다. 위에서 다른 객체 지향 언어의 클래스와 다르다고 말했던 이유가 바로 자바스크립트의 클래스는 함수이기 때문이다. 이 내용에 대해서는 조만간 글 하나를 써서 자세히 알아보도록 하고 이번 글에서는 클래스만 알아보도록 하자.

 

아래의 코드는 자바스크립트의 클래스 구조를 나타낸 것이다. 하나씩 살펴보도록 하자.

 

class Sedan {
    // 생성자
    constructor({door, maker, power, price}) {
        this.door = door
        this.maker = maker
        this.power = power
        this.price = price

        console.log('세단이 생성되었습니다 !!')
    }
    
    // 메서드 1
    setSedanInfo ({door, maker, power, price}) {
        this.door = door
        this.maker = maker
        this.power = power
        this.price = price
    }
    
    // 메서드 2
    getSedanInfo () {
        return {
            door: this.door,
            maker: this.maker,
            power: this.power,
            price: this.price
        }
    }
}

 

2.1 생성자 함수

 

생성자 함수는 new 키워드를 이용하여 클래스를 객체로 생성할 때 호출되는 함수이다. 객체 내부의 멤버들을 초기화 할 때 사용된다. constructor라는 키워드를 사용하며 클래스 내에 반드시 하나만 있어야 한다. 아래의 코드와 같이 this 키워드를 통해 객체 멤버에 접근할 수 있다.

 

constructor (param1, param2, ...) {
    this.member = param1
    this.member2 = param2
}

 

2.2 클래스 필드

 

초창기 ES6의 클래스에는 몸체에 멤버를 선언할 수 없었다. 그래서 생성자 함수에 this 키워드를 이용하여 클래스 내부에 멤버를 초기화를 하였는데, 이것을 클래스 필드라고 한다. 코드를 재탕하는 것 같아서 좀 그렇긴 하지만 아래에 코드에서 this로 멤버를 초기화하는 부분이 클래스 필드이다.

 

constructor (param1, param2, ...) {
    this.member = param1  // 클래스 필드 (초기화는 반드시 생성자에서 this로 진행한다.)
    this.member2 = param2 // 클래스 필드
}

 

최신 브라우저나 NodeJS에서는 TC39 프로세스 중 Class field declarations proposal이 적용되면서 아래와 같이 클래스 몸체에도 필드를 선언할 수 있게 되었다.

 

class Example {
  member1 = ''
  member2 = 100
  member3 = true
}

 

참고로 자바스크립트의 클래스 필드는 기본적으로 public으로 선언되기 때문에 외부에서 객체의 멤버에 접근도 가능하고 값도 변경할 수 있다. 다만, 위에서 언급한 TC39 프로세스에 private 기능이 추가되면서 최신 브라우저나 NodeJS에서는 아래와 같이 private 클래스 필드를 사용할 수 있다.

 

class Example {
  #member1 = ''   // private
  #member2 = 100  // private
  #member3 = true // private
}

 

타입스크립트에서는 다른 객체 지향 언어처럼 public, private, protected 키워드로 캡슐화를 제공한다.

 

2.3. getter / setter

 

자바스크립트의 클래스에서는 다른 객체 지향 언어와 동일한 Getter / Setter 문법을 제공한다. 아래의 코드는 getter / setter의 예제이다.

 

class Example {
  member = []
  
  constructor (arr) {
    this.member = arr
  }
  
  get memberList () {
    return this.member
  }
  
  set memberList (newMember) {
    this.member = newMember
  }
}

const examObj = new Example([1, 2, 3])

console.log('멤버 확인 > ', examObj.memberList)

examObj.memberList = [10, 20, 30]

console.log('멤버 확인 2 > ', examObj.memberList)

 

위의 코드를 크롬 브라우저의 콘솔에서 실행하면 아래와 같이 출력된다.

 

 

2.4 정적 메서드

 

일반적으로 클래스의 멤버는 객체를 생성한 후 객체로 접근하는데 정적 메서드의 경우에는 객체로 생성되기 전에도 사용할 수 있다. 정적 메서드는 아래와 같이 선언한다.

 

class Sedan {
    // 생성자
    constructor({door, maker, power, price}) {
        this.door = door
        this.maker = maker
        this.power = power
        this.price = price

        console.log('세단이 생성되었습니다 !!')
    }
    
    // 정적 메서드
    static getCommonSedanInfo () {
        console.log('정적 메서드 내부에서는 this 키워드를 사용할 수 없다.')
    }
}

 

정적 메서드는 객체의 인스턴스로 호출할 수 없기 때문에 내부에서 this 키워드를 이용하여 클래스 필드나 메서드에 접근할 수 없다. 정적 메서드는 생성자 함수의 프로토타입 프로퍼티에 등록된 함수이기 때문에 인스턴스화된 객체에서는 호출할 수 없다.

 

---

 

이번 글에서는 ES6의 클래스 문법에 대해 알아보았다. 다음 글에서는 타입스크립트의 클래스 문법에 대해 알아보도록 하겠다. 오늘은 여기까지~