[Javascript] Prototype과 Class의 개념과 차이

 
 
이번 글에서는 프로토타입과 클래스에 대해 다루어 보려고 합니다. 프로토타입은 ES6 이전부터 나왔고, 클래스는 ES6에서 도입되었습니다. 프로토타입과 클래스가 무엇이며 어떠한 차이를 갖고 있는지 간단한 코드들을 보면서 확인하겠습니다.
 
 

[Prototype]

자바스크립트 프로토타입(Prototype)은 자바스크립트 객체 지향 프로그래밍에서 객체 상속과 프로퍼티 공유를 구현하는 데 사용되는 중요한 개념입니다. 모든 객체는 프로토타입을 가지며, 이를 통해 다른 객체의 프로퍼티와 메서드를 상속하고 공유할 수 있습니다.
 
프로토타입은 객체 간의 연쇄적인 상속을 가능하게 합니다. 객체가 다른 객체의 프로퍼티나 메서드를 참조할 때, 프로토타입 체인을 통해 상위 객체(부모 객체)로부터 프로퍼티나 메서드를 찾습니다. 이러한 상속 방식은 메모리 효율적이며 객체 간의 재사용을 가능하게 합니다.
 
프로토타입은 다음과 같은 핵심 요소로 구성됩니다.

• __proto__: 모든 객체는 __proto__ 속성을 가지며, 이를 통해 해당 객체의 프로토타입을 참조합니다.
• 프로토타입 체인: __proto__ 체인을 따라 상위 객체의 프로퍼티나 메서드를 찾을 수 있으며, 이를 통해 객체 간의 상속 관계를 형성합니다.
• 생성자 함수: 객체를 생성할 때 사용되는 생성자 함수는 해당 객체의 프로토타입을 정의합니다. 객체는 생성자 함수를 통해 생성되며, 생성자 함수의 프로토타입은 해당 객체의 프로토타입이 됩니다.

 
프로토타입을 사용하면 객체를 공유하거나 확장하는 데 유용하며, 프로토타입을 활용하여 클래스와 상속을 구현할 수 있습니다. ES6에서는 클래스가 도입되었지만, 클래스도 내부적으로 프로토타입을 활용합니다. 예를 들어, 클래스의 메서드는 클래스의 프로토타입에 정의됩니다.
프로토타입은 자바스크립트의 핵심 개념 중 하나이며, 객체 지향 프로그래밍을 이해하고 자바스크립트 코드를 더 효율적으로 작성하는 데 중요한 역할을 합니다.
 
 

[Class]

클래스(Class)는 객체 지향 프로그래밍(OOP)에서 중요한 개념으로, 객체를 생성하기 위한 템플릿 또는 설계도입니다. 클래스는 객체의 속성(프로퍼티)과 동작(메서드)을 정의하여 객체를 생성하고 관리하는 데 사용됩니다. 다른 프로그래밍 언어에서도 클래스가 사용되며, 자바스크립트에서는 ES6(ECMAScript 2015)부터 클래스가 공식적으로 도입되었습니다.
 
클래스는 다음과 같은 주요 특징을 가지고 있습니다.

• 템플릿: 클래스는 객체를 생성하기 위한 템플릿으로 사용됩니다. 클래스 정의는 객체의 구조와 동작을 미리 정의합니다.
• 객체 생성: 클래스를 사용하여 여러 개의 객체를 생성할 수 있습니다. 각 객체는 클래스의 인스턴스(Instance)로 간주됩니다.
• 상속: 클래스 간에 상속 관계를 설정하여 코드를 재사용하고 객체 간에 공통된 특징을 공유할 수 있습니다.
• 캡슐화: 클래스는 데이터와 관련된 메서드를 함께 묶어 캡슐화(Encapsulation)를 지원합니다. 이는 객체 내부 데이터를 보호하고 조작을 제한하는 데 도움이 됩니다.
• 다형성: 클래스를 통해 다형성(Polymorphism)을 지원하며, 다른 클래스에서 동일한 메서드 이름을 사용하여 다양한 동작을 정의할 수 있습니다.

 

[프로토타입 vs 클래스]

 
1. 문법
프로토타입 기반의 상속은 생성자 함수와 프로토타입 객체를 사용하여 정의됩니다. 이는 고전적인 자바스크립트 방식입니다.

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

Person.prototype.greet = function() {
  console.log(`안녕, ${this.name}`);
};

 
클래스는 ES6에서 도입되었으며, 보다 구조화된 방식으로 객체 생성 및 상속을 지원합니다.

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

  greet() {
    console.log(`안녕, ${this.name}`);
  }
}

 
 
2. 상속
프로토타입 기반 상속은 Object.create()나 new 연산자를 사용하여 프로토타입 객체를 상속하거나 프로토타입 체인을 활용합니다.

function Student(name, studentId) {
  Person.call(this, name);
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);

 
클래스는 extends 키워드를 사용하여 다른 클래스를 상속할 수 있습니다.

class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

 
 
3. 생성자
프로토타입은 생성자 함수와 클래스의 역할을 하는 함수를 별도로 정의해야 합니다.

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

 
클래스 내부에 생성자 메서드를 정의하고 constructor 키워드를 사용합니다.

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

 
 
4. 상속 체인

• 프로토타입: 프로토타입 체인을 통해 다중 상속과 동적 프로퍼티 추가가 가능합니다.
• 클래스: 단일 상속만을 지원하며, 인터페이스와 같은 기능은 제공하지 않습니다.

 
5. 호이스팅

• 프로토타입: 생성자 함수와 프로토타입 메서드는 함수 호이스팅의 영향을 받을 수 있습니다.
• 클래스: 클래스와 클래스 메서드는 블록 스코프를 따르며 호이스팅이 발생하지 않습니다.

 
클래스는 프로토타입 상속보다 코드 구조화와 가독성 측면에서 편리하며, ES6에서 표준화되었습니다. 그러나 자바스크립트는 여전히 프로토타입 기반의 상속을 지원하므로 프로토타입도 중요한 개념입니다. 클래스와 프로토타입은 각각의 장단점을 가지며, 어떤 방식을 선택할지는 개발자의 요구사항과 프로젝트 상황에 따라 달라집니다.