객체 지향 자바스크립트의 이해

자바스크립트는 객체 중심의 언어입니다. 객체는 단순 변수나 함수 그 이상의 구조로, 데이터와 그 데이터를 다루는 동작(메서드)을 하나로 묶어 복잡한 프로그램을 더욱 명확하게 만듭니다. 이 장에서는 자바스크립트의 객체 지향 프로그래밍(OOP)이 실제로 어떻게 구현되는지, 그리고 객체, 생성자, 프로토타입, 클래스, 상속을 중점적으로 살펴봅니다.

객체의 생성과 활용

자바스크립트에서 객체를 만들 수 있는 방법은 정말 다양합니다. 가장 간단한 예는 중괄호를 이용한 리터럴 방식입니다.

const person = {
  name: '영수',
  greet: function() {
    console.log('안녕하세요, ' + this.name + '입니다.');
  }
};
person.greet(); // "안녕하세요, 영수입니다."

객체는 속성과 메서드를 가지며, 현실의 대상을 효과적으로 모델링할 수 있습니다. 하지만 실무에서는 같은 구조의 객체를 반복적으로 생성해야 할 때가 많습니다. 이럴 때 생성자 함수나 클래스를 활용합니다.

생성자 함수와 프로토타입

생성자 함수는 객체의 틀이 되는 함수입니다. 이름의 첫 글자를 대문자로 작성하며, new 연산자를 이용해 새로운 객체를 만들어냅니다. 다음은 생성자 함수 사용 예시입니다.

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

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

생성자 함수로 생성된 객체는 prototype 속성을 통해 메서드를 물려받게 됩니다. 이 메커니즘을 프로토타입 상속이라고 하며, 자바스크립트만의 독특한 상속 구조입니다.

프로토타입 체인과 상속

모든 객체는 자신의 프로토타입 객체에 대한 참조를 내부적으로 갖고 있습니다. 객체 자체에 없는 속성이나 메서드를 호출할 때, 자바스크립트는 프로토타입 체인을 차례로 따라가면서 해당 속성을 찾습니다. 이 덕분에 여러 객체가 공통의 기능을 효율적으로 공유하고, 확장도 유연하게 할 수 있습니다.

클래스 문법과 현대적 상속 구조

ES6부터는 더 직관적인 클래스 문법이 추가되어 객체 지향 설계가 한결 쉬워졌습니다. 클래스는 기존의 생성자 함수 및 프로토타입 패턴을 감싸는 문법적 설탕(문법을 단순화시키는 기능)입니다.

class Car {
  constructor(model) {
    this.model = model;
  }
  run() {
    console.log(this.model + '가 달립니다.');
  }
}
const ev = new Car('전기차');
ev.run(); // "전기차가 달립니다."

클래스는 상속도 간편하게 처리할 수 있습니다. extends와 super 키워드를 통해 부모 클래스의 속성과 메서드를 자식 클래스가 그대로 이어받고, 필요시 원하는 대로 확장할 수도 있습니다.

class ElectricCar extends Car {
  constructor(model, battery) {
    super(model);
    this.battery = battery;
  }
  charge() {
    console.log(this.model + '의 배터리가 충전됩니다.');
  }
}

객체 지향의 장점과 실제 적용

객체 지향 프로그래밍을 도입하면, 코드의 재사용성과 유지보수성이 극적으로 향상됩니다. 여러 객체가 동일한 동작을 공유하거나, 확장된 기능을 손쉽게 추가하는 것이 가능해지죠. 따라서 실제 프로젝트에서는 생성자 함수, 프로토타입, 클래스, 상속 구조를 유기적으로 활용하여 효율적이고 견고한 프로그램을 설계할 수 있습니다.

이제 자바스크립트의 객체 지향 구조를 이해하고, 여러분의 프로젝트에 적극적으로 적용해보세요.