ECM Script 2015, es 6부터는 자바스크립트에서도 클래스를 사용할 수 있게되었습니다. es 6에서 어떻게 클래스를 선언하고 사용하는지 자세히 알아봅니다.

ES 6 이 후부터는 자바스크립트에서도 클래스를 사용하여 선언할 수 있습니다. 즉 생성자를 만들고 인스턴스를 생성할 수 있게 되어 기존의 prototype을 사용하는 방법이 아는 방법으로 생성자 함수를 만들 수 있습니다. 클래스를 사용하면 클래스를 확장하는 것도 가능합니다. 그렇다면 클래스는 무엇일까요?


! 클래스(class)란?객체지향언어에서 객체에 해당하는 것이 바로 클래스라고 할 수 있습니다. 기존의 자바스크립트는 프로토타입 방식으로 여러개의 인스턴스를 만들 수 있었습니다. 하지만 ES 6 이 후 클래스를 사용하는 방법이 가능해졌습니다. 클래스는 비슷한 성격의 인스턴스를 여러개 만들 수 있도록 해주는 가장 쉬운 프로그래밍 기법입니다.

그렇다면 ES 6에서는 어떻게 클래스를 생성하는지 자세히 알아봅니다.



# ES 6 클래스의 생성, 선언하기, class클래스를 선언하기 위해서는 class {}하는 예약어를 사용합니다. 이때 내부에는 constructor()를 사용합니다. 그럼 간단하게 Site라는 이름의 클래스를 만들어봅니다.
class Site {
  constructor(siteName, siteUrl) {
    this.sitenName = siteName;
    this.siteUrl = siteUrl;
  }
}

여기서 Site 클래스를 만들었습니다. 내부에는 siteName, siteUrl이라는 프로퍼티를 두 개를 가지고 있습니다.


! 인스턴스의 생성
다음으로 webisfree라는 새로운 인스턴스를 생성해보록 하겠습니다. 스크립트는 아래와 같습니다.
webisfree = new Site('webisfree', 'https://webisfree.com');

새롭게 만든 webisfree의 프로퍼티를 확인해보겠습니다.
console.log(webisfree.siteName)
console.log(webisfree.siteUrl)


'webisfree'
'https://webisfree.com'


! 클래스에 메소드 추가하기클래스에도 메소드를 추가할 수 있습니다. 아래는 프로퍼티 값 siteName을 보여주는 메소드 getSiteName()을 만들어보겠습니다.
class Site {
  constructor(siteName, siteUrl) {
    this.siteName = siteName;
    this.siteUrl = siteUrl;

    // getSiteName 메소드 추가
    this.getSiteName = function() {
      return this.siteName;
    }
  }
}

이제 getSitename() 메소드가 만들어졌습니다. 잘 동작하는지 아래에서 확인해보겠습니다.
console.log(webisfree.getSiteName())

'webisfree'

잘 동작하는 것을 확인하였습니다.


! 참고사항
생성된 클래스를 사용하면 extends라는 키워드를 사용하여 새로운 클래스로 확장할 수 있습니다. 이 경우 부모 클래스에 접근하기 위해 super()를 사용합니다. 클래스의 확장에 대한 부분은 다른 글에서 자세히 알아보겠습니다.