TIL.23 Class

출저

• MDN
• 위코드 강의자료

Class

• 객체지향 프로그래밍의 핵심인 클래스는, 객체를 기반으로 하고 있는 자바스크립트에서도 찾아볼 수 있다.
• 객체로 만들기엔 큰 규모의 객체이거나 비슷한 모양의 객체를 계속 만들어야 한다면 Class를 통해 설계도를 만들어 사용할 수 있다.
• 클래스 이름의 첫 글자는 대문자로 써준다.

1. 생성자 (Constructor)

• 객체와 가장 큰 차이는 constructor 라는 생성자 함수이다.
• 새로운 인스턴스를 생성할 때마다 constructor()메서드를 호출한다.

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

• "constructor" 라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있다.
• constructor()메서드에 this 키워드를 사용하는데 이는, class의 실행범위(context)에서 this는 해당 instance를 의미한다.
• constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했다.
• 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 멤버 변수라고 부른다.
• 멤버 변수는 'this' 키워드로 접근합니다.
• 이렇게 저장된 this키워드는 new를 통해 객체를 만들때 그 객체에 적용된다.

2. 인스턴스 (Instance)

• 클래스를 통해 생성된 객체를 인스턴스 라고 부른다.
• 인스턴스는 Class 이름에 new를 붙여서 생성한다.
• 클래스 오른쪽에는 ()괄호와 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
• new 키워드는 constructor() 메서드를 호출하고 instance를 return 해준다.

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

3. 메서드 (Methods)

• 메서드는 함수와 같은 개념인데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드 라고 부른다.
• 객체의 문법과 비슷하나 클래스안에 여러 메서드를 써줄때 ,콤마 를 찍지 않아도 된다.
• 아래 changeDepartment(departmentName) 을 메서드라 한다.

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

문제풀이

• MyMath라는 class를 생성해주세요.
• constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
• 총 4개의 메서드를 구현해주세요.
  • getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
  • add: 두 개의 숫자를 더하는 메서드
  • substract: 두 개의 숫자를 빼는 메서드
  • multiply: 두 개의 숫자를 곱하는 메서드

class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
    }
    getNumber() {
      return [this.num1, this.num2]
    }
    add() {
      return this.num1 + this.num2
    }
    substract() {
      return this.num1 - this.num2
    }
    multiply() {
      return this.num1 * this.num2
    }
}