Create an array of all values in an object
Tags: javascript, beginners, tutorial
Published: 2023-01-23 00:42:18


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:

```javascript
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`:

```javascript
[
  "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:

``` javascript
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`:

```javascript
[
  "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 us get the value of each property. Let's jump in to an example:

```javascript
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`:

```javascript
[
  "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.