객체 지향 프로그래밍(OOP)은 코드를 구성하고 구성하는 방식에 혁명을 가져온 강력한 패러다임입니다.

JavaScript는 프로토타입 기반 언어로 시작되었지만 특히 ES6 및 후속 업데이트의 도입을 통해 OOP 원칙을 수용하도록 발전했습니다.

이 게시물에서는 JavaScript의 OOP 핵심 개념을 자세히 살펴보고 이를 구현하여 더욱 강력하고 유지 관리 및 확장 가능한 애플리케이션을 만들 수 있는 방법을 탐구합니다.

OOP의 4가지 원칙인 상속, 추상화, 캡슐화 및 다형성을 살펴보고 각 원칙이 JavaScript에 어떻게 적용될 수 있는지 보여줍니다. 그 과정에서 실제 사례를 검토하고 각 개념의 장단점에 대해 논의하겠습니다.

당신이 JavaScript로 OOP 기술을 개선하려는 노련한 개발자이든, 이러한 기본 개념을 이해하고자 하는 신규 개발자이든, 이 가이드는 JavaScript 프로젝트에서 OOP의 힘을 활용하는 데 대한 귀중한 통찰력을 제공할 것입니다.

1. 계승:

상속을 통해 클래스는 다른 클래스의 속성과 메서드를 상속받을 수 있습니다. 코드 재사용성을 촉진하고 상위 클래스와 하위 클래스 간의 관계를 설정합니다.

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getInfo() {
    return `${this.make} ${this.model}`;
  }

  start() {
    return "The vehicle is starting...";
  }
}

class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }

  getCarInfo() {
    return `${this.getInfo()} with ${this.doors} doors`;
  }
}

const myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getCarInfo()); // Output: Toyota Corolla with 4 doors
console.log(myCar.start()); // Output: The vehicle is starting...

이 예에서 Car는 Vehicle에서 상속되어 해당 속성과 메서드에 액세스할 수 있습니다.

장점:

• 코드 재사용성: 하위 클래스는 상위 클래스의 속성과 메서드를 상속합니다.

• 개체 사이에 명확한 계층 구조를 설정합니다.

• 메서드 재정의 및 확장을 허용합니다.

단점:

• 상위 클래스와 하위 클래스 간의 긴밀한 결합으로 이어질 수 있습니다.

• 깊은 상속 계층 구조는 복잡해지고 유지 관리가 어려울 수 있습니다.

2. 추출

