Convert object to array in Javascript

Javascript, being a broad and varied-natured programming language consists of an ample amount of features to convert an object into an array. These methods are predefined in the language itself. Let's look at the different ways of converting objects to arrays in javascript.

To convert an object into an array in Javascript, you can use different types of methods. Some of the methods are Object.keys(), Object.values(),and Object.entries().

Consider the below examples to understand the above methods.

Method 1: Object.keys()

const animal = {
    first: 'The',
    last: 'Lion'
};
const propertyNames=Object.keys(animal);
console.log(propertyNames);

Output:

The Lion

In the above example code, we have used the Object.keys() method to convert the property's name of the animal object to an array. We have defined variable animal, which has the first and the last initials of the animal object and later we have converted them into an array through the help of Object.keys() method.

Method 2: Object.values()

const animal = {
    first: 'The',
    last: 'Lion'
};
const propertyValues=Object.values(animal);
console.log(propertyValues);

Output:

['The', 'Lion']

In this method, we have used the Object.values() method to fetch the properties of the animal object. The Object.values() method converts the defined object animal to an array and the output is printed on the console as shown above.

Method 3: Object.entries()

const animal = {
    first: 'The',
    last: 'Lion'
};
const entries=Object.entries(animal);
console.log(entries);

Output:

[['first', 'The '] , ['last', 'Lion'] ]

In this method, the object is converted into an array as shown in the output. The Object.entries() methods convert the enumerable string-based properties of the object to an array. The output is printed in such a way because the Object.entries() methods correctly defines every single aspect of the object in a better manner so that while debugging you can take note of which property is assigned to which string of the defined object.

These are some of the most common ways of converting an object to an array. The above ways can also be collectively defined into a single code snippet and the methods can also be collectively applied with the properties of the objects. They all will be converted into respective arrays. Consider below examples which show the usage of defining objects collectively into one snippet.

const Snakes = {
   'Cobra':{
         Venom: 96%,
      Attack: 99%
   },

   'Viper':{
      Venom: 98%,
      Attack: 96%
   },

   'InlandTaipan':{
      Venom: 100%,
      Attack: 100%
   }
}

In the above snippet, we have collectively defined the constant variable Snakes whose properties are defined as venom and attack. We have assigned different values to all the properties of different snakes. You can now use all the above-defined methods discussed along with the keys, entries, or values.

Let's look at some more different coding examples to understand more about the conversion of javascript objects to arrays. Consider the snippets below.

Example 1:

var object = {"0":5,"1":7,"2":4,"3":6,"4":7,"5":8,"6":12,"7":11,"8":2}
var covert  = Object.keys(object).map(function(key)
 {
  return [Number(key), object[key]];
});

console.log(convert);

Here, the values will be displayed according to the order of keys defined in the object variable. We have assigned different numbers for different key values and the variable convert will map these keys with the Object.keys() method and it will later be displayed on the console in the form of arrays of the defined object variable.

Example 2:

var superHeroes = {'Captain America':1,'Thor':8,'Iron Man':null};

//convert object keys to array
var k = Object.keys(superHeroes);

//convert object values to array
var v = Object.values(superHeroes);

Here, we have defined variable named superHeroes with the object values as shown above. As we have already studied the three methods of converting the object to an array in Javascript, we are applying the same concept here to convert them into the array.

Example 3:

const sampleArray = [
  ['one', 1],
  ['two', 2],
];

Object.fromEntries(sampleArray);

Output:

{ one: 1, two: 2 }

In the above example, we have taken an array with their respective properties and defined them with their values. Here, the Object.entries() method covers those properties of the object into an array as shown in the output.

Summary

In this article, we came across various methods in Javascript that can be used to convert objects with some indefinite or definite properties into arrays of different types. We also came across common methods like keys, objects, and entries, and some others to name a few. These methods are very useful once you consider their virtue of usage since in most of the cases it is required to get the output in an associated or say sorted manner. We may also define these objects by converting them into an array for carrying out abstraction methods so that only the desired data is displayed and not the other.

Next Topic#

← prev next →