JavaScript 객체 지향 프로그래밍 가이드

※ 해당 내용은 FrontEnd Category에 한정할 수 없습니다. 편의상 FrontEnd Category에 작성합니다.

 

JavaScript는 프로토타입 기반 언어입니다. 모든 객체는 프로토타입 객체를 가지며, 이를 통해 속성과 메서드를 상속받습니다.

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

Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const cat = new Animal('KJ');
cat.sayHello(); // 출력: Hello, I'm KJ

 

ES6 클래스 문법

ES6부터 도입된 class 키워드를 사용하면 더 직관적으로 객체 지향 프로그래밍을 할 수 있습니다.

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

  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const dog = new Animal('SJ');
dog.sayHello(); // 출력: Hello, I'm SJ

 

객체 생성 패턴

다양한 객체 생성 패턴을 사용하여 효율적으로 객체를 만들 수 있습니다.

팩토리 패턴

function createAnimal(name, species) {
  return {
    name,
    species,
    sayHello() {
      console.log(`Hello, I'm ${this.name}, a ${this.species}`);
    }
  };
}

const fish = createAnimal('KJ', 'SJ');
fish.sayHello(); // 출력: Hello, I'm KJ, a SJ

 

상속과 다형성

JavaScript에서는 프로토타입 체인을 통해 상속을 구현합니다. ES6 클래스를 사용하면 더 쉽게 상속을 구현할 수 있습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const animal = new Animal('Generic Animal');
animal.speak(); // 출력: Generic Animal makes a sound.
const dog = new Dog('Buddy');
dog.speak(); // 출력: Buddy barks.

 

캡슐화와 정보 은닉

JavaScript에서 완벽한 private 속성을 구현하는 것은 어렵지만, 컨벤션이나 클로저를 사용하여 유사하게 구현할 수 있습니다.

// 은행 계좌 생성 함수
function createBankAccount(initialBalance) {
  // 비공개 변수

  let balance = initialBalance;
  // 공개 인터페이스를 반환
  return {
    deposit: function(amount) {
      if (amount > 0) {
        balance += amount;
        console.log(`${amount}원이 입금되었습니다. 현재 잔액: ${balance}원`);
      } else {
        console.log('유효한 금액을 입력하세요.');
      }
    },
    withdraw: function(amount) {
      if (amount > 0 && amount <= balance) {
        balance -= amount;
        console.log(`${amount}원이 출금되었습니다. 현재 잔액: ${balance}원`);
      } else {
        console.log('유효하지 않은 금액이거나 잔액이 부족합니다.');
      }
    },
    getBalance: function() {
      return balance;
    }
  };
}

// 사용 예시
const myAccount = createBankAccount(1000);

console.log('초기 잔액:', myAccount.getBalance());  // 1000

myAccount.deposit(500);  // 500원이 입금되었습니다. 현재 잔액: 1500원
myAccount.withdraw(200);  // 200원이 출금되었습니다. 현재 잔액: 1300원

console.log('최종 잔액:', myAccount.getBalance());  // 1300

// 직접 잔액 조작 시도 (불가능)
myAccount.balance = 1000000;  // 아무 효과 없음
console.log('조작 시도 후 잔액:', myAccount.getBalance());  // 여전히 1300