Let's dive into a foundational concept in Object-Oriented Programming (OOP): Classes and Objects. If you have already explored OOP concepts in other programming languages or previous units, this might serve as a good reminder. If not, no worries — we'll start from the basics.

Classes and objects are the building blocks of OOP. A class acts as a blueprint for creating objects, which are instances of the class. Understanding these basics is essential before moving on to more advanced OOP topics like inheritance, polymorphism, and encapsulation.

In JavaScript, a class is defined using the class keyword. A class serves as a blueprint to create objects. Here's a simple example:

JavaScript
Copy to clipboard
1// Defining a class named Person
2class Person {
3    // Constructor to initialize the object's data
4    constructor(name, age) {
5        this.name = name;
6        this.age = age;
7    }
8}

A class can have fields, methods, and constructors. In this snippet, we define a Person class with data members name and age.

An object is an instance of a class. It represents a specific example of the class and holds the characteristics that define the class.

Objects have three main characteristics:

• State: The data or attributes of the object. In the Person class, the name and age are the object's state.
• Behavior: The methods and functions that the object can perform. In the Person class, the display method is mentioned here as an example of behavior, and it will be implemented later in this lesson.
• Identity: A unique identifier distinguishes the object from others, even if they have the same state. This is handled by the memory address in JavaScript.

An object is thus a concrete instance of a class that includes state, behavior, and identity.

Constructors initialize the newly created object's state. In the Person class, we use a constructor to set the name and age:

JavaScript
Copy to clipboard
1class Person {
2    constructor(name, age) {
3        this.name = name;
4        this.age = age;
5    }
6}

In JavaScript, this refers to the current instance of the class and is used to distinguish the class's fields from the parameters with the same names.

JavaScript does not support multiple constructors, but you can achieve similar behavior with default parameters or by manually checking the number of parameters.

Here's an example:

JavaScript
Copy to clipboard
1class Car {
2    constructor(brand = "Unknown", year = 2000) {
3        this.brand = brand;
4        this.year = year;
5    }
6    
7    // Method to handle different constructor logic
8    static createCar(brand, year) {
9        if (year === undefined) {
10            return new Car(brand, 2020);
11        }
12        return new Car(brand, year);
13    }
14}

In this example, the Car class constructor uses default parameters for flexibility. The createCar static method further handles scenarios to mimic overloaded constructors by returning objects with different initialization logic.

Member functions define the behavior of the object. For the Person class, we can define a method to display the object's data:

JavaScript
Copy to clipboard
1class Person {
2    constructor(name, age) {
3        this.name = name;
4        this.age = age;
5    }
6
7    // Member function to display the object's data
8    display() {
9        console.log(`Name: ${this.name}, Age: ${this.age}`);
10    }
11}

Once you have defined a class, you can create objects (instances of the class). Here’s how we can create and use objects of the Person class:

JavaScript
Copy to clipboard
1class Person {
2    constructor(name, age) {
3        this.name = name;
4        this.age = age;
5    }
6
7    display() {
8        console.log(`Name: ${this.name}, Age: ${this.age}`);
9    }
10}
11
12const person = new Person("Alice", 30);  // Creating an object
13person.display();                      // Displaying the object's data

Here, we create an object, person, with the name "Alice" and age 30 by using the constructor of the Person class. The inputs "Alice" and 30 are passed directly to the constructor to initialize the object's state.

The object then uses its display method to print its data to the console. This demonstrates how to instantiate a class and call its member functions in a JavaScript program.

You might wonder why this is important.

Understanding classes and objects is critical because they enable you to model real-world entities in your programs. For instance, a Person class helps you create multiple person objects with different names and ages, enabling you to manage and manipulate data efficiently. This principle is the backbone of complex software systems.

With this knowledge, you will be better prepared to approach more advanced OOP techniques and design patterns, allowing you to write clean, modular, and scalable code. Let's get started with the practice section to gain more hands-on experience.

Ready to code? Let's dive in!