What are objects?? 🧐
- An object is a list of items that are stored in the form of key-value pairs.
- The value stored in the object can be of any valid type in Javascript.
Declaring an object
//Sample Object
const user = {
name: 'abc',
email: 'abc@.com',
age: 21,
company:'Floxus'
};
In this object, name, email, age, company are the keys, and abc, abc@.com, 21, Floxus are the values.
How do we iterate over objects? 🤔
If you have an array that is considered to be an object in javascript, you can not loop through the array using map(), forEach(), or a for..of loop.
So what to do now???
The various methods that can be used to loop through objects in JavaScript are:
Object.keys method
Object.values method
Object.entries method
Before ES6, the only way to loop through an object was through using the for...in loop.
When these methods will be used
- In many cases, you may find it necessary to convert your object data into array data.
- Particularly if you want to make use of all of the different array methods to transform your data in a more dynamic way.
- for...in fails here,
- But with the help of some built-in Object methods, you can convert objects into arrays in three different ways. These methods are Object.keys, Object.values and Object.entries.
Now let's code 😎
Object.keys()
- The object.keys function is used to pick only keys or property labels of objects and returns an array containing all properties names (or keys).
- After which you can use any of the array looping methods, such as forEach(), to iterate through the array and retrieve the value of each property.
Example
const user = {
name: 'abc',
email: 'abc@.com',
age: 21,
company:'Floxus'
};
// convert object to key's array
const keys = Object.keys(user);
// print all keys
console.log(keys); //['name', 'email', 'age', 'company']
// iterate over object
keys.forEach((key, index) => {
console.log(`${key}: ${user[key]}`);
});
// name: 'abc',
// email: 'abc@.com',
// age: 21,
// company:'Floxus'
Object.values()
- It returns the values of all properties in the object as an array.
- You can then loop through the values array by using any of the array looping methods.
Example
const user = {
name: 'abc',
email: 'abc@.com',
age: 21,
company:'Floxus'
};
// convert object to values array
const values = Object.values(user);
// print all values
console.log(values); //['abc', 'abc@.com', '21', 'Floxus']
// iterate over an object
Object.values(user).forEach(val => console.log(val));
// abc
// abc@.com
// 21
// Floxus
Object.entries()
- Object.entries() creates a nested array of the key and value pairs of an object.
- Once we have the key and value pair arrays, we can use the forEach() method to loop through and work with the results.
Example
const user = {
name: 'abc',
email: 'abc@.com',
age: 21,
company:'Floxus'
};
// convert object to array
const entries = Object.entries(user);
// print all entries
console.log(entries);
//[['name', 'abc'], ['email', 'abc@.com'], ['age', 21],['company','Floxus']]
// iterate over object
Object.entries(user).forEach(([key, value]) => {
console.log(`${key}: ${value}`)
});
// name: abc,
// email: abc@.com,
// age: 21,
// company:Floxus