메서드와 상속의 모든 것! JavaScript로 객체 지향 프로그래밍 배우기 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 JavaScript의 메서드와 상속에 대해 알아보겠습니다. 이 개념은 조금 어려울 수 있지만, 일상생활에 비유하며 쉽고 재미있게 풀어보겠습니다! 준비되셨나요? 😊

---

📌 메서드란 무엇일까요?

먼저, 메서드(method)는 객체에 속한 함수라고 생각하면 됩니다. 예를 들어, 여러분이 마트에서 사용하는 바코드 스캐너를 떠올려보세요. 바코드 스캐너는 물건의 가격을 읽는 기능(메서드)을 가지고 있죠. JavaScript에서 메서드도 마찬가지로 객체에 종속된 기능을 수행합니다.

메서드의 간단한 예제

const calculator = {
  add: function (a, b) {
    return a + b;
  },
  subtract: function (a, b) {
    return a - b;
  },
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2

이처럼 calculator라는 객체 안에 add와 subtract라는 메서드가 포함되어 있습니다. 마치 계산기가 더하기, 빼기 기능을 갖고 있는 것과 비슷하죠!

---

📌 상속이란?

상속(inheritance)은 객체나 클래스가 다른 객체나 클래스의 특징과 동작(메서드)을 물려받는 것을 의미합니다. 마치 부모님으로부터 유전자를 물려받아 외모나 성격이 비슷해지는 것과 같아요! 😊

상속의 필요성

상속을 활용하면 코드 재사용성을 높일 수 있습니다. 예를 들어, 여러 종류의 동물을 다룬다고 생각해볼까요? 모든 동물이 "걷기"라는 공통 기능을 갖고 있다면, 이를 부모 클래스에서 정의하고 자식 클래스가 물려받도록 하면 중복 코드를 줄일 수 있습니다.

---

📌 프로토타입 기반 상속

JavaScript에서는 프로토타입(prototype)을 사용해 상속을 구현합니다. 프로토타입이란 객체가 다른 객체의 속성과 메서드를 상속받을 수 있도록 하는 기본적인 메커니즘입니다.

예제: 프로토타입을 사용한 상속

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  console.log(`${this.name}이(가) 소리를 냅니다.`);
};

const dog = new Animal('강아지');
dog.speak(); // 강아지이(가) 소리를 냅니다.

Animal 객체의 speak 메서드는 프로토타입을 통해 상속되므로, dog 객체에서도 사용할 수 있습니다.

---

📌 ES6 클래스 상속

ES6에서는 class 문법을 도입하여 상속을 더 직관적으로 표현할 수 있습니다.

클래스 상속의 예제

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

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name}이(가) 멍멍 짖습니다!`);
  }
}

const dog = new Dog('강아지');
dog.speak(); // 강아지이(가) 멍멍 짖습니다!

Dog 클래스는 Animal 클래스를 상속받아 speak 메서드를 오버라이드(재정의)했습니다. 이를 통해 기본 동작을 커스터마이징할 수 있죠.

---

📌 일상생활에 비유한 상속과 메서드

생각해보세요!

• Animal 클래스는 "모든 동물이 소리를 낸다"는 공통 특성을 정의합니다.
• Dog 클래스는 이를 물려받아 강아지의 고유한 "멍멍 소리"를 구현합니다.

이 과정은 마치 부모님이 아이에게 기본적인 생활 습관을 물려주고, 아이가 자라면서 자신만의 개성을 추가하는 것과 같습니다! 😊

---

📌 실전 예제: 사용자 관리 시스템

여러 사용자 유형(일반 사용자, 관리자 등)을 다룰 수 있는 시스템을 만들어보겠습니다.

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

  login() {
    console.log(`${this.name}님이 로그인했습니다.`);
  }
}

class Admin extends User {
  deleteUser(user) {
    console.log(`${user.name}님을 삭제했습니다.`);
  }
}

const user1 = new User('홍길동');
const admin = new Admin('관리자');

user1.login(); // 홍길동님이 로그인했습니다.
admin.login(); // 관리자님이 로그인했습니다.
admin.deleteUser(user1); // 홍길동님을 삭제했습니다.

User 클래스는 모든 사용자에 공통된 기능인 login 메서드를 정의합니다. Admin 클래스는 이를 상속받아 추가적으로 deleteUser 메서드를 구현했죠.

---

😊 마무리하며..

오늘은 JavaScript의 메서드와 상속을 알아봤습니다. 일상 속 비유를 통해 개념이 조금 더 쉬워졌길 바라요! 프로토타입과 클래스 상속은 조금 헷갈릴 수 있지만, 직접 실습해보면 금방 익숙해질 거예요. 😊

응원 메시지로 마무리하겠습니다.

"처음엔 어렵게 느껴질 수 있지만, 계속 해보면 반드시 이해할 수 있어요! 여러분은 이미 잘하고 있습니다!" 😊