GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Home
  • Contact Us
  • About Us
  • PHP
  • HTML
  • JavaScript
  • Git
  • Node.js
  • React.js
  • SQL Server
  • Real Dev Tips to Build Apps and Fix Issues

This view

  • Original page
  • New address

GeezerVison is showing flatcoding.com — JavaScript Class and Object Constructors with Examples - FlatCoding

Home JavaScript Class and Object Constructors with Examples
Montasser Mossallem
onSeptember 9, 2025

JavaScript Class and Object Constructors with Examples

  • JavaScript
javascript class and object constructors
3 min read

Table of Content

  • Understand What Object Constructor and Class Constructor Are in JavaScript
  • How to Create Objects with Constructors in JavaScript
  • Use Methods inside a Class
  • Examples of Constructors in JavaScript
  • Wrapping Up
  • FAQs

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

What is the difference between JavaScript class and object constructor?

JavaScript class provides a template for objects. Constructor function initializes object properties. Example:

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

function Car(model) {
  this.model = model;
}
let car1 = new Car("BMW");
  • Class syntax is cleaner
  • Constructor functions are older method

How to create a JavaScript class with constructor?

Use class keyword with constructor() method.

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }
}
let book1 = new Book("JS Guide", "Sam");
  1. Define class with class keyword
  2. Use constructor to set values
  3. Create object using new keyword

Can a JavaScript class have multiple constructors?

No, a JavaScript class supports only one constructor(). Workaround is to use conditional logic inside constructor.

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

JavaScript Math.max(): How to Find the Highest Number

Math.max() is a built-in JavaScript function that returns the highest number from a list of values. It has been part…

JavaScript Nullish Coalescing Operator Guide with Examples

The JavaScript nullish coalescing operator (??) gives a default value when a variable is null or undefined. Understand the Nullish…

Understanding Data Types and Conversion in JavaScript

JavaScript works with different kinds of values. Each value has a type, known as a data type. These types help…

JavaScript Optional Chaining “?”: How it Works with Examples

JavaScript optional chaining lets you access object values without runtime errors. It checks if a property exists before access and…

JavaScript with Function Guide: Syntax with Examples

JavaScript has a statement called "with" that changes how code accesses object properties. The"with" Function makes a temporary scope, so…

JavaScript Math sqrt: How to Find Square Root of a Number

JavaScript Math.sqrt() solves the need to get square roots fast. Before it, you wrote custom code or used loops. It…

Top 5 Code Editors: The Best IDE for JavaScript

If you are a coder, one of your primary requirements is to have a trustworthy code- editor. A Code editor…

JavaScript Garbage Collection: How it Works with Examples

JavaScript removes unused memory blocks with garbage collection. It frees memory space so programs run without leaks. What is JavaScript…

JavaScript Object References and Copying for Beginners

Object References in JavaScript mean that variables do not store full objects but only their references in memory. What is…

Math Functions in JavaScript with Examples

The Math object gives you a set of built-in functions and constants for working with numbers in JavaScript. You do…

  • JavaScript
Montasser Mossallem
onSeptember 9, 2025
  • JavaScript
Share
Previous Article

PHP array_fill_keys: Create Arrays with Specific Keys

Next Article

HTML wbr Tag: Word Break Opportunities

Write a Comment

Leave a Comment Cancel

Your email address will not be published. Required fields are marked *


Recent Posts

  • PHP array_key_exists: How it Works with Examples
  • Git add Command with Step by Step with Example
  • JavaScript valueOf Function: How it Works with Examples
  • Node JS Buffers Tutorial for Beginners and Pros
  • Component-driven HTML Guide with Examples

Recent Comments

No comments to show.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.