JavaScript Objects: A Comprehensive Guide

In JavaScript, objects play an important role in organizing and managing data. In this blog post, we’ll learn about JavaScript objects, their methods and their properties.

Let’s start!

What are JavaScript Objects?

In JavaScript, objects allow you to store and organize data in a structured way. Objects are collections of key-value pairs, where each key is a string, symbol or number and each value can be of any data type, including other objects, functions, and primitive values.

For example, think of a car. It’s an object, with the properties like color, model and manufacture year.

In the above example, the term ‘car’ represents an object. Within this context, ‘color,’ ‘modelName’, and ‘yearOfManufacture’ its keys, while the associated values linked to these keys are ‘black’, ‘Fortuner’ and ‘2021’ respectively.

To put it simply, a JavaScript object is like a container that lets you store and organize properties and methods related to something.

Objects are used for representing complex data structures, organizing code, and creating classes and instances through object-oriented programming.

Creating Objects

In JavaScript, there are the following ways to create objects.

1: Object literal

In this way, you can create an object using object literal i.e., curly braces.

Example:

In the above example, person is an object with the properties such as firstName, lastName and age.

You can also add functions to the object. For example:

2: Constructor function

This is the most used way to create objects. Using new keyword, the constructor function allows creation of multiple objects.

For example:

Output:

3: Factory function

Factory functions are functions that return objects. You can create objects using factory functions.

For example:

Output:

4: Object.create()

Using Object.create() method, you can create a new object using an existing object as the prototype for the newly created object.

For example:

Output:

5: ES6 class syntax

You can use the class keyword to define a constructor and methods for objects.

For example:

Output:

You can learn more about classes here.

Object Properties

Object properties are key-value pairs. Properties allow you to store and access data within an object. Properties can usually be changed, added, and deleted.

1:Accessing Properties

You can access the properties of an object using dot notation or square brackets.
For example:

2:Modifying Properties

Objects are mutable, so you can modify the value of a property by assigning a new value to it.
For example:

3:Adding Properties

You can add new properties to an object as follows:

4:Checking the Presence of a Property

You can check if an object has a specific property using the following methods. They give the output in true or false.

  • hasOwnProperty method
  • in operator

5:Deleting Properties

You can use the delete operator to remove a property from an object.

6:Looping through Properties

You can loop through an object’s properties using the following methods.

  • for...in loop
    The for…in loop iterates over the properties of an object.

The for...in loop iterates over all the properties, even the ones it gets from the prototype chain. To avoid unintended iteration over inherited properties, you can check if each property belongs only to the object by using the hasOwnProperty method.
For example:

  • Object.keys
    This method returns the array of keys of an object.

Looping through keys:
You can loop through keys using for...Each loop.

  • Object.values
    This method returns the array of values of an object.

Looping through values:
You can loop through values using for...Each loop.

  • Object.entries
    This method returns the array of key-value pairs of an object.

Looping through keys and values:
You can loop through keys and values using for...Each loop.

Nested Objects

If you create an object, in which, an object is used as a value of the object, then this refers to a nested object. This is used for organizing and structuring complex data hierarchies.

For example:

In the above example, the person object contains a nested object called addressaddress contains another nested object called contact. This structure allows you to access the properties of the nested objects using dot notation.

Object Destructuring

Object destructuring in JavaScript is a way to extract specific properties from an object and assign them to variables. It’s a handy shortcut that lets you access object properties without typing out long dot notation every time.
For example:

Without destructuring

With destructuring

You can also assign different variable names to the extracted properties. For example:

Object Spread Operator

If you want to create an object by copying the properties of an existing object and adding or modifying properties as needed, then you can use the spread ... operator.

For example:

You can also merge multiple objects using the spread operator. For example:

Note: When you combine objects using the spread operator, if they have properties with the same name, the properties from the last object you add will replace the ones from the earlier objects. For example:

this Keyword

The this keyword refers to the current object that a method is being called on.

It represents the object that a function or method belongs to and helps to access the object’s properties and methods from within its functions.

Conclusion

In the preceding blog post, we’ve learned about JavaScript objects, exploring topics such as object creation, properties, nested structures, the object spread operator, object destructuring, and the use of the ‘this’ keyword.

Thanks for reading!

Keep coding!

For more content like this click here!

1 thought on “JavaScript Objects: A Comprehensive Guide”

Leave a Comment