Articles by FavTutor
  • AI News
  • Data Structures
  • Web Developement
  • AI Code GeneratorNEW
  • Student Help
  • Main Website
No Result
View All Result
FavTutor
  • AI News
  • Data Structures
  • Web Developement
  • AI Code GeneratorNEW
  • Student Help
  • Main Website
No Result
View All Result
Articles by FavTutor
No Result
View All Result
Home Web Developement

Convert Object to Array in JavaScript (with code)

Komal Bhatia by Komal Bhatia
November 30, 2023
Reading Time: 8 mins read
Convert Object to Array JavaScript
Follow us on Google News   Subscribe to our newsletter

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.

ShareTweetShareSendSend
Komal Bhatia

Komal Bhatia

I am a dedicated Computer Science student with a strong track record of academic excellence. I am a highly motivated individual with a passion for providing creative and innovative solutions to complex problems. I possess skills in the domain of C++ and web development and am always eager to contribute to the field of Software Development.

RelatedPosts

Javascript Animation Libraries

Top 10 JavaScript Animation Libraries in 2025

February 19, 2025
JavaScript Interview Questions

Top 40 JavaScript Interview Questions and Answers in 2024

April 1, 2025
Best React UI Component Libraries

10 Must-Know React UI Component Libraries for Web Devs 2024

May 7, 2024
Currying in JavaScript

Currying in JavaScript Explained (with Examples)

March 15, 2024
Javascript Format Currency

Javascript Program for Format Currency

April 8, 2025

About FavTutor

FavTutor is a trusted online tutoring service to connects students with expert tutors to provide guidance on Computer Science subjects like Java, Python, C, C++, SQL, Data Science, Statistics, etc.

Categories

  • AI News, Research & Latest Updates
  • Trending
  • Data Structures
  • Web Developement
  • Data Science

Important Subjects

  • Python Assignment Help
  • C++ Help
  • R Programming Help
  • Java Homework Help
  • Programming Help

Resources

  • About Us
  • Contact Us
  • Editorial Policy
  • Privacy Policy
  • Terms and Conditions

Website listed on Ecomswap. © Copyright 2025 All Rights Reserved.

No Result
View All Result
  • AI News
  • Data Structures
  • Web Developement
  • AI Code Generator
  • Student Help
  • Main Website

Website listed on Ecomswap. © Copyright 2025 All Rights Reserved.