Floxus Education Team Blogs

Floxus Education Team Blogs

Javascript Object Methods

Photo by Claudio Schwarz on Unsplash

Javascript Object Methods

Floxus Education's photo
Floxus Education
·Jun 19, 2022·

3 min read

Table of contents

  • What are objects?? 🧐
  • How do we iterate over objects? 🤔
  • Object.keys()
  • Object.values()
  • Object.entries()

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
 
Share this