Javascript Object Methods

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

Javascript Object Methods

Comments

Javascript Basics

ES6 Features: write less, do more

More from this blog

ES6 Features: write less, do more

Say No to Create React App!

Getting Started with NodeJs

Best Practice To Manage Folder Structure For React.js

JavaScript Array Methods Detailed Review of forEach() ,map , filter() and reduce()

What are objects?? 🧐

Declaring an object

How do we iterate over objects? 🤔

So what to do now???

When these methods will be used

Object.keys()

Object.values()

Object.entries()

Command Palette

Comments

Javascript Basics

ES6 Features: write less, do more

More from this blog

What are objects?? 🧐

Declaring an object

How do we iterate over objects? 🤔

So what to do now???

When these methods will be used

Object.keys()

Object.values()

Object.entries()