JavaScript Classes, Objects, and Constructors

What is OOP?

OOP is a way to organize code into reusable and modular pieces. These pieces are called objects. Objects represent real-world things and can have properties (data) and methods (functions).

• Class – A blueprint for creating objects.
• Object – An instance of a class.
• Constructor – A special method used to initialize objects.
• Inheritance – One class can inherit properties and methods from another.
• Encapsulation – Keeping data safe and controlled through access restrictions.
• Polymorphism – Different objects can share the same method name but perform different actions (method overriding).

Class

A class is a blueprint or template for creating objects. It defines the properties (data) and methods (functions) that the objects created from the class will have.

Here’s a simple example:

// Creating a class named Car that models a car with make and model properties
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

// Creating a class named Car that models a car with make and model properties
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

Let’s break it down:

• class Car defines the structure and behavior of car objects.
• The constructor method sets up initial values for make and model.
• displayInfo() is a method that prints car details to the console.

Object

An object is a specific instance of a class. It contains real values for the properties defined in the class and can use its methods to perform actions.

Here's how you create an object from the Car class:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}
 
// Creating an object named myCar from the Car class
const myCar = new Car("Ford", "Mustang");
myCar.displayInfo(); // Output: Car: Ford Mustang

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}
 
// Creating an object named myCar from the Car class
const myCar = new Car("Ford", "Mustang");
myCar.displayInfo(); // Output: Car: Ford Mustang

Here’s what’s happening step-by-step:

• new Car("Ford", "Mustang") creates a new instance (object) of the Car class.
• The object myCar stores the values make = "Ford" and model = "Mustang" for that specific car.
• We call the displayInfo() method on myCar to show the car’s details in the console.

Constructor and this keyword

The constructor is a special method inside a class. It runs automatically when a new object is created. You use it to set up initial properties for that object.

The keyword this refers to the current object being created. It helps assign values to that object’s properties.

Here’s a simple example:

class Car {
  constructor(make, model) {
    this.make = make;    // Set the make property for this object
    this.model = model;  // Set the model property for this object
  }
}

class Car {
  constructor(make, model) {
    this.make = make;    // Set the make property for this object
    this.model = model;  // Set the model property for this object
  }
}

Here’s how it works:

• The constructor method runs automatically when you create a new object using the class.
• this.make assigns the passed-in make value to the object being created.
• this.model does the same for the model property.
• The keyword this refers to the current object inside the class.

Example 1: Class, Object, Constructor, and this

This example shows how to define a class using the class keyword, create an object from that class, and use the constructor and this keyword to set up and access properties.

//🚘 This is a class named Car
class Car {
  // This is the constructor method
  constructor(make, model) {
    // 'this' refers to the current object being created
    this.make = make;   // Set the 'make' property
    this.model = model; // Set the 'model' property
  }

  // A method to display car information
  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

// This is an object created from the Car class
const myCar = new Car("Nissan", "GT-R");

// Calling a method on the object
myCar.displayInfo(); // Output: Car: Nissan GT-R

//🚘 This is a class named Car
class Car {
  // This is the constructor method
  constructor(make, model) {
    // 'this' refers to the current object being created
    this.make = make;   // Set the 'make' property
    this.model = model; // Set the 'model' property
  }

  // A method to display car information
  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

// This is an object created from the Car class
const myCar = new Car("Nissan", "GT-R");

// Calling a method on the object
myCar.displayInfo(); // Output: Car: Nissan GT-R

How It Works:

• class Car defines a template for creating car objects.
• The constructor method runs when a new object is created and sets up the object's initial data.
• this refers to the current object, allowing access to its properties and methods.
• myCar is an object created using the new keyword with specific values.
• The displayInfo() method prints the object's information to the console.

Output

Car: Nissan GT-R

Car: Nissan GT-R

🧠 This example helps you understand how classes are used to create objects, and how constructors and this make it easy to work with object properties.

What's Next?

Up next, we’ll explore static methods and properties in JavaScript. These are special features you can use with classes, and they work a little differently from regular methods.