[자바스크립트 14일 완전정복] 12일차 - 객체 지향 프로그래밍(OOP) 기초

 

 

 

자바스크립트는 객체 기반 프로그래밍 언어로, 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 개념을 활용하면 더 구조적인 코드 작성이 가능해요.
오늘은 클래스와 생성자, 프로토타입 기반 객체 지향 개념, 상속과 super 키워드, 캡슐화와 다형성에 대해 배워보겠습니다.

 

---

 

1. 객체 지향 프로그래밍(OOP)이란?

객체 지향 프로그래밍(OOP)은 데이터(속성)와 해당 데이터를 다루는 함수(메서드)를 하나의 객체로 묶어 관리하는 방식입니다.
✔ 코드의 재사용성이 높아지고 유지보수가 쉬워짐
✔ 코드가 구조적으로 정리되어 가독성이 좋아짐

OOP의 주요 개념

• 클래스(Class)와 생성자(Constructor): 객체를 생성하는 틀
• 프로토타입(Prototype): 자바스크립트의 객체 상속 메커니즘
• 상속(Inheritance): 기존 클래스를 확장하여 새로운 클래스 생성
• 캡슐화(Encapsulation): 객체 내부 상태를 보호
• 다형성(Polymorphism): 같은 인터페이스를 공유하지만, 다른 동작을 수행

 

---

 

2. 클래스(Class)와 생성자(Constructor)

2.1 클래스 선언과 사용

클래스는 객체를 생성하는 틀(템플릿) 역할을 합니다.

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

  greet() {
    console.log(`안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`);
  }
}

let user1 = new Person("이예나", 28);
let user2 = new Person("김철수", 30);

user1.greet(); // "안녕하세요, 저는 이예나이고, 28살입니다."
user2.greet(); // "안녕하세요, 저는 김철수이고, 30살입니다."

✔ constructor()는 객체가 생성될 때 실행되는 특별한 메서드
✔ this를 사용하여 속성을 정의하고, 클래스 내부 메서드에서 접근 가능

 

---

 

3. 프로토타입(Prototype) 기반 객체 지향 개념

자바스크립트는 프로토타입(prototype) 기반 객체 지향 언어예요.

3.1 프로토타입 체인

모든 자바스크립트 객체는 프로토타입 객체를 상속받음

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

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

let dog = new Animal("강아지");
dog.makeSound(); // "강아지가 소리를 냅니다."

✔ Animal.prototype.makeSound()는 모든 Animal 객체가 공유하는 메서드
✔ dog 객체는 Animal의 프로토타입을 상속받아 makeSound()를 사용할 수 있음

 

---

 

 

4. 상속(Inheritance)과 super 키워드

4.1 상속을 활용한 클래스 확장

extends 키워드를 사용하면 기존 클래스를 확장하여 새로운 클래스를 만들 수 있어요.

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

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

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

  bark() {
    console.log(`${this.name} (${this.breed})가 멍멍 짖습니다.`);
  }
}

let myDog = new Dog("바둑이", "골든 리트리버");

myDog.makeSound(); // "바둑이가 소리를 냅니다."
myDog.bark(); // "바둑이 (골든 리트리버)가 멍멍 짖습니다."

✔ extends를 사용하면 기존 클래스의 기능을 확장 가능
✔ super()를 사용하여 부모 클래스의 생성자를 호출해야 함

 

---

 

5. 캡슐화(Encapsulation) - 객체 내부 상태 보호

5.1 #을 사용한 private(비공개) 속성

자바스크립트에서는 #을 붙이면 외부에서 접근할 수 없는 비공개(private) 속성을 만들 수 있어요.

class BankAccount {
  #balance; // private 속성

  constructor(owner, balance) {
    this.owner = owner;
    this.#balance = balance;
  }

  deposit(amount) {
    this.#balance += amount;
    console.log(`${amount}원이 입금되었습니다. 현재 잔액: ${this.#balance}원`);
  }

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

let myAccount = new BankAccount("이예나", 50000);
myAccount.deposit(10000); // "10000원이 입금되었습니다. 현재 잔액: 60000원"
console.log(myAccount.getBalance()); // 60000
console.log(myAccount.#balance); // ❌ 오류 발생 (private 속성 접근 불가)

✔ 비공개 속성은 클래스 내부에서만 접근 가능하고, 외부에서 직접 수정할 수 없음

 

---

 

6. 다형성(Polymorphism) - 동일한 인터페이스, 다른 동작

6.1 메서드 오버라이딩(Method Overriding)

자식 클래스에서 부모 클래스의 메서드를 같은 이름으로 다시 정의하면 다형성이 적용됨

class Animal {
  makeSound() {
    console.log("동물이 소리를 냅니다.");
  }
}

class Cat extends Animal {
  makeSound() {
    console.log("고양이가 야옹합니다.");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("강아지가 멍멍 짖습니다.");
  }
}

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

cat.makeSound(); // "고양이가 야옹합니다."
dog.makeSound(); // "강아지가 멍멍 짖습니다."

✔ 같은 메서드(makeSound())지만, 각 클래스에 따라 다른 동작 수행

 

---

 

 

 

오늘은 객체 지향 프로그래밍(OOP)의 기초 개념을 배웠어요.
✅ 클래스(Class)와 생성자(Constructor)를 사용해 객체를 생성할 수 있음
✅ 프로토타입(Prototype)을 활용해 메서드를 공유할 수 있음
✅ extends와 super()를 사용하여 상속(Inheritance) 구현 가능
✅ #을 사용한 private 속성을 활용해 캡슐화(Encapsulation) 가능
✅ 메서드 오버라이딩을 통해 다형성(Polymorphism) 구현 가능

 

다음 강좌에서는 자바스크립트의 테스트와 디버깅을 다룰 예정이에요!