This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jason F
Suppose you want to create an array of all the values in an object. There is definitely more than one way to do that. We'll look at a few different approaches in this post.
Object.values() method
The Object.values static method was released in ECMASript 2017 aka ES8. This method accepts an object. It returns the objects enumberable property's values in an array.
Let's look at an example:
const obj = { a: 'hello', b: 'world', c: 'lorem', d: 'ipsum', e: 'dolor' };
const valuesArr = Object.values(obj);
console.log(valuesArr);
As you can see in the example, we passed in the obj object to the Object.values method. The returned value was assigned to valuesArr.
And here's the value of valuesArr:
[
"hello",
"world",
"lorem",
"ipsum",
"dolor"
]
Let's take a look at different way we could do this.
for...in statement
Another way to create an array of all the values in an object is to use the for...in statement. The statement goes all the way back to ES5, so, it's been around for a bit. This statement iterates over the enumerable String properties of an obect with the exclusion of the symbol properties.
Using the same object from earlier, let's check out an example:
const obj = { a: 'hello', b: 'world', c: 'lorem', d: 'ipsum', e: 'dolor' };
const valuesArr = [];
for (const prop in obj) {
valuesArr.push(obj[prop]);
}
console.log(valuesArr);
In the example we declare an empty array, valuesArr. We then use the for...in statement to iterate over the properties of our object, obj. The declaration, const prop in the for...in statement is actually the string property name of each property. Therefore, we can use that to access the value of each property like so: obj[prop]. We then push each value in to the valuesArr array.
And here are the values for valuesArr:
[
"hello",
"world",
"lorem",
"ipsum",
"dolor"
]
Let's check out one more way to create an array of all the values in an object.
Object.keys() method
The Object.keys static method was has been around since ES5. This static method returns the objects enumberable property's keys in an array. We can use the Array.map method to help is get the value of each property. Let's jump in to an example:
const obj = { a: 'hello', b: 'world', c: 'lorem', d: 'ipsum', e: 'dolor' };
const valuesArr = Object.keys(obj).map(key => obj[key])
console.log(valuesArr);
In the example we are chaining on the Array.map method which receives the key of each property in our object, obj. We use the key to access the value of each property, just like we did in the for...in statement. The values are returned and assgned to valuesArr.
Let's have a look at the value of valuesArr:
[
"hello",
"world",
"lorem",
"ipsum",
"dolor"
]
Conclusion
As I said in the intro, there's more than one way to create an array of all the values in an object in JavaScript. I didn't get in to the performance of these methods, but if that's something you'd be interested in, leave a comment below. If I didn't cover your preferred way of doing this, please share in a comment below.
Thank you for reading, until next time.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Jason F
Jason F | Sciencx (2023-01-23T00:42:18+00:00) Create an array of all values in an object. Retrieved from https://www.scien.cx/2023/01/23/create-an-array-of-all-values-in-an-object/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.