Classes and Objects in JavaScript

Classes

Classes were first introduced in the new version of the ES6 classes which replaced the previously used functions. Class is nothing but a blueprint for an object of it. It is used to create an object mainly. If we relate it to a real-life example then it is like a plan for a building or house where that plan contains details about doors, windows, floors, etc. Based on the class which is the blueprint an object is made which can be referred to as a house in this example. So one plan is used to make a lot of houses in the same way one class can be used to create a lot of classes. So class is not a real-life entity but the object is one. 

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 JavaScript Class

To create a JavaScript class, we must follow the following syntax.

Syntax:

// creating a class
class Name {
    constructor(var) {
        this.var = var;
    }
}

JavaScript Class Methods

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

Syntax:

class Name {
   constructor(var) {
           this.var = var;
    
   }
    // defining method
    method() {
        //Code Here
    }
}

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.

Syntax:

class Name {
    constructor(var) {
        this.var = var; 
    }
    // defining getter method
    get method() {
        //Code Here
    }
    // defining setter method
    set method(value) {
        this.var = value;
    }
}

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

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

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

    // Setter method
    set langName(x) {
        this.name = x;
    }
    hello(){
        console.log(`Hello ${this.name}`)
    }
}

let obj = new OOPs('JavaScript');
console.log(obj.name); 

obj.langName = 'Java';
console.log(obj.name); 

Output:

JavaScript
Java

Object

Apart from the 7 primitive datatypes there is the most important datatype in JavaScript which is Object. Although the nature of this datatype is completely different from the primitive datatypes. That means in the primitive datatypes only one value is stored but an object can store more than one value even of different types. 

Object Creation

Here is the syntax to declare an object with the name object_name and having the members inside it having key-value pairs and all the members are enclosed inside {}.

Syntax:

const object_name = {
    key_1: value_1,
    key_2: value_2,
    ...
}

We can also define it in a single line but this way defining increases readability.

JavaScript Object Properties

In JavaScript the members inside the object which are the key: values are called Object properties. For example, in the above-given syntax key_1: value_1 and key_2: value_2 are properties of the object. 

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. 

Syntax:

const object_name-1 = {
       key_1: value_1,
       key_2: value_2,
       const object_name-2 = {
           key_3: value_3,
           key_4: value_4,
    }
}

JavaScript Object Methods: In JavaScript, we can add methods to Objects.

Syntax:

const object_name-1 = {
    method_name: function
() {
        //code here
    }
}

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

const GFG = {
    topic: 'OOPs',
    lang: 'JavaScript',
    sub_topics: {
        topic_1: 'Class',
        topic_2: 'Object'
    }
}
console.log(GFG.topic);
console.log(GFG.sub_topics.topic_1);
console.log(GFG["lang"]);
console.log(GFG.sub_topics["topic_2"]);

Output:

OOPs
Class
JavaScript
Object