Classes & Objects In JavaScript

Here is the detailed explanation of Classes & Objects In JavaScript:

JavaScript, a versatile language, empowers you to create objects and classes to structure your code effectively. Let’s delve into these concepts:

Objects

Definition:

Objects are fundamental building blocks in JavaScript. They encapsulate data (properties) and associated actions (methods) that operate on that data. Imagine objects as real-world entities like a car or a book, with properties like color, model, or title and author, and methods like driving (for a car) or summarizing the plot (for a book).

Creation:

Objects can be created using literal notation ({}) or the Object constructor function:

// Literal notation
const car = {
    make: 'Ford',
    model: 'Mustang',
    year: 2023,
    drive() {
        console.log('Vroom! The car is driving.');
    }
};

// Object constructor
const book = new Object({
    title: 'The Lord of the Rings',
    author: 'J.R.R. Tolkien',
    summarize() {
        console.log('An epic adventure...');
    }
});

Properties

Object properties represent the data associated with an object. They can be strings, numbers, arrays, objects, or functions (methods). Accessing properties is done using dot notation (object.property) or bracket notation (object['property']).

Methods

Methods are functions that are defined within an object and have access to the object’s properties. They define the object’s behavior. Call methods using objectName.methodName().

Classes

Definition

Introduced in ECMAScript 2015 (ES6), classes provide a blueprint or template for creating objects. They define the properties and methods that all objects of that class will share. Think of a class as a cookie cutter used to create many similar cookies (objects).

Creation:

Classes are declared using the class keyword. A class typically has a constructor, a special method that is called when a new object (instance) is created:

class Car {
    constructor(make, model, year) {
        this.make = make; // `this` refers to the current object
        this.model = model;
        this.year = year;
    }

    drive() {
        console.log(`The ${this.make} ${this.model} is driving!`);
    }
}

Creating Objects (Instances) from a Class

The new keyword is used to create new objects (instances) from a class. The constructor is invoked during this process:

const mustang = new Car('Ford', 'Mustang', 2023);
mustang.drive(); // Output: The Ford Mustang is driving!

const hobbit = new Book('The Hobbit', 'J.R.R. Tolkien');
hobbit.summarize(); // Output: (Example summary content)

Key Differences