본문 바로가기
JavaScript 문법 시리즈

[JavaScript 문법] 19일차: 객체 지향 프로그래밍 심화

by cogito21_js 2024. 8. 19.
반응형

클래스란?

클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 속성과 메서드를 정의하며, 이를 통해 객체를 생성하고 조작할 수 있습니다. JavaScript에서는 ES6부터 class 키워드를 사용하여 클래스를 정의할 수 있습니다.

 

예제

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

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

let person1 = new Person('Alice', 25);
person1.greet(); // 'Hello, my name is Alice and I am 25 years old.'

객체 생성

클래스를 사용하여 객체를 생성할 수 있습니다. new 키워드를 사용하여 클래스의 인스턴스를 생성합니다.

예제

let person2 = new Person('Bob', 30);
console.log(person2.name); // 'Bob'
console.log(person2.age); // 30

상속

상속은 한 클래스가 다른 클래스를 기반으로 새로운 클래스를 정의하는 기능입니다. 이를 통해 코드의 재사용성을 높이고, 중복 코드를 줄일 수 있습니다. 상속을 구현하려면 extends 키워드를 사용합니다.

예제

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

  makeSound() {
    console.log(`${this.type} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super('Dog');
    this.name = name;
  }

  bark() {
    console.log(`${this.name} says Woof! Woof!`);
  }
}

let myDog = new Dog('Buddy');
myDog.makeSound(); // 'Dog makes a sound.'
myDog.bark(); // 'Buddy says Woof! Woof!'

다형성

다형성은 여러 클래스가 동일한 인터페이스를 공유하면서 각자 고유한 동작을 구현할 수 있게 하는 기능입니다. 이는 동일한 메서드가 다양한 객체에서 다르게 동작할 수 있게 합니다.

예제

class Animal {
  makeSound() {
    console.log('Some generic animal sound');
  }
}

class Dog extends Animal {
  makeSound() {
    console.log('Woof! Woof!');
  }
}

class Cat extends Animal {
  makeSound() {
    console.log('Meow! Meow!');
  }
}

let animals = [new Animal(), new Dog(), new Cat()];
animals.forEach(animal => animal.makeSound());
// 출력:
// Some generic animal sound
// Woof! Woof!
// Meow! Meow!

클래스 상속 심화

상속을 통해 부모 클래스의 메서드를 재정의(오버라이딩)할 수 있습니다. 이를 통해 자식 클래스는 부모 클래스의 기본 동작을 확장하거나 수정할 수 있습니다.

예제

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

  start() {
    console.log(`Starting the ${this.make} ${this.model}`);
  }
}

class Car extends Vehicle {
  start() {
    super.start();
    console.log('Car started');
  }
}

let myCar = new Car('Toyota', 'Corolla');
myCar.start();
// 출력:
// Starting the Toyota Corolla
// Car started

정적 메서드와 정적 속성

정적 메서드와 정적 속성은 특정 클래스의 인스턴스가 아닌 클래스 자체에 속합니다. static 키워드를 사용하여 정의할 수 있습니다.

예제

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

  static get PI() {
    return 3.14159;
  }
}

console.log(MathUtil.add(2, 3)); // 5
console.log(MathUtil.PI); // 3.14159

추상화 심화

추상화는 클래스에서 필요하지 않은 세부 사항을 숨기고, 필수적인 기능만을 노출하는 것을 의미합니다. JavaScript에서는 인터페이스나 추상 클래스를 명시적으로 지원하지 않지만, 구현을 통해 비슷한 효과를 낼 수 있습니다.

예제

class Shape {
  constructor(type) {
    this.type = type;
  }

  getArea() {
    throw new Error('getArea() must be implemented');
  }
}

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

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

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

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

let shapes = [new Circle(5), new Rectangle(4, 6)];
shapes.forEach(shape => {
  console.log(`${shape.type} area: ${shape.getArea()}`);
});
// 출력:
// Circle area: 78.53981633974483
// Rectangle area: 24

객체 지향 프로그래밍의 심화 개념

  1. 오버라이딩: 자식 클래스가 부모 클래스의 메서드를 재정의하는 것.
  2. 인터페이스: 클래스가 특정 메서드를 구현하도록 강제하는 것 (JavaScript에는 명시적 인터페이스가 없지만, 추상 클래스를 통해 비슷한 개념을 구현할 수 있음).
  3. 정적 메서드와 속성: 클래스 자체에 속하는 메서드와 속성.

결론

객체 지향 프로그래밍 심화에서는 클래스, 객체 생성, 상속, 다형성, 오버라이딩, 정적 메서드와 속성, 추상화 등에 대해 배웠습니다. 이러한 개념을 이해하고 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. 다음 글에서는 디자인 패턴에 대해 알아보겠습니다.

다음 글에서 만나요!

 

반응형