JavaScript Constructors vs. Classes

JavaScript introduced classes, similar to other languages. Classes enable us to avoid writing the same code for different objects. They work as templates, making the code easier to read and more understandable. Before going in-depth into classes, I'll talk about the difference between constructor functions and classes in this blog. Constructor or Constructor Function A constructor function is a regular JavaScript function used to create and initialize objects. It allows you to create multiple objects with the same structure (properties and methods) without repeating code. By convention, constructor functions start with a capital letter (e.g., User) to distinguish them from regular functions. Constructor functions should be executed with the new operator. function User (name) { this.name = name; this.admin = false; } let john = new User("John"); console.log(john.name); // John console.log(john.admin); // false When the new operator is called, the following steps occur: A new empty object is created and assigned to this. The constructor function's body is executed, and usually this is modified by assigning properties or methods to it. The this object is returned implicitly unless another object is explicitly returned. function User(name) { // this = {}; (implicitly) // add properties to this this.name = name; this.isAdmin = false; // return this; (implicitly) } When a new object is created, something like this happens: let user = new User("John"); this = {}; this = { name: "John", isAdmin: false } return this; Classes Classes were introduced in ES6 as a more modern and structured way to define objects and their behavior. Syntax class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ... } Example: class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } } // Usage: let user = new User("John"); user.sayHi(); MDN Classes are functions. Every function has the prototype property. So, when we create a class User {...}, it points to User.prototype and stores methods. So, essentially, constructor functions and classes do the same things under the hood. However, the newly introduced class syntax adds features such as: Strict mode by default Native support for extends and super static methods Native support for get and set Non-enumerable methods In the upcoming blogs, I'll continue exploring classes in JavaScript.

Mar 20, 2025 - 00:44

JavaScript introduced classes, similar to other languages. Classes enable us to avoid writing the same code for different objects. They work as templates, making the code easier to read and more understandable. Before going in-depth into classes, I'll talk about the difference between constructor functions and classes in this blog.

Constructor or Constructor Function
A constructor function is a regular JavaScript function used to create and initialize objects. It allows you to create multiple objects with the same structure (properties and methods) without repeating code.

By convention, constructor functions start with a capital letter (e.g., User) to distinguish them from regular functions.
Constructor functions should be executed with the new operator.

function User (name) {
    this.name = name;
    this.admin = false;
}

let john = new User("John");
console.log(john.name); // John
console.log(john.admin); // false

When the new operator is called, the following steps occur:

A new empty object is created and assigned to this.
The constructor function's body is executed, and usually this is modified by assigning properties or methods to it.
The this object is returned implicitly unless another object is explicitly returned.

function User(name) {   
    // this = {};  (implicitly) 

    // add properties to this 
    this.name = name; 
    this.isAdmin = false;   

    // return this;  (implicitly) 
}

When a new object is created, something like this happens:

let user = new User("John");

this = {};
this = {
    name: "John",
    isAdmin: false
}
return this;

Classes
Classes were introduced in ES6 as a more modern and structured way to define objects and their behavior.

Syntax

class MyClass { 
    // class methods 
    constructor() { ... } 
    method1() { ... } 
    method2() { ... } 
    method3() { ... } 
    ... 
}

Example:

class User { 
    constructor(name) { 
        this.name = name; 
    } 
    sayHi() { 
        alert(this.name); 
    } 
} 
// Usage: 
let user = new User("John"); 
user.sayHi();

MDN

Classes are functions. Every function has the prototype property. So, when we create a class User {...}, it points to User.prototype and stores methods.

So, essentially, constructor functions and classes do the same things under the hood. However, the newly introduced class syntax adds features such as:

Strict mode by default
Native support for extends and super
static methods
Native support for get and set
Non-enumerable methods

In the upcoming blogs, I'll continue exploring classes in JavaScript.