How to loop through object in JavaScript ES6

JavaScript

In this post, we are going to learn how to loop through objects in JavaScript ES6 with examples. We have some object methods object. keys() that return an array of object keys, object. values() that return an array of values, and object.entries() keys values pair

1. object. keys() to loop through objects in JavaScript ES6

In this example, we have used an object.keys() method that returns an array of keys and loops through an array of keys using for-each loop. We get the key, we simply use the key and get the value based on the key Employee[key] will use. This is how to loop through objects in Javascript ES6 using the object.keys() method.

let Employee =    {Empname: 'Jack', salary: 60000,EmpID:1,Dep:'Admin',
"address": {"streetAddress": "United State","city": "New York"},
   
"ContactNumber": [{"type": "Home","number": "033 112-1311"},
                    {"Email":"Abc@devenum.com"}]}
 

Object.keys(Employee).forEach(key => {
  console.log(key,':',Employee[key]); 
});

Output

Empname : Jack
salary : 60000
EmpID : 1
Dep : Admin
address : { streetAddress: 'United State', city: 'New York' }
ContactNumber : [
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

2. object. entries() to loop through objects in JavaScript ES7

In this example, we have used an object.entries() method that returns an array of keys, and values and is used for-each loop to iterate through an array of keys and values. We are displaying the key and values using console.log(key,’:’, Val);.This is How to loop through objects in JavaScript ES6.

let Employee =    {Empname: 'Jack', salary: 60000,EmpID:1,Dep:'Admin',
"address": {"streetAddress": "United State","city": "New York"},
   
"ContactNumber": [{"type": "Home","number": "033 112-1311"},
                    {"Email":"Abc@devenum.com"}]}
 

Object.entries(Employee).forEach(([key, val]) => {
  console.log(key,':',val);        
   
});

//one line code
Object.entries(Employee).forEach(([key, val]) => console.log(key,':', val));

Output

Empname : Jack
salary : 60000
EmpID : 1
Dep : Admin
address : { streetAddress: 'United State', city: 'New York' }
ContactNumber : [
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

3. object.values to iterate over objects values

In this example, we have used for-each loop along with Object. values() to iterate over the object in javascript. Let us understand with an example. 

let Employee =    {Empname: 'Jack', salary: 60000,EmpID:1,Dep:'Admin',
"address": {"streetAddress": "United State","city": "New York"},
   
"ContactNumber": [{"type": "Home","number": "033 112-1311"},
                    {"Email":"Abc@devenum.com"}]}



Object.values(Employee).forEach(val => {
  console.log(val);
});

Output

Jack
60000
1
Admin
{ streetAddress: 'United State', city: 'New York' }
[
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

4. object. entries() with for of loop through objects in Javascript

In this example, we have used an object. entries() with a for-of loop to iterate over keys and values objects in Javascript and display key values using console.log(key,’:’, value).

let Employee =    {Empname: 'Jack', salary: 60000,EmpID:1,Dep:'Admin',
"address": {"streetAddress": "United State","city": "New York"},
   
"ContactNumber": [{"type": "Home","number": "033 112-1311"},
                    {"Email":"Abc@devenum.com"}]}
 

for (const [key, value] of Object.entries(Employee)) {
     console.log(key,':',value)
}

Output

Empname : Jack
salary : 60000
EmpID : 1
Dep : Admin
address : { streetAddress: 'United State', city: 'New York' }
ContactNumber : [
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

5. object.keys() with for-of loop through objects in Javascript

In this example, we have used the for-of and for-each loop to iterate over keys and values objects in Javascript and display key values using console.log(key,’:’, value)

for (key of Object.keys(Employee)) {

    console.log(key,':',Employee[key])
   
}

//Iterate over keys using foreach loop
Object.keys(Employee).forEach((key) => console.log(key,Employee[key]));

Output

Empname : Jack
salary : 60000
EmpID : 1
Dep : Admin
address : { streetAddress: 'United State', city: 'New York' }
ContactNumber : [
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

6. For in the loop to iterate over an object

In this example, we have iterated over the key-value pair of objects in Javascript by using a for-in loop.

let Employee =    {Empname: 'Jack', salary: 60000,EmpID:1,Dep:'Admin',
"address": {"streetAddress": "United State","city": "New York"},
   
"ContactNumber": [{"type": "Home","number": "033 112-1311"},
                    {"Email":"Abc@devenum.com"}]}
 

for (let key in Employee) {

    console.log(key,':',Employee[key])
   
}

Output

Empname : Jack
salary : 60000
EmpID : 1
Dep : Admin
address : { streetAddress: 'United State', city: 'New York' }
ContactNumber : [
  { type: 'Home', number: '033 112-1311' },
  { Email: 'Abc@devenum.com' }
]

Summary

In this post, we have learned how to loop through objects in JavaScript ES6 with examples by using different object methods object. keys() that return an array of object keys, object. values() that return an array of values, and object.entries() keys values pair.

Related Posts