The arrays and objects are the two most important data types in JavaScript. In this article, we will look into various methods to Covert Object to Array in JavaScript. We can store just the keys or just the values(corresponding to the keys) of an object in an array. We can even use a 2D array to store the key-value pairs of the object as a whole. Well, let us get started.<\/p>\n\n\n\n
Just like we use hashmaps in C++ that store data in the form of \u201ckey-value\u201d pairs, We use Objects in Javascript to store data in the same way, i.e. in the form of key-value pairs. So, all in all, Objects are non-primitive data types in Javascript that store an unordered collection of key-value pairs. The association between key values is called property, so objects are a collection of properties.<\/p>\n\n\n\n
For example, we have defined an object \u201ccar\u201d with various properties below:<\/p>\n\n\n\n
let car = {\n name: \"WagonR\",\n model: 2015,\n price: 340000\n};\n<\/code><\/pre>\n\n\n\nSeveral properties such as name, model, and price are defined for the object \u201ccar\u201d. The name, model, and price here indicate the keys, and \u201cWagonR\u201d, 2015 and 340000 are the values corresponding to the related keys.<\/p>\n\n\n\n
On the other hand, Arrays are linear data structures that store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings. <\/p>\n\n\n\n
Let us look at how to declare and use arrays in Javascript.<\/p>\n\n\n\n
\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring a characters array\nlet grades=['A', 'B', 'A', '0'];\n\n\/\/declaring a strings array\nlet favtutors=[\"John\", \"Joshua\", \"Alex\", \"Kate\"];\n\n\/\/declaring a boolean array\nlet present=[true, false, false, true];\n<\/code><\/pre>\n\n\n\nIn the code above, we have made integers array marks containing all integers, a characters array grade consisting of all elements as characters, a strings array favtutors consisting of all strings, and a boolean present array consisting of all boolean values.<\/p>\n\n\n\n
Let’s now do the conversion of Object to Array using some of the different approaches.<\/p>\n\n\n\n
5 Methods to Convert an Object to Array in JavaScript<\/strong><\/h2>\n\n\n\nIn this section, we will look into various methods to convert an object to an array in Javascript. Let us get started!\u00a0<\/p>\n\n\n\n
1) Using for…in loop<\/strong><\/h3>\n\n\n\nWe can use the for\u2026in loop to iterate over the keys of an object and store the keys and values of the object in separate arrays. This is a naive approach to convert object to array in JavaScript.<\/p>\n\n\n\n
Let us see an example of the same:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store object keys\nlet studentKeysArray=[];\n\n\/\/declaring variable to store values corresp. to keys\nlet studentValuesArray=[];\n\n\/\/using for...in loop to traverse the object and store keys in array\nfor(let key in studentObject){\n \/\/adding the keys in array\n studentKeysArray.push(key);\n \/\/adding the values in another array\n studentValuesArray.push(studentObject[key]);\n}\n\n\/\/printing the keys stored in an array\nconsole.log(studentKeysArray);\n\n\/\/printing the values stored in array\nconsole.log(studentValuesArray);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ 'name', 'rollNumber' ]\n[ 'John', 12 ]\n<\/code><\/pre>\n\n\n\nIn this example, we have iterated over the keys of the object. We have stored the keys of the object in the array \u201cstudentKeysArray\u201d. We have stored the values corresponding to the keys in a separate array \u201cstudentValuesArray\u201d. <\/p>\n\n\n\n
2) Using for\u2026of loop<\/strong><\/h3>\n\n\n\nSimilar, to for…in, we can use for…of loop as well. Let us convert an object to array with the help of a for\u2026of loop. Here\u2019s an example of the same:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store object keys\nlet studentKeysArray=[];\n\n\/\/declaring a variable to store values corresp. to keys\nlet studentValuesArray=[];\n\n\/\/using for...of loop to iterate the object keys and store keys in an array\nfor(let key of Object.keys(studentObject)){\n \/\/adding the keys in the array\n studentKeysArray.push(key);\n \/\/adding the values in another array\n studentValuesArray.push(studentObject[key]);\n}\n\n\/\/printing the keys stored in an array\nconsole.log(studentKeysArray);\n\n\/\/printing the values stored in array\nconsole.log(studentValuesArray);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ 'name', 'rollNumber' ]\n[ 'John', 12 ]\n<\/code><\/pre>\n\n\n\nIn this example, we have iterated over the keys of the object. We have stored the keys of the object in the array \u201cstudentKeysArray\u201d. We have stored the values corresponding to the keys in a separate array \u201cstudentValuesArray\u201d. <\/p>\n\n\n\n
Let us see how we can iterate over the values of an object without accessing the keys:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store values corresp. to keys\nlet studentValuesArray=[];\n\n\/\/using for...of loop to iterate the object values and store values in the array\nfor(let value of Object.values(studentObject)){\n \/\/adding the values in another array\n studentValuesArray.push(value);\n}\n\n\/\/printing the values stored in array\nconsole.log(studentValuesArray);<\/pre><\/div>\n\n\n\nOutput<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ 'John', 12 ]\n<\/code><\/pre>\n\n\n\nWe have obtained the desired result.<\/p>\n\n\n\n
3) Using Object.keys()<\/strong><\/h3>\n\n\n\nKeys are typically used as the names of the identifiers to access the object\u2019s properties. The Object.keys() method allows us to obtain the keys of an object and store them in an array. <\/strong>This method was introduced in ES6 and is supported in modern browsers.<\/p>\n\n\n\nHere\u2019s an example:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store object keys\nlet studentKeysArray=Object.keys(studentObject);\n\n\/\/printing the keys of the object stored in array\nconsole.log(studentKeysArray)<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ 'name', 'rollNumber' ]\n<\/code><\/pre>\n\n\n\nIn this example, we are storing the keys of the declared object in an array variable. The keys for the student object are \u201cname\u201d and \u201crollNumber\u201d. The keys are hence stored in an array and we have obtained the desired result.<\/p>\n\n\n\n
4) Using Object.values()<\/strong><\/h3>\n\n\n\nValues represent the values corresponding to the keys in an object. The Object.values() method allows us to obtain the values corresponding to the keys of an object and store them in an array.<\/strong> This method was introduced in ES8 and is supported in modern browsers.<\/p>\n\n\n\nHere\u2019s an example of this method to convert object to array in JavaScript:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store object values\nlet studentValuesArray=Object.values(studentObject);\n\n\/\/printing the values corresponding keys of the object stored in array\nconsole.log(studentValuesArray)<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ 'John', 12 ]\n<\/code><\/pre>\n\n\n\nIn this example, we are storing the values corresponding to the keys of the declared object in an array variable. The values for the student object are \u201cJohn\u201d corresponding to the key \u201cname\u201d and \u201c12\u201d corresponding to the key \u201crollNumber\u201d. The values are hence stored in an array and we have obtained the desired result.<\/p>\n\n\n\n
5) Using Object.entries()<\/strong><\/h3>\n\n\n\nThe key-value pairs as a whole are called entries. The Object.entries() method is used to convert the key-value pairs of an object as entities to a 2D array. <\/strong>This method was also introduced in ES8 and is supported in modern browsers.<\/p>\n\n\n\nHere\u2019s an example of this method:<\/p>\n\n\n\n
\/\/declaring an object\nlet studentObject={\n name:'John',\n rollNumber:12\n};\n\n\/\/printing the object\nconsole.log(studentObject);\n\n\/\/declaring a variable to store object entries(key-value pairs)\nlet studentEntriesArray=Object.entries(studentObject);\n\n\/\/printing the key-value pairs of the object stored in an array\nconsole.log(studentEntriesArray)<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n{ name: 'John', rollNumber: 12 }\n[ [ 'name', 'John' ], [ 'rollNumber', 12 ] ]\n<\/code><\/pre>\n\n\n\nIn this example, we are storing the key-value pairs of the declared object in a 2D Array variable. The key-value pairs for the student object are \u201cname: John\u201d and \u201crollNumber:12\u201d. The key-value pairs are hence stored in a 2D Array and we have obtained the desired result.<\/p>\n\n\n\n
Note that The Object.keys() method is widely supported in all modern browsers, including Internet Explorer 9 and above but the Object.values() and Object.entries() methods have slightly less browser support. <\/p>\n\n\n\n