Iterations on Objects

Amit Singh
Last Updated: May 13, 2022
Difficulty Level :
EASY

Introduction

Like many other programming languages, JavaScript is based on object-oriented programming concepts which is then essential to know how the iterations on objects take place. 

This article focuses on various ways or methods through which you can iterate over an object.

Before we begin, let us understand what is an Object in JavaScript? 

Object in JavaScript

An object in JavaScript can be compared to "objects" in the real world. It is the collection of properties. The association between a key (or name) and a value can be said to be a property. An object is an entity consisting of type and properties.

Almost “everything” in JavaScript is an object. All values in JavaScript, except primitives, are objects.

Now, let us see how we can loop over the objects: 

We can loop through objects in JavaScript in several ways as discussed below: 

  1. Using the For…in loop
  2. Object.keys() method
  3. Object.values() method
  4. Object.entries() method
  5. Object.getOwnPropertyNames() method

Now, let us go over them one by one: 

Ways/Methods To Loop Through Objects

For…in Loop

For…in Loop is used for iteration or repetition in JavaScript. During each iteration, you get an object key. That object key can be used to access the property value. 

Syntax

for (variable in object) {
  Statement to run
}

Let’s see an example:

Program:

let human = {
   first_name: 'Ken',
   last_name : 'Adams',
   age : '25',
   mobile_no : '123456789'
   };
   for (let key in human) {
   if(human.hasOwnProperty(key)) {
   console.log(`${key} : ${human[key]}`);
   }
}

 

 

 

The above code would result in outputting the following-

Object.keys() method

The Object.keys() method receives an object as an input and, as an output it returns an array of the object’s properties. This Object.keys() method was introduced in ES6. When we combine the Object.keys() method with the forEach(), we can access the keys and the values of an object. 

Syntax

Object.keys(obj)

 

Let’s see an example:

let human = {
   first_name: 'Ken',
   last_name: 'Adams',
   age: 23,
   mobile_no: '123456789'
};
Object.keys(human).forEach(key => {
   console.log(`${key}: ${human[key]}`);
});

The above code would result in outputting the following-

Object.values() method

This Object.values () method also takes an object as an input and returns an array consisting of the object’s values. Also, this method was introduced in ES7.

Syntax

Object.values(obj)

 

Let’s see an example,

Program:

let human = {
   first_name: 'Ken',
   last_name: 'Adams',
   age: 25,
   mobile_no: '123456789'
};
Object.values(human).forEach(value => {
   console.log(`${value}`);
});

 

The above code would result in outputting the following-

Object.entries() method

This Object.entries() method also takes an object as an argument and returns an array of the object’s enumerable string-key property [key, value] pairs.

Syntax

Object.entries(obj)

 

Let’s see an example,

Program:

let human = {
   first_name: 'Ken',
   last_name: 'Adams',
   age: 25,
   mobile_no: '123456789'
};
Object.entries(human).forEach(([key, value]) => {
   console.log(`${key}: ${value}`);
});

 

The above code would result in outputting the following-

Object.getOwnPropertyName() method

This Object.getOwnPropertyNames() method also accepts an object as an argument. It returns an array consisting of the object’s keys as an output, including non-enumerable properties except for those using the symbol. 

Syntax

Object.getOwnPropertyNames(obj)

 

Let’s see an example,

Program:

let human = {
   first_name: 'Ken',
   last_name: 'Adams',
   age: 25,
   mobile_no: '123456789'
};
Object.getOwnPropertyNames(human).forEach(key =>
   console.log(`${key}: ${human[key]}`)
);

 

The above code would result in outputting the following-

Frequently Asked Questions

What is the need for iteration on objects?
 

In programming, this process is essential such that you as a programmer would be able to perform the same task upon a JavaScript iterable object type such as an array, object, etc. This essentially cuts down the line of code for a small codebase and is a lifesaver for an extensively long list of values denoted as objects.

Why does JavaScript store almost everything in objects?


That's right: almost everything in JavaScript is an object. However, these objects are not the same as those found in Java, C++, or other traditional languages. In JS, an object is just a hashmap with key-value pairs. A key is always a string or a symbol, while a value can be anything from strings to integers to booleans to functions to other objects.

Why are iterators preferred in programming languages such as JavaScript?


The iterators are unique objects bound with a collection-based data type in JavaScript, such as an array or object. As such, these iterators are capable of programmatically iterating over a list of particular objects. The “for” looping process also internally utilizes these iterators.

How can we access an object’s inbuilt methods?


You can utilize (.), i.e., dot operator, to call upon the methods embedded within a particular object in JavaScript. For instance - 

     let human { … }

     > human.functionName(args);

Conclusion

In this article, we have studied various ways and methods for iterations on objects in JavaScript. We have learned about iterations on objects. 

We hope that this article has provided you with the help to enhance your knowledge regarding boxing and unboxing in javascript and if you would like to learn more, check out our articles on JavaScript BOMType Conversion in JavaScript, and Objects in JavaScript

Refer to our guided paths on Codestudio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available, Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Merry Learning!

Was this article helpful ?
0 upvotes