Classes and Objects in JavaScript

In JavaScript, classes and objects are basic concepts of Object Oriented Programming (OOPs) that are used to represent real-world concepts and entities.

• A class is a template to create objects having similar properties and behavior, or in other words, we can say that a class is a blueprint for objects.
• An object is an instance of a class. For example, the animal type Dog is a class, while a particular dog named Tommy is an object of the Dog class.

JavaScript Classes

A class in JavaScript is a blueprint used to create objects that share similar properties and methods. It’s a cleaner, more structured way to implement object-oriented programming compared to the older prototype-based approach.

The Constructor Method

The constructor method is a special method in JavaScript with the exact name 'constructor.' It is automatically executed when a new object is created from a class. Its primary purpose is to initialize object properties, allowing you to define the initial state of an object during its instantiation.

Creating a JavaScript Class:

// define a class
class Dog {
  static sound = "bark"; // class property

  constructor(name) {
    this.name = name; // instance property
  }
}

JavaScript Class Methods

Defining class methods in JavaScript is easy and simple, we just need to add () following a method name. 

Example:

class Dog {
  constructor(name, breed) {
    this.name = name;   // instance property
    this.breed = breed; // instance property
  }

  // defining method
  bark() {
    console.log(`${this.name} says woof!`);
  }
}

// creating an object (instance)
const myDog = new Dog("Rayne", "Husky");
myDog.bark(); // Output: Rayne says woof!

Class Getters and Setters

We can use getter and setter methods to get the value of an object and set the value of an object. We can use the get keyword for the getter method and the set keyword for the setter methods

Example: The code below demonstrates the creation and different implementations of JavaScript Classes.

class Dog {
  constructor(name) {
    this.name = name;
  }

  // Getter method
  get dogName() {
    return this.name;
  }

  // Setter method
  set dogName(newName) {
    this.name = newName;
  }

  // Regular method
  bark() {
    console.log(`${this.name} says woof!`);
  }
}

// creating an object
let myDog = new Dog('Rayne');
console.log(myDog.name); // Rayne

myDog.dogName = 'Buddy'; // using setter
console.log(myDog.name); // Buddy

myDog.bark(); // Buddy says woof!

Output:

Rayne
Buddy
Buddy says woof!

Object

An object in JavaScript is a specific instance of a class. It contains its own set of data (properties) and can use the methods defined in its class. Multiple objects can be created from the same class, each having unique values for their properties.

Let’s create an object from the Dog class:

class Dog {
  static sound = "bark"; // class property
}

// Create an object from the class
let dog1 = new Dog();

// Access the class property
console.log(Dog.sound); // bark

In the above JavaScript code, the sound property is a class property (declared using static). This means it is shared across all instances of the Dog class and does not belong to any single object.

Because it’s static, it can be accessed directly using the class name (Dog.sound) without creating an object, or from an instance.

JavaScript Object Properties

In JavaScript the members inside the object which are the key: values are called Object properties. For example, in the above code, name is an object property (unique to each instance), and sound is a class property (shared by all instances of the class).

To Access Object Properties:

1. Using dot Notation: 

Syntax:

object_name.key_1

2. Using bracket Notation: 

Syntax:

object_name["key_1"]

JavaScript Nested Objects: In this case, an object contains another object inside it. 

Example:

const dog1 = {
    name: "Rayne",
    breed: "Husky"
};

const dog2 = {
    name: "Buddy",
    breed: "Beagle"
};

JavaScript Object Methods

In JavaScript, we can add methods to Objects.

Example: In the given example we can see how we can apply Javascript nested objects and also use the different accessing methods.

const Dog = {
    breed: 'Husky',
    color: 'Gray & White',
    details: {
        height: '18 inches',
        weight: '30 pounds'
    }
};

console.log(Dog.breed);              // Husky
console.log(Dog.details.height);     // 18 inches
console.log(Dog["color"]);           // Gray & White
console.log(Dog.details["weight"]);  // 30 pounds

Output:

Husky
18 inches
Gray & White
30 pounds