자바스크립트 - 다형성

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 자바스크립트의 다형성 세계로 흥미로운 여정을 떠납니다. 그 단어가 무서워 보일 수 있지만, 이 강의가 끝나면 당신은 다형성을 마스터처럼 다룰 수 있을 것입니다!

자바스크립트에서의 다형성

기본적인 내용부터 시작해보겠습니다. 다형성은 그리스어에서 왔는 단어로, "여러 형태"를 의미합니다. 프로그래밍에서는 객체가 여러 형태나 행동을 취할 수 있는 능력을 의미합니다. 청어를 색을 변화시켜 다른 환경에 적응하는 것을 생각해보세요.

자바스크립트에서 다형성은 단일 인터페이스를 사용하여 다양한 유형의 객체를 표현할 수 있게 해줍니다. 여러 기기(TV, DVD 플레이어, 오디오 시스템)를 동일한 버튼으로 조작할 수 있는 대용량 리모컨과 같은 개념입니다.

다음은 이 개념을 설명하는 간단한 예제입니다:

function makeSound(animal) {
console.log(animal.sound());
}

let dog = {
sound: function() {
return "Woof!";
}
};

let cat = {
sound: function() {
return "Meow!";
}
};

makeSound(dog); // 출력: Woof!
makeSound(cat); // 출력: Meow!

이 예제에서 우리는 makeSound 함수가 다양한 동물 객체와 함께 작동할 수 있다고 했습니다. dog과 cat은 모두 sound 메서드를 가지고 있지만, 다른 출력을 생성합니다. 이것이 다형성의 실제 행동입니다!

메서드 오버라이딩

다형성의 중요한 측면 중 하나는 메서드 오버라이딩입니다. 이는 자식 클래스가 부모 클래스에서 이미 정의된 메서드에 대해 특정 구현을 제공할 때 발생합니다.

다음 예제를 보겠습니다:

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

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

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

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

console.log(animal.makeSound()); // 출력: The animal makes a sound
console.log(dog.makeSound());    // 출력: The dog barks
console.log(cat.makeSound());    // 출력: The cat meows

여기서 우리는 Animal 클래스와 makeSound 메서드를 가지고 있습니다. Dog과 Cat 클래스는 Animal을 확장하고 makeSound 메서드를 자신의 구현으로 오버라이드합니다. 이를 통해 각 동물은 자신만의 독특한 소리를 가지면서도 Animal 가족의 일부로 남아 있습니다.

예제

다형성에 대한 이해를 더욱 확고히 하기 위해 더 많은 예제를 살펴보겠습니다.

예제 1: 도형 계산기

우리는 다양한 도형의 면적을 동일한 메서드 이름을 사용하여 계산하고 싶습니다.

class Shape {
calculateArea() {
return 0;
}
}

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

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

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

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

function printArea(shape) {
console.log("The area is: " + shape.calculateArea());
}

let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);

printArea(circle);    // 출력: The area is: 78.53981633974483
printArea(rectangle); // 출력: The area is: 24

이 예제에서 우리는 기본 Shape 클래스와 두 가지 파생 클래스 Circle과 Rectangle을 가지고 있습니다. 각 클래스는 자신의 calculateArea 메서드를 구현합니다. printArea 함수는 모든 도형 객체와 함께 작동하여 다형성을 보여줍니다.

예제 2: 직원 급여 시스템

간단한 직원 급여 시스템을 만들어 다형성을 더 잘 설명해보겠습니다:

class Employee {
constructor(name, salary) {
this.name = name;
this.salary = salary;
}

calculateBonus() {
return this.salary * 0.1;
}
}

class Manager extends Employee {
calculateBonus() {
return this.salary * 0.2;
}
}

class Developer extends Employee {
calculateBonus() {
return this.salary * 0.15;
}
}

function printBonus(employee) {
console.log(`${employee.name}'s bonus is: $${employee.calculateBonus()}`);
}

let john = new Employee("John", 50000);
let jane = new Manager("Jane", 70000);
let bob = new Developer("Bob", 60000);

printBonus(john); // 출력: John's bonus is: $5000
printBonus(jane); // 출력: Jane's bonus is: $14000
printBonus(bob);  // 출력: Bob's bonus is: $9000

이 예제에서 우리는 다양한 유형의 직원이 다양한 보너스 계산 규칙을 가지고 있습니다. printBonus 함수는 모든 직원 객체와 함께 작동하여 다형성을 보여줍니다.

자바스크립트에서 다형성 사용의 이점

이제 다형성의 작동 방식을 보았으므로, 왜 이 것이 훌륭한지 이야기해보겠습니다:

1. 코드 재사용성: 다형성은 더 일반적이고 재사용 가능한 코드를 작성할 수 있게 해줍니다. printArea와 printBonus 함수는 각각의 도형이나 직원 객체와 함께 작동할 수 있습니다.

2. 유연성: 새로운 객체 유형을 추가할 때 기존 코드를 변경할 필요가 없습니다. 우리는 Triangle 클래스를 도형 계산기에 추가할 수 있지만 printArea 함수를 수정할 필요는 없습니다.

3. 유지보수성: 다형성은 더 깨끗하고 정리된 코드를 제공하여 유지보수와 확장이 더 쉬워집니다.

4. 추상화: 다형성은 더 높은 수준의 추상화를 가능하게 해줍니다. 객체가 무엇을 하는지에 집중할 수 있도록 합니다.

다음은 우리가 예제에서 사용한 주요 메서드를 요약한 표입니다:

메서드	설명
calculateArea()	도형의 면적을 계산합니다
calculateBonus()	직원의 보너스를 계산합니다
makeSound()	동물이 내는 소리를 반환합니다
sound()	동물이 내는 소리를 반환합니다 (객체 리터럴 예제)

젊은 패들러들, 다형성은 당신의 코딩 도구箱에 있는 스위스 아미리 knife와 같습니다. 다양하고 강력하며, 코드를 더욱 우아하고 효율적으로 만들 수 있습니다. 계속 연습하면 자바스크립트 마스터로서의 다형성을 손에 넣을 수 있을 것입니다!

Credits: Image by storyset