Understanding Constructors in JavaScript: A Comprehensive Guide

Dev Balaji
2 min readMay 5, 2023

--

In object-oriented programming, a constructor is a special method that is called when an object is created. The purpose of a constructor is to initialize the object’s properties and state.

In JavaScript, there are two ways to define a constructor function: using the class syntax and using the function syntax.

Constructor Function using Class Syntax

In the class syntax, a constructor is defined using the keyword constructor within a class declaration. Here's an example:

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

In this example, we define a Person class with a constructor that takes two parameters: name and age. Within the constructor, we set the name and age properties of the new Person object using the this keyword.

To create a new Person object, we use the new keyword followed by the Person constructor, passing in the required parameters:

const john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30

Constructor Function using Function Syntax

In the function syntax, a constructor is defined as a regular function using the function keyword. Here's an example:

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

In this example, we define a Person constructor function with the same parameters as the previous example. Within the constructor function, we set the name and age properties of the new Person object using the this keyword.

To create a new Person object, we use the new keyword followed by the Person constructor function, passing in the required parameters:

const john = new Person("John", 30);
console.log(john.name); // "John"
console.log(john.age); // 30

Both examples achieve the same result. The difference is in the syntax used to define the constructor function. The class syntax is newer and may be more familiar to developers coming from other object-oriented languages. However, the function syntax is still widely used in existing codebases and may be more concise in certain cases.

--

--

Dev Balaji
Dev Balaji

Written by Dev Balaji

🚀 Tech Enthusiast | 🌟 Mastering JavaScript & Frameworks | 💡 Sharing Tips & Tricks | 📘 Aspiring Blogger & Architect | 🐍 Python Practitioner

No responses yet