추상화에는 복잡한 구현 세부 정보를 숨기고 객체의 필요한 기능만 표시하는 작업이 포함됩니다. JavaScript에서는 추상 클래스(기본적으로 지원되지는 않지만)와 인터페이스를 사용하여 추상화를 달성할 수 있습니다.

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new TypeError("Cannot instantiate abstract class");
    }
  }

  calculateArea() {
    throw new Error("Method 'calculateArea()' must be implemented.");
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  calculateArea() {
    return Math.PI * this.radius ** 2;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

// const shape = new Shape(); // Throws TypeError
const circle = new Circle(5);
const rectangle = new Rectangle(4, 6);

console.log(circle.calculateArea()); // Output: 78.53981633974483
console.log(rectangle.calculateArea()); // Output: 24

이 예에서 Shape는 직접 인스턴스화할 수 없는 추상 클래스 역할을 합니다. 모든 하위 클래스가 구현해야 하는 공통 인터페이스 계산 영역을 정의합니다. 이 추상화를 통해 우리는 특정 구현에 대해 걱정하지 않고 공통 인터페이스를 통해 다양한 모양으로 작업할 수 있습니다.

장점:

• 불필요한 세부 정보를 숨겨 복잡한 시스템을 단순화합니다.

• 코드 유지 관리성을 향상하고 중복을 줄입니다.

• 객체의 기능보다는 객체의 기능에 집중할 수 있습니다.

단점:

• 신중하게 설계하지 않으면 지나치게 단순화될 수 있습니다.

• 어떤 경우에는 성능 오버헤드가 발생할 수 있습니다.

3. 캡슐화

캡슐화는 단일 단위(객체) 내에서 데이터와 해당 데이터에 대해 작동하는 메서드를 묶는 것입니다. JavaScript에서는 클로저와 기호를 사용하여 개인 속성과 메서드를 만들 수 있습니다.

class BankAccount {
  #balance = 0;  // Private field

  constructor(owner) {
    this.owner = owner;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance  = amount;
      return true;
    }
    return false;
  }

  withdraw(amount) {
    if (amount > 0 && this.#balance >= amount) {
      this.#balance -= amount;
      return true;
    }
    return false;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount('John Doe');
account.deposit(1000);
console.log(account.getBalance()); // Output: 1000
console.log(account.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

이 예에서 #balance는 클래스 외부에서 직접 액세스할 수 없는 비공개 필드입니다.

장점:

• 데이터 보호: 내부 데이터에 대한 무단 접근을 방지합니다.

• 모듈성: 관련 기능을 함께 묶습니다.

• 간편한 유지 관리: 내부 구현 변경 사항이 외부 코드에 영향을 주지 않습니다.

단점:

• 실제 비공개 멤버가 부족하여 JavaScript로 구현하기가 복잡할 수 있습니다.

• getter 및 setter를 생성할 때 코드가 길어질 수 있습니다.

4. 다형성

다형성을 통해 서로 다른 클래스의 객체를 공통 슈퍼클래스의 객체로 처리할 수 있습니다. JavaScript에서는 메서드 재정의를 통해 이를 달성할 수 있습니다.

class Animal {
  speak() {
    return "The animal makes a sound";
  }
}

class Dog extends Animal {
  speak() {
    return "The dog barks";
  }
}

class Cat extends Animal {
  speak() {
    return "The cat meows";
  }
}

const animals = [new Animal(), new Dog(), new Cat()];

animals.forEach(animal => {
  console.log(animal.speak());
});

// Output:
// The animal makes a sound
// The dog barks
// The cat meows

이 예에서 각 클래스는 말하기 메서드를 다르게 구현하여 다형성을 보여줍니다.

장점:

• 유연성: 다양한 유형의 객체를 균일하게 처리할 수 있습니다.

• 확장성: 기존 코드를 변경하지 않고도 새 클래스를 추가할 수 있습니다.

• 다양한 유형에 단일 인터페이스를 사용할 수 있도록 하여 코드를 단순화합니다.

단점:

• 코드를 과도하게 사용하면 디버깅이 더 어려워질 수 있습니다.

• 일부 언어에서는 성능 오버헤드가 발생할 수 있습니다(JavaScript에서는 덜 그렇습니다).

자바스크립트의 객체 지향 프로그래밍은 구조화되고 유지 관리 가능하며 확장 가능한 코드를 생성하기 위한 강력한 툴킷을 제공합니다. OOP의 4가지 핵심 요소인 상속, 추상화, 캡슐화 및 다형성은 각각 고유한 장점을 제공하여 개발자가 복잡한 시스템을 모델링하고, 데이터 무결성을 보호하고, 코드 재사용을 촉진하고, 유연하고 확장 가능한 애플리케이션을 만들 수 있도록 해줍니다.

JavaScript에서 이러한 원칙을 구현하려면 언어의 고유한 특성으로 인해 창의적인 접근 방식이 필요할 수 있지만 이점은 분명합니다. OOP를 사용하면 코드베이스가 더욱 체계화되고 팀 구성원 간의 협업이 쉬워지며 변화하는 요구 사항에 대한 적응력이 높아질 수 있습니다.

그러나 OOP는 모든 경우에 적용되는 단일 솔루션이 아니라는 점을 기억하는 것이 중요합니다. 각 프로젝트에는 이러한 원칙의 서로 다른 균형이 필요할 수 있으며 경우에 따라 다른 패러다임이 더 적합할 수도 있습니다. 핵심은 이러한 개념을 철저하게 이해하고 신중하게 적용하면서 항상 프로젝트와 팀의 구체적인 요구 사항을 염두에 두는 것입니다.

행복한 코딩 ?