Convert object to array in Javascript

JavaScript, recognized for its versatility and wide-ranging capabilities as a programming language, offers numerous features to facilitate the transformation of an object into an array. These methods are built directly into the language. In this discussion, we will explore the various techniques available for converting objects to arrays in JavaScript.

In JavaScript, there are various techniques available for transforming an object into an array. Among these methods are Object.keys, Object.values, and Object.entries.

Examine the following examples to gain a better understanding of the methods discussed above.

Method 1: Object.keys

Example


const animal = {

    first: 'The',

    last: 'Lion'

};

const propertyNames=Object.keys(animal);

console.log(propertyNames);

Output:

Output


The Lion

In the preceding code example, the Object.keys method has been employed to transform the property names of the animal object into an array format. We have established a variable named animal, which contains the initial letters of both the first and last names of the animal object. Subsequently, we utilized the Object.keys method to convert these initials into an array.

Method 2: Object.values

Example


const animal = {

    first: 'The',

    last: 'Lion'

};

const propertyValues=Object.values(animal);

console.log(propertyValues);

Output:

Output


['The', 'Lion']

In this approach, we utilize the Object.values function to retrieve the properties from the animal object. The Object.values function transforms the specified animal object into an array, and the resulting output is displayed in the console as illustrated above.

Method 3: Object.entries

Example


const animal = {

    first: 'The',

    last: 'Lion'

};

const entries=Object.entries(animal);

console.log(entries);

Output:

Output


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

In this approach, the object is transformed into an array as illustrated in the output. The Object.entries method translates the enumerable properties of the object that are string-based into an array format. The result is displayed in this manner because the Object.entries method effectively captures each individual characteristic of the object, providing a clearer representation that aids in debugging by allowing you to identify which property corresponds to which string within the defined object.

Here are several prevalent methods for transforming an object into an array. The aforementioned techniques can be unified into a single code snippet, which allows for the collective application of these methods to the properties of the objects. Each property will be converted into its corresponding array. Below are examples that illustrate how to define objects collectively within one snippet.

Example


const Snakes = {

   'Cobra':{

         Venom: 96%,

      Attack: 99%

   },



   'Viper':{

      Venom: 98%,

      Attack: 96%

   },



   'InlandTaipan':{

      Venom: 100%,

      Attack: 100%

   }

}

In the preceding code segment, we have jointly established a constant variable named Snakes, with its attributes specified as venom and attack. Different values have been allocated to each property corresponding to various snake species. You can now apply all the previously outlined methods in conjunction with the keys, entries, or values.

Let’s examine additional coding examples to gain a deeper understanding of how to convert JavaScript objects into arrays. Take a look at the snippets provided below.

Example 1:

Example


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);

In this context, the values will be shown in accordance with the sequence of keys established within the object variable. Various numbers have been allocated to distinct key values, and the variable named convert will utilize the Object.keys method to associate these keys. Subsequently, the results will be presented in the console as arrays derived from the specified object variable.

Example 2:

Example


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);

In this context, we have established a variable referred to as superHeroes, which contains the object values displayed previously. Having already explored the three techniques for transforming an object into an array in JavaScript, we will utilize the same principles here to achieve the conversion into an array format.

Example 3:

Example


const sampleArray = [

  ['one', 1],

  ['two', 2],

];



Object.fromEntries(sampleArray);

Output:

Output


{ one: 1, two: 2 }

In the preceding example, we utilized an array alongside its associated properties and assigned values to them. The Object.entries method is employed to convert the object's properties into an array format, resulting in the output displayed.

Summary

In this article, we explored several techniques in JavaScript that allow the transformation of objects, whether they possess defined or undefined properties, into arrays of various types. We also examined widely-used methods such as keys, values, and entries, among others. The utility of these methods becomes evident when you consider their practical applications, as it is often necessary to obtain results in a structured or organized format. Furthermore, we can represent these objects as arrays to facilitate abstraction techniques, ensuring that only the relevant data is presented while excluding the rest.

Summary

Input Required