Modern JavaScript: Understanding ES6 Classes

Source: Dev.to

What is Constructor Functions

You often need to create multiple objects with the same structure. Instead of writing objects repeatedly, JavaScript provides constructor functions to make object creation easier and reusable.

Explanation

function Person() {          // Constructor function (capital letter by convention)
  this.name = ...;           // property of the object
  this.age = ...;            // another property
  // No object is created yet; the function only defines how objects should be built
}

What Happens When new Is Used?

1. Step 1 — Create Empty Object
   

2. Step 2 — this Points to the Object
   

3. Step 3 — Add Properties
   

4. Step 4 — Return the Object
   

After these steps the newly created object is returned:

Role of this in Constructor Functions

In a constructor function, the keyword this refers to the new object that is being created. When you invoke a function with new, JavaScript automatically:

1. Creates an empty object.
2. Binds this inside the constructor to that object.
3. Executes the constructor body, adding properties to this.
4. Returns the object.

Modern Alternative — ES6 Classes

ES6 classes, introduced in ECMAScript 2015, provide a cleaner, more readable syntax for creating objects. Before ES6, developers relied on constructor functions; now classes encapsulate the same functionality with clearer semantics.

Simple Example