<aside> 💡 javascript의 클래스 문법은 ES6에서 도입되었다.

</aside>

1. 클래스와 인스턴스의 일반적인 개념

• 클래스(Class)
  • 객체를 만들기 위한설계도
• 인스턴스(Instance)
  • 설계도를 토대로 만들어진 실제 객체.

2. Class란?

• 객체를 생성하기 위한 일종의 템플릿이라고 생각할 수 있다.
• Class를 생성하기 위해서는 class 키워드를 사용한다.

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

	// 다양한 메소드를 아래와 같이 정의할 수 있어요.
	// 여기서 this.name으로 내부 값을 접근해야 함을 잊지 마세요! :)
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

// 만든 객체를 토대로 메서드 호출해보기
person1.sayHello(); // 출력: "Hello, my name is Alice and I am 30 years old."
person2.sayHello(); // 출력: "Hello, my name is Bob and I am 25 years old."

Person Class는 name과 age 속성을 가지고 있으며, sayHello 메소드를 정의한다. new키워드를 사용하여 Person Class의 인스턴스를 생성하고, sayHello 메서드를 호출한다.

3. Constructor란?

• Class의 생성자 함수이다
• 생성자 함수는 객체를 생성할 때 호출된다.
• 객체를 초기화하는 역할을 한다.
• constructor 키워드를 사용하여 정의한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person = new Person('Alice', 20);

constructor 메서드는 name과 age를 인자로 받아 this.name과 this.age 속성을 초기화한다.

4. Getter와 Setter

• Class에서는 getter와 setter로 Class의 속성에 접근할 수 있다.
• getter : 속성 값을 반환하는 메서드
• setter : 속성 값을 설정하는 메서드
• 이를 통해 생성한 인스턴스를 정해진 규격안에서 자유롭게 변경할 수 있다.

// Getters와 Setters
// 객체지향 프로그래밍 언어 -> G, S
// 클래스 --> 객체(인스턴스)
// 프로퍼티(constructor)
// new Class(a, b, c)
class Rectangle {
  constructor(height, width) {
    // underscore : private(은밀하고, 감춰야 할 때)
    this._height = height;
    this._width = width;
  }

  // width를 위한 getter
  get width() {
    return this._width;
  }

  // width를 위한 setter
  set width(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 가로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._width = value;
  }

  // height를 위한 getter
  get height() {
    return this._height;
  }

  // height를 위한 setter
  set height(value) {
    // 검증 1 : value가 음수이면 오류!
    if (value <= 0) {
      //
      console.log("[오류] 세로길이는 0보다 커야 합니다!");
      return;
    } else if (typeof value !== "number") {
      console.log("[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다!");
      return;
    }
    this._height = value;
  }

  // getArea : 가로 * 세로 => 넓이
  getArea() {
    const a = this._width * this._height;
    console.log(`넓이는 => ${a}입니다.`);
  }
}

// instance 생성
const rect1 = new Rectangle(10, 7);
rect1.getArea();
// const rect2 = new Rectangle(10, 30);
// const rect3 = new Rectangle(15, 20);

5. 상속 (Inheritance)

• Class는 상속을 통해 다른 Class의 기능을 물려받을 수 있다.
• 상속을 받는 Class를 subclass, derived class 라고 한다.
• 상속을 하는 Class를 superclass 또는 base class 라고 한다.

<예시>

Dog Class는 Animal Class를 상속받고, Dog Class에서 speak 메서드를 오버라이딩하여 Animal Class의 speak메서드를 덮어쓴다.

// 동물 전체에 대한 클래스에요
class Animal {

	// 이름을 필수로 받아야 해요
  constructor(name) {
    this.name = name;
  }

	// 동물의 행동을 정의하는 메소드
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 동물 클래스를 상속받는 Dog 클래스를 만들어요
class Dog extends Animal {
	// 상속받을 때, speak()를 입맛에 맞게 재정의해요.
  speak() {
    console.log(`${this.name} barks.`);
  }
}

// Dog를 만들 때는 Animal의 상속을 받은 class이기 때문에 이름을 필수로
// 받아야 해요!
let d = new Dog('Mitzie');

// speak는 'makes a noise'가 아니라, 'barks'가 출력되네요.
d.speak(); // "Mitzie barks."

6. Static Method

• Class에서는 static키워드를 사용해서 Class 레밸의 메소드를 정의할 수 있다.
• Class 레밸의 메소드는 인스턴스에서 호출할 수 없으며, Class 이름으로 직접 호출할 수 있다.
• 인스턴스를 만들지 않고 사용할 수 있기 때문에 유틸리티 함수, 정적 속성인 경우 인스턴스 간 복제할 필요가 없는 데이터를 만들 때 사용되곤 한다.

<aside> 💡 즉, 인스턴스를 만들 필요가 없을 때 사용한다.

</aside>

class Calculator {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(Calculator.add(1, 2)); // 3
console.log(Calculator.subtract(3, 2)); // 1