자바스크립트 Class

클래스 (Class)

• 객체를 생성하기 위한 설계도 또는 템플릿
  객체의 속성(프로퍼티)과 동작(메서드)을 정의
  Ex. "자동차" 클래스는 자동차 객체를 만들기 위한 설계도
• 객체를 만들기 위한 일종의 룰이며, 여러 개의 객체를 생성할 수 있음
  추상적이며 구체적인 데이터가 포함되지 않음
• 객체를 생성하기 위한 규칙, 룰, 구조를 정의하며, 클래스의 인스턴스(객체)는 이러한 규칙에 따라 만들어짐

 

생성자 (Constructor)

• 생성자 메서드의 이름은 클래스의 이름과 동일
  생성자는 클래스 내에서 Constructor라고 명명
• 객체가 생성될 때 호출되며, 해당 객체의 초기 상태를 설정하는 역할
  Ex. 객체의 속성 초기화, 필요한 리소스 할당, 초기화 작업 등을 수행할 수 있음
• 생성자를 호출하면 클래스의 인스턴스(객체)가 생성되고, 이 객체는 클래스의 속성과 메서드를 상속받음
• 매개변수를 받아 객체를 초기화하는데 사용될 수 있음
  객체마다 다른 속성값을 가질 수 있음
• 생성자의 오버로딩을 지원하여 다양한 매개변수 조합에 대해 다른 생성자를 호출할 수 있음

class Car {
  constructor(brand, model) {
    this.brand = brand; // 생성자의 매개변수로 전달된 값으로 객체의 속성 초기화
    this.model = model;
  }

  start() {
    console.log(`${this.brand} ${this.model}의 엔진을 가동합니다.`);
  }
}

const car1 = new Car("Toyota", "Camry"); // 생성자 호출
const car2 = new Car("Honda", "Civic");

car1.start(); // 출력: "Toyota Camry의 엔진을 가동합니다."
car2.start(); // 출력: "Honda Civic의 엔진을 가동합니다."

 

인스턴스 (Instance)

• 클래스를 기반으로 생성된 실제 객체를 나타냄
  클래스로부터 만들어진 개별 객체
• 클래스의 속성과 메서드에 대한 구체적인 데이터를 포함하며, 각 인스턴스는 서로 다른 데이터를 가질 수 있음
  Ex. "자동차"클래서의 인스턴스는 각각 다른 브랜드, 모델, 색상 등의 데이터를 가질 수 있음
• 클래스를 기반으로 생성되지만 각각 독립적으로 동작하며 다른 인스턴스와는 독립된 데이터를 가짐

// 클래스 정의
class Car {
  constructor(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
  }

  start() {
    console.log(`${this.brand} ${this.model}의 엔진을 가동합니다.`);
  }
}

// 클래스로부터 인스턴스 생성
const car1 = new Car("Toyota", "Camry", "Blue");
const car2 = new Car("Honda", "Civic", "Red");

// 각 인스턴스의 메서드 호출
car1.start(); // 출력: "Toyota Camry의 엔진을 가동합니다."
car2.start(); // 출력: "Honda Civic의 엔진을 가동합니다."

 

게터 & 세터

• 속성에 접근할 때 추가 로직을 실행하거나 데이터의 유효성을 검사할 때 사용
• 객체의 속성을 감추거나(private 속성으로 표시) 다른 코드에 의해 무작위로 변경되는 것을 방지

 

게터 (Getter)

• 객체의 속성 값을 읽을 때 사용
  속성 값을 읽을 때 Getter를 호출하며, 속성의 이름 앞에 get 키워드를 사용하여 정의
  함수처럼 호출되지 않으며, 속성을 읽을 때 마치 속성처럼 동작

class Circle {
  constructor(radius) {
    this._radius = radius; // 밑줄(_)은 관례적으로 private 속성을 나타냅니다.
  }

  get radius() {
    return this._radius;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.radius); // Getter 호출, 출력: 5

 

세터 (Setter)

• 객체의 속성 값을 설정할 때 사용
  속성 값을 설정할 때 Setter를 호출하며, 속성 이름 앞에 set 키워드를 사용
  함수처럼 호출됨

class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(newRadius) {
    if (newRadius > 0) {
      this._radius = newRadius;
    } else {
      console.error("반지름은 0보다 커야 합니다.");
    }
  }
}

const myCircle = new Circle(5);
myCircle.radius = 10; // Setter 호출
console.log(myCircle.radius); // Getter 호출, 출력: 10

myCircle.radius = -3; // Setter 호출, 출력: "반지름은 0보다 커야 합니다."

 

상속(Inheritance)

• 상위 클래스(부모 클래스)와 하위 클래스(자식 클래스)
  클래스 간의 계층 구조를 생성
  상위 클래스는 하위 클래스의 일반적인 특징을 정의
  하위클래스는 상위클래스의 특성을 확장하고 보완
• 속성과 메소드 상속
  하위 클래스는 상위 클래스의 속성과 메서드를 상속받아 사용
  상위 클래스의 코드를 재사용할 수 있도록 함
• 메서드 오버라이딩(Override)
  하위 클래스는 상위 클래스의 메서드를 재정의할 수 있음
  이를 통해 하위 클래스는 자신만의 메서드 구현을 제공하고, 상위 클래스의 메서드를 변경하거나 보완
• 다중 상속
  하나 이상의 상위 클래스로부터 상속을 받을 수 있음
  그러나 다중 상속은 복잡성과 모호성을 유발할 수 있어서 몇몇 언어에선 지원하지 않음

// Dog 클래스는 Animal 클래스를 상속하며, speak 메서드를 오버라이딩하여 자체적인 구현 제공

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + "이(가) 소리를 냅니다.");
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 상위 클래스 생성자 호출
    this.breed = breed;
  }

  bark() {
    console.log(this.name + "이(가) 짖습니다.");
  }

  // 상위 클래스의 메서드를 오버라이드
  speak() {
    console.log(this.name + "이(가) 짖습니다.");
  }
}

const myDog = new Dog("멍멍이", "골든 리트리버");
myDog.speak(); // Dog 클래스의 speak 메서드가 호출됨
myDog.bark(); // 출력: "멍멍이이(가) 짖습니다."

 

정적 메서드(Static Method)

• 객체 인스턴스와 무관
  특정 객체 인스턴스에 속하지 않으므로, 클래스 자체에 연결됨
  정적 메서드를 호출할 때 인스턴스를 생성할 필요가 없음
• this 키워드 사용 불가
  정적 메서드 내에서 this 키워드는 클래스 자체를 가리키지 않고, 인스턴스를 가리키지 않음
  정적 메서드 내에서 클래스의 속성이나 메서드에 접근할 때 클래스의 이름을 사용해야 됨
• 유틸리티 기능 제공
  유틸리티 함수 또는 클래스 수준의 작업을 수행하는데 유용

// MathUtil 클래스는 정적 메서드 square와 cube를 정의
// 이 메서드는 클래스 자체에 속하며, 객체 인스턴스를 생성하지 않고도 호출 가능

class MathUtil {
  static square(x) {
    return x * x;
  }

  static cube(x) {
    return x * x * x;
  }
}

const squaredValue = MathUtil.square(5); // 정적 메서드 호출
console.log(squaredValue); // 출력: 25

const cubedValue = MathUtil.cube(3); // 정적 메서드 호출
console.log(cubedValue); // 출력: 27