Class

클래스는 기본적으로 이렇게 생겼다.

class Member {
  getName() {
    return '이름'
  }
}

let obj = new Member()
console.log(obj.getName())

특징

1. strict 모드에서 실행

딱히 'use strict';를 선언하지 않아도, 클래스의 코드는 기본적으로 strict모드에서 실행된다. 그렇게 되면, 당연히 strict모드의 여러가지 특징을 자동으로 따르게 된다.

2. 클래스 내 메서드 작성

class Member {
  setName(name) {
    this.name = name
  }

  getName(name) {
    this.name = name
  }
}

보이는 것처럼, function키워드와 :가 없이 메서드 이름만 사용한다. 그리고 메서드 사이에 ;가 불필요하다. 다만 function 을 선언하면 글로벌 오브젝트에 설정되는 것과 다르게, class는 그렇지 않다. 그리고 class의 object property는 for()문 등으로 열거할 수 없다.

3. 프로퍼티에 연결

class Member {
  setName(name) {
    this.name = name
  }
}

위 코드와

Member.prototype.setName = function (namn) {
  this.name = name
}

위 코드는 같다.

Constructor

constructor는 클래스 인스턴스를 생성하고, 생성한 인스턴스를 초기화하는 역할을 한다. new Member()를 실행하면, Member.prototype.constructor가 먼저 호출된다. 클래스에 이를 작성하지 않으면, prototype의 디폴트 constructor가 호출된다. 그리고 이 constructor가 없으면 인스턴스를 생성할 수 없다. 기존 es5문법에서는 자바스크립트 엔진이 디폴트 constructor를 호출해서 이를 활용할 수 없었지만, es6에서 부터는 개발자가 이를 정의할 수 있게 되었다.

class Member {
  constructor(name) {
    this.name = name
  }

  getName() {
    return this.name
  }
}

let newMember = new Member('라이오넬 멧시')
console.log(newMember.getName())

만약 constructor에서 이상한 값을 반환하면 어떻게 될까?

constructor() {
    return 1;
}

constructor에서 number나 string을 반환하면, 이를 무시하고 생성한 인스턴스를 반환하게 된다.

그러나 object를 반환하면 어떻게 될까?

class Member {
  constructor(name) {
    return { name: '메켓트' }
  }

  getName() {
    return this.name
  }
}

let newMember = new Member('라이오넬 멧시')
console.log(newMember.name)
console.log(newMember.getName)

메켓트
undefined

name이 메켓트인 object를 반환하면서, newMember 클래스에는 name밖에 남지 않게 되었다. 그리고 getName은 존재하지 않아서 undefined가 출력된다.

getter, setter

class Member {
  set setName(name) {
    this.name = name
  }

  get getName(name) {
    return this.name
  }
}