[JavaScript] 객체지향 프로그래밍 (OOP)

🚀 객체지향 프로그래밍?

객체지향 프로그래밍(Object-Oriented Programming, OOP)은 프로그래밍의 패러다임 중 하나로, 소프트웨어를 객체들의 모음으로 표현하는 방법입니다. 객체는 데이터(속성)와 그 데이터와 관련된 행동(메서드)을 결합한 것입니다. 자바스크립트에서 OOP는 주로 프로토타입 기반의 상속 메커니즘을 사용합니다. ES6부터는 클래스 기반의 구문도 제공하고 있습니다.

🚗 클래스(Class)

클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 메서드를 정의하여 객체의 구조와 행동을 명시합니다. 클래스는 객체를 생성하기 위한 "틀" 또는 "설계도"와 같습니다. 이 틀을 사용하여 특정 유형의 객체들을 만들 수 있습니다. 클래스는 해당 유형의 모든 객체들이 공유할 속성(데이터 요소)과 메서드(기능)를 정의합니다. 예를 들어, 자동차 클래스에는 바퀴, 엔진, 좌석 등의 속성과 달리다, 멈추다 등의 메서드가 포함될 수 있습니다.

🔔 생성자(Constructor)

생성자는 클래스를 기반으로 새로운 객체를 만들 때 호출되는 특별한 함수입니다. 이 함수는 클래스 내에서 한 번만 사용할 수 있으며, 새 객체의 초기 상태를 설정하는데 사용됩니다. 생성자는 보통 객체가 처음 생성될 때 필요한 초기화 작업을 수행하며, 객체의 초기 속성 값들을 설정할 수 있습니다. JavaScript에서는 constructor라는 이름의 메서드를 사용하여 이를 정의합니다.

🎨 인스턴스(Instance)

인스턴스는 클래스에 정의된 구조와 메서드를 실제 메모리에 할당하여 생성된 객체입니다. 클래스는 단지 객체를 만들기 위한 설계도일 뿐이며, 실제로 소프트웨어에서 사용되는 것은 인스턴스입니다. 각 인스턴스는 동일한 클래스의 설계를 공유하지만, 각기 다른 속성 값을 가질 수 있습니다. 각 인스턴스는 독립적인 속성 값을 가질 수 있으며, 동일 클래스의 다른 인스턴스와 데이터를 공유하지 않습니다. 예를 들어, 모든 자동차가 동일한 설계(클래스)를 따르지만 각 자동차(인스턴스)는 다른 색상, 엔진 유형, 제조년도 등을 가질 수 있습니다.

class Car {
  constructor(color, year) {
    this.color = color; // 속성 설정
    this.year = year; // 속성 설정
  }

  drive() {
    console.log("차가 달립니다."); // 메서드
  }
}

const myCar = new Car("red", 2020); // Car 클래스의 인스턴스 생성
myCar.drive(); // 인스턴스 메서드 호출

=> 위 예에서 Car는 클래스, constructor는 생성자 함수, myCar는 Car 클래스의 인스턴스입니다. myCar 인스턴스는 "red"와 2020이라는 고유한 속성 값을 가지며, 공통 기능인 drive() 메서드를 사용할 수 있습니다.

👆🏻 this 키워드

this는 현재 객체를 가리키는 키워드로, 클래스나 객체의 메서드 내에서 사용될 때 현재 인스턴스를 참조합니다. 이를 통해 현재 인스턴스의 속성이나 메서드에 접근할 수 있습니다.

✨ new 키워드

new는 클래스나 생성자 함수를 통해 새로운 객체 인스턴스를 생성할 때 사용되는 키워드입니다. new를 사용하면 생성자 함수의 프로토타입을 상속받는 새 객체가 생성되고, 생성자 함수 내의 this는 이 새로운 객체를 가리키게 됩니다.

🔎 ES6 이전과 이후의 클래스 작성법

ES5 이전

ES5 이전의 자바스크립트에서는 function 키워드와 프로토타입을 사용해 클래스와 상속을 구현했습니다.

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.drive = function() {
  console.log("Driving a " + this.make + " " + this.model);
};

var myCar = new Car("Toyota", "Corolla");
myCar.drive();

ES6 이후

ES6에서는 class 키워드를 도입하여 보다 명확한 구문과 상속 구조를 제공합니다. 이로써 클래스, 생성자, 메서드, 상속 등을 보다 직관적으로 작성할 수 있습니다.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log(`Driving a ${this.make} ${this.model}`);
  }
}

const myCar = new Car("Honda", "Civic");
myCar.drive();

💡 TIL

자바스크립트의 객체지향 프로그래밍은 프로토타입을 기반으로 하며, ES6부터는 클래스 기반의 구문을 제공하여 더욱 간결하고 명확한 객체지향 코드 작성을 가능하게 합니다. 클래스, 생성자, 인스턴스는 객체를 생성하고 관리하는 데 필수적인 요소이며, this와 new는 객체의 동작과 생성 과정에서 중요한 역할을 합니다.