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.
Revise Objects & Arrays in JavaScript
Just like we use hashmaps in C++ that store data in the form of “key-value” 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.
For example, we have defined an object “car” with various properties below:
let car = {
name: "WagonR",
model: 2015,
price: 340000
};
Several properties such as name, model, and price are defined for the object “car”. The name, model, and price here indicate the keys, and “WagonR”, 2015 and 340000 are the values corresponding to the related keys.
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.
Let us look at how to declare and use arrays in Javascript.
//declaring an integers array
let marks = [98, 75, 62, 82, 97, 53];
//declaring a characters array
let grades=['A', 'B', 'A', '0'];
//declaring a strings array
let favtutors=["John", "Joshua", "Alex", "Kate"];
//declaring a boolean array
let present=[true, false, false, true];
In 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.
Let’s now do the conversion of Object to Array using some of the different approaches.
5 Methods to Convert an Object to Array in JavaScript
In this section, we will look into various methods to convert an object to an array in Javascript. Let us get started!
1) Using for…in loop
We can use the for…in 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.
Let us see an example of the same:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store object keys
let studentKeysArray=[];
//declaring variable to store values corresp. to keys
let studentValuesArray=[];
//using for...in loop to traverse the object and store keys in array
for(let key in studentObject){
//adding the keys in array
studentKeysArray.push(key);
//adding the values in another array
studentValuesArray.push(studentObject[key]);
}
//printing the keys stored in an array
console.log(studentKeysArray);
//printing the values stored in array
console.log(studentValuesArray);Output:
{ name: 'John', rollNumber: 12 }
[ 'name', 'rollNumber' ]
[ 'John', 12 ]
In this example, we have iterated over the keys of the object. We have stored the keys of the object in the array “studentKeysArray”. We have stored the values corresponding to the keys in a separate array “studentValuesArray”.
2) Using for…of loop
Similar, to for…in, we can use for…of loop as well. Let us convert an object to array with the help of a for…of loop. Here’s an example of the same:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store object keys
let studentKeysArray=[];
//declaring a variable to store values corresp. to keys
let studentValuesArray=[];
//using for...of loop to iterate the object keys and store keys in an array
for(let key of Object.keys(studentObject)){
//adding the keys in the array
studentKeysArray.push(key);
//adding the values in another array
studentValuesArray.push(studentObject[key]);
}
//printing the keys stored in an array
console.log(studentKeysArray);
//printing the values stored in array
console.log(studentValuesArray);Output:
{ name: 'John', rollNumber: 12 }
[ 'name', 'rollNumber' ]
[ 'John', 12 ]
In this example, we have iterated over the keys of the object. We have stored the keys of the object in the array “studentKeysArray”. We have stored the values corresponding to the keys in a separate array “studentValuesArray”.
Let us see how we can iterate over the values of an object without accessing the keys:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store values corresp. to keys
let studentValuesArray=[];
//using for...of loop to iterate the object values and store values in the array
for(let value of Object.values(studentObject)){
//adding the values in another array
studentValuesArray.push(value);
}
//printing the values stored in array
console.log(studentValuesArray);Output
{ name: 'John', rollNumber: 12 }
[ 'John', 12 ]
We have obtained the desired result.
3) Using Object.keys()
Keys are typically used as the names of the identifiers to access the object’s properties. The Object.keys() method allows us to obtain the keys of an object and store them in an array. This method was introduced in ES6 and is supported in modern browsers.
Here’s an example:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store object keys
let studentKeysArray=Object.keys(studentObject);
//printing the keys of the object stored in array
console.log(studentKeysArray)Output:
{ name: 'John', rollNumber: 12 }
[ 'name', 'rollNumber' ]
In this example, we are storing the keys of the declared object in an array variable. The keys for the student object are “name” and “rollNumber”. The keys are hence stored in an array and we have obtained the desired result.
4) Using Object.values()
Values 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. This method was introduced in ES8 and is supported in modern browsers.
Here’s an example of this method to convert object to array in JavaScript:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store object values
let studentValuesArray=Object.values(studentObject);
//printing the values corresponding keys of the object stored in array
console.log(studentValuesArray)Output:
{ name: 'John', rollNumber: 12 }
[ 'John', 12 ]
In 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 “John” corresponding to the key “name” and “12” corresponding to the key “rollNumber”. The values are hence stored in an array and we have obtained the desired result.
5) Using Object.entries()
The 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. This method was also introduced in ES8 and is supported in modern browsers.
Here’s an example of this method:
//declaring an object
let studentObject={
name:'John',
rollNumber:12
};
//printing the object
console.log(studentObject);
//declaring a variable to store object entries(key-value pairs)
let studentEntriesArray=Object.entries(studentObject);
//printing the key-value pairs of the object stored in an array
console.log(studentEntriesArray)Output:
{ name: 'John', rollNumber: 12 }
[ [ 'name', 'John' ], [ 'rollNumber', 12 ] ]
In 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 “name: John” and “rollNumber:12”. The key-value pairs are hence stored in a 2D Array and we have obtained the desired result.
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.
With this array, you may have to get a string from that. Here is how to convert an array to a string in JavaScript.
Conclusion
In this article, we discussed the various techniques to convert an object to an array in JavaScript. It’s beneficial to know at least some methods as they come in very handy at times. This type of conversion is a critical skill that web developers needs to be aware of, be it object to array, array to string, etc.
