Class

class는 객체를 만드는 공장이다. ECMAScript 2015 (ES6)에서 추가되었다.
객체를 만들 때, 프로퍼티와 메서드를 미리 틀로 만들어 두고 값만 찍어낼 수 있다.

Constructor (생성자 함수)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다. 'constructor'라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다.

class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• class는 항상 대문자로 시작하고, CamelCase로 작성해야 한다.
• 새로운 instance를 생성할 때마다 constructor() 메서드가 호출된다.
• constructor() 메서드는 name, price 2개의 argument(인자)를 받는다.
• constructor() 메서드에 this 키워드를 사용했다. class의 실행범위(context)에서 this는 해당 instance를 의미한다.
• constructor() 에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했다.
• 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.
• 멤버 변수는 this 키워드로 접근한다.

Methods(메서드)

메서드이름() {…}

객체가 프로퍼티 값으로 갖고 있는 함수가 메서드이다.
class 안에서 프로토타입 메서드는 단축 구문으로 정의한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }
  // 메서드 정의
  applyDiscount(discount) {  
    return this.price * discount;   
  }
  // 메서드 정의
  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

class는 함수의 한 종류이다.
class Car {} 문법 구조가 진짜 하는 일은 다음과 같다.

1. Car라는 이름을 가진 함수를 만든다. 함수 본문은 생성자 메서드 constructor에서 가져온다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어진다.
2. applyDiscount같은 클래스 내에서 정의한 메서드를 User.prototype에 저장한다.

Instance(인스턴스)

class를 통해 생성된 객체를 인스턴스라고 부른다.
인스턴스는 class의 key와 method를 갖는 객체이다.
constructor(파라미터)에서 파라미터를 value에 넣으면 각 인스턴스마다 모두 다른 property value를 갖게 된다.

아래와 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.

const morning = new Car('Morning', 2000000);

• 새로운 인스턴스는 class 이름에 new를 붙여서 생성한다.
• new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 return한다.
• new 클래스이름 () 괄호 내부에는 constructor() 에서 필요한 정보를 인자로 넘겨준다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
    this.salesAmount = 0;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const morning = new Car('Morning', 2000000);

console.log(morning);
/*
Car {
  name: 'Morning',
  price: 2000000,
  department: '선릉지점',
  salesAmount: 0
}
*/
console.log(morning.name); // Morning
console.log(morning.price); // 2000000

console.log(morning.applyDiscount(0.8)); // 1600000

console.log(morning.salesAmount); // 0
morning.addSales();
console.log(morning.salesAmount); // 1

Car class의 instance를 morning이라는 변수에 저장했다. 'Morning'이라는 String과 2000000이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었다.

Instance Methods

모닝이라는 차만 특별히 20% 더 할인된 가격을 적용하고 싶다. class 자체는 건드리지 않고 모닝이라는 instance만 메서드를 변경하려면 이렇게 하면 된다.

morning.applyDiscount = function(discount) {  
    return this.price * discount * 0.8;
}

console.log(morning.applyDiscount(0.8)); // 1280000

applyDiscount 메서드를 호출할 때, instance 자체에 정의된 applyDiscount 메서드가 있다면 불러오고, 없다면 class에서 정의된 applyDiscount 메서드를 불러온다.

Hoisting

함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 것이다. 클래스를 사용하기 위해서는 클래스를 먼저 선언해야 한다. 다음 코드는 ReferenceError가 발생한다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

참고: https://ko.javascript.info/class 모던 JavaScript 튜토리얼