JavaScript Prototype VS Class? Which one is better?

Prototype vs Class Approach

In JavaScript, both prototypes and classes are used to implement object-oriented programming (OOP) features, but they represent different approaches to achieving the same goal. With the introduction of the

syntax in ECMAScript 2015 (ES6), the aim was to enhance the simplicity and ease of working with OOP in JavaScript. The adoption of classes provides a more convenient and familiar syntax, especially for developers transitioning from other programming languages to JavaScript.

Prototype-based Inheritance

In JavaScript, objects can serve as prototypes for other objects. Each object has an internal link to another object called its prototype. If you want to see the prototype of an object, you can use the

method.

// Create an object with properties
const person = {
  name: 'George',
  age: 30,
  hobbies: ['programming', 'tech', 'blogging'],
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My hobbies are ${this.hobbies.join(', ')}.`);
    // Hello, my name is George and I am 30 years old. My hobbies are programming, tech, blogging.
  }
};

// Get the prototype of the object
const prototype1 = Object.getPrototypeOf(person);
console.log('Prototype: ', prototype1); // Prototype:  [Object: null prototype] {}

You can create objects directly using the Object constructor or object literals, and then extend their functionality by adding properties and methods directly to the prototype object. Take a look at the next example:

// Create a constructor function
function Person(name, age, hobbies) {
  this.name = name;
  this.age = age;
  this.hobbies = hobbies;
}

// Adding a method to the prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My hobbies are ${this.hobbies.join(', ')}.`);
   // Hello, my name is George and I am 30 years old. My hobbies are programming, tech, blogging.
};

// Create an instance of Person
const person1 = new Person('George', 30, ['programming', 'tech', 'blogging']);

// Get the prototype of the object
const prototype2 = Object.getPrototypeOf(person1);
console.log('Prototype: ', prototype2); // Prototype:  { greet: [Function (anonymous)] }

See the differences in the console logs from the prototypes. Now the greet method is part of the prototype instead of the person object itself.

Class-based Inheritance

The class syntax provides a more familiar and structured way to define objects and their behavior. Beneath the surface of the class syntax, JavaScript continues to rely on prototypes. The

syntax can be viewed as a form of syntactic sugar that simplifies the prototype-based approach.

// Create the Person Class
class Person {
  constructor(name, age, hobbies) {
    this.name = name;
    this.age = age;
    this.hobbies = hobbies;
  }

  //  Methods definitions
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My hobbies are ${this.hobbies.join(', ')}.`);
  }
}

// Creating an instance of Person
const person1 = new Person('George', 30, ['programming', 'tech', 'blogging']);

// Calling the method
person1.greet(); // Hello, my name is George and I am 30 years old. My hobbies are programming, tech, blogging.

Personal Experience

In my career as a software engineer, I've used both approaches. In one of my projects I had no other choice but to use the prototype chains as the project was running a version of JavaScript that didn't support classes (ECMAScript 5). If I had to choose one over the other I would definitely pick the

syntax. It makes the code more readable, easier to understand, and less of a pain when extending a base class.

Prototype or Class syntax is better?

Both prototype-based and class-based approaches are valid ways to implement OOP in JavaScript. The choice between prototype or class syntax often depends on personal preference and coding style. However, it's essential to understand that JavaScript's prototypal nature remains fundamental to both approaches.