JavaScript Class and Object Constructors with Examples

Object constructors and class constructors in JavaScript create objects in a structured way. Both provide methods to build reusable code.

Understand What Object Constructor and Class Constructor Are in JavaScript

An object constructor is a function that creates and sets up new objects. It gives each object its own values.

A class constructor is a special method inside a class. It runs each time you create a new object from the class.

The syntax looks like this:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let user = new Person("Sara", 25);

This structure defines a function that sets properties for name and age. The new keyword builds a new object from the function.

The syntax in class looks like this:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let user = new Person("Omar", 30);

This structure defines a class with a constructor method. It sets the object properties each time you create a new instance.

A class constructor exists inside a class and starts with the keyword constructor. An object constructor exists as a standalone function. A class constructor is part of modern JavaScript, and an object constructor is older.

How to Create Objects with Constructors in JavaScript

An object constructor uses new to create an object. The function sets up properties for each object. A class constructor works in the same way. It runs when you call the class with new.

function Car(model, year) {
  this.model = model;
  this.year = year;
}
let car1 = new Car("Toyota", 2022);
console.log(car1);

This code builds an object from the constructor. It sets the model and year properties. The output will be an object with values Toyota and 2022.

Use Methods inside a Class

A class can also hold methods. These methods define behavior for objects that you create from the class.

The syntax looks like this:

class MathOps {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  add() {
    return this.x + this.y;
  }
}
let calc = new MathOps(10, 20);
console.log(calc.add());

This shows it in action clearly. The add method works on the object values and gives the result immediately.

Examples of Constructors in JavaScript

Create Multiple Objects with One Constructor:

function Book(title, author) {
  this.title = title;
  this.author = author;
}
let b1 = new Book("JS Guide", "Ali");
let b2 = new Book("CSS Master", "Lina");

This code builds two objects with one constructor. Each object holds its own title and author values.

Add Methods to Constructor Function:

function User(name, email) {
  this.name = name;
  this.email = email;
  this.showInfo = function() {
    return this.name + " : " + this.email;
  }
}
let u1 = new User("Sara", "[email protected]");
console.log(u1.showInfo());

This code adds a method inside the constructor. The method returns the name and email of the object.

Class with Static Method:

class Account {
  constructor(balance) {
    this.balance = balance;
  }
  static bankName() {
    return "National Bank";
  }
}
console.log(Account.bankName());

This code defines a class with a static method. The method belongs to the class and not to any object instance.

Class Inheritance:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return this.name + " makes sound";
  }
}
class Dog extends Animal {
  speak() {
    return this.name + " barks";
  }
}
let d = new Dog("Rex");
console.log(d.speak());

This code uses inheritance. The Dog class extends Animal. The new class overrides the method with its own output.

Wrapping Up

You learned about object constructors and class constructors in JavaScript.
Here is a quick recap:

• Constructors set up object values
• Classes hold constructors and methods, and both give structured code for object creation.

FAQs

class User {
  constructor(name) {
    this.name = name;
  }
}
let user1 = new User("Ali");

function Car(model) {
  this.model = model;
}
let car1 = new Car("BMW");

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }
}
let book1 = new Book("JS Guide", "Sam");

class Student {
  constructor(name, age) {
    if (typeof age === "undefined") {
      this.name = name;
      this.age = 0;
    } else {
      this.name = name;
      this.age = age;
    }
  }
}
let s1 = new Student("Sara");
let s2 = new Student("Omar", 20);

Similar Reads