Introduction To Objects In JavaScript

Hello everyone, welcome to nkcoderz.com. In this article we will going to discuss about Introduction To Objects In JavaScript.

In JavaScript, objects are a fundamental data type that allows you to store and organize data in a structured way. Objects are collections of properties, which are key-value pairs, and they can be used to represent real-world objects, such as a car, a person, or a bank account.

There are several ways to create an object in JavaScript, but the most common way is to use the object literal notation. This is done by using curly braces {} and defining properties within them, separated by a colon :. Here is an example of an object literal notation for a car object:

let car = {
    make: "Toyota",
    model: "Camry",
    year: 2020,
    color: "white"
};

Properties can be accessed using the dot notation (.) or the bracket notation ([]). For example, to access the make of the car object, you can use:

console.log(car.make);
console.log(car["make"]);

Output

Toyota

Toyota

Objects can also have methods, which are functions that are properties of an object. Here is an example of a car object with a method called “drive”:

let car = {
    make: "Toyota",
    model: "Camry",
    year: 2020,
    color: "white",
    drive: function() {
        console.log("The car is driving");
    }
};
car.drive();

Output

The car is driving

JavaScript also provides a built-in Object constructor, which allows you to create objects using the “new” keyword. Here is an example of creating an object using the Object constructor:

let car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;
car.color = "white";

In addition to these ways of creating objects, there are also other advanced techniques, such as object.create() and classes.

There are several ways to create an object in JavaScript, including object literals, the Object constructor, and advanced techniques like object.create and classes.

Inheritance In JavaScript

Inheritance is the mechanism by which an object can inherit properties and methods from another object. This allows you to create a hierarchy of objects, where objects at the top of the hierarchy have properties and methods that are shared by all the objects lower down.

JavaScript uses a prototype-based model of inheritance, which means that objects inherit properties and methods from their prototypes. Every object in JavaScript has a prototype, which is another object.

When a property or method is accessed on an object, JavaScript looks for that property or method on the object itself. If it’s not found, it looks for it on the object’s prototype, and so on, up the prototype chain.

The prototype of an object can be accessed using the Object.getPrototypeOf() method or the proto property (non-standard, but supported by most browsers).

class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
    drive() {
        console.log("The car is driving");
    }
}
let car = new Car("Toyota", "Camry", 2020);
console.log(car.make);
car.drive();

Output

“Toyota“

The car is driving

Objects can have properties and methods, and can be created using object literals, the Object constructor, and advanced techniques like object. create and classes.

Another important aspect of objects in JavaScript is the concept of “this” keyword. The “this” keyword refers to the current object, and its value is determined by how the function is called.

In the global scope, “this” refers to the global object (window in the browser, global in Node.js). In a function, “this” refers to the object that the function is a property of.

let car = {
    make: "Toyota",
    model: "Camry",
    year: 2020,
    color: "white",
    drive: function() {
        console.log(`The ${this.make} ${this.model} is driving`);
    }
};
car.drive();

Output

The Toyota Camry is driving

In addition, when a function is used as a method of an object, the “this” keyword inside the function refers to the object that the method is a property of. However, if the function is called as a standalone function, the “this” keyword refers to the global object.

In order to avoid this, developers often use the “bind” method, “call” method or “apply” method to explicitly set the value of “this” keyword.

let car = {
    make: "Toyota",
    model: "Camry",
    year: 2020,
    color: "white"
};
let drive = function(){
    console.log(`The ${this.make} ${this.model} is driving`);
}
drive.call(car);

Output

The Toyota Camry is driving

Another important concept related to objects in JavaScript is “Object destructuring” introduced in ES6. It is a convenient way to extract properties from an object and assign them to variables.

This can be useful when you want to work with only a few properties of an object, and you don’t want to create a separate variable for each property.

let car = {
    make: "Toyota",
    model: "Camry",
    year: 2020,
    color: "white"
};
let {make, model} = car;
console.log(make);
console.log(model);

Output

“Toyota”

“Camry”

Conclusion

In conclusion, objects in JavaScript are a fundamental data type that allows you to store and organize data in a structured way.

If you liked this post, then please share this with your friends and make sure to bookmark this website for more awesome content.