How To Get An Object’s Values As Array In JavaScript

Get an Object's Values as Array in JavaScript

We can get an object’s values ​​as array in JavaScript by using three methods: using Object.values(), Object.keys(), and Array.map(). Read on to learn how to use these methods in detail.

Get an object’s values as array in JavaScript

Here are three ways we would recommend to you. Please read them carefully and then apply them to your case.

Using Object.values()

In a previous post, we’ve already covered the syntax of Object.values(). To learn more, click here.

This function returns all object values as an array. Look at the example below to learn how to use Object.values().

const resources = {
    learn: 'learnshareit.com',
    sourceCode: 'github.com',
    video: 'youtube.com',
    book: 'scribd.com'
}
    
// Get all values of the resources using Object.values()
const resourceValues = Object.values(resources)
console.log(resourceValues)

Output:

[ 'learnshareit.com', 'github.com', 'youtube.com', 'scribd.com' ]

Using Object.keys() and Array.map()

The syntax of Object.keys() is also discussed here. You can learn more about the syntax of the map() here.

You’ve probably seen Object.keys() before. It returns all the keys of a given object as an array. You may not know that you can get all values ​​of an object as an array by using this function.

To do this, you would first get all the object keys using Object.keys() and then use Array.map() to map each key to its corresponding value. Like this:

const resources = {
    learn: 'learnshareit.com',
    sourceCode: 'github.com',
    video: 'youtube.com',
    book: 'scribd.com'
}

// Get all keys of the resources using Object.keys()
const resourceKeys = Object.keys(resources)

// Map each key to its corresponding value using map()
const resourceValues = resourceKeys.map(key => resources[key])
console.log(resourceValues)

Output:

[ 'learnshareit.com', 'github.com', 'youtube.com', 'scribd.com' ]

Using for…in and push()

The for…in statement iterates over all properties of an object. The push() method adds an element to the end of an array. Together, we can use these two things to do what we want: get all of the object’s values as an array.

First, we loop over the object with for…in. Next, use the key in each iteration to push the object’s value into a new array. For example:

const resources = {
    learn: 'learnshareit.com',
    sourceCode: 'github.com',
    video: 'youtube.com',
    book: 'scribd.com'
}
    
// Create a variable to hold the value pushed in
const resourceValues = []

// Push values into a new array with the for...in and push()
for (let key in resources) {
    resourceValues.push(resources[key])
}

console.log(resourceValues)

Output:

[ 'learnshareit.com', 'github.com', 'youtube.com', 'scribd.com' ]

Summary

Now you know three methods to get an oject’s values as array in JavaScript. If you need fast and clean, use Object.values(); this function is designed for that purpose. If you have any questions about this article, please comment below. We’ll respond to all your questions.

Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *