Converting {} object to [] arrays

In JavaScript, we often find the need to extract keys, values or pairs of them from an object. There are various approaches to this task, including the use of for...in loops and methods associated with the Object option. In this article, we will discuss both of these methods and compare their functionality.

Loop "for...in" - traditional view

The first way to pull keys, values or key-value pairs from an object is to use the for...in a loop. Below is an example of using this loop to pull keys from an object:

const user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

for (let key in user) {
  console.log(key);
}

In the above code, we iterate through each key in the "user" object using a for...in loop. For each key, we display it in the console. As a result, we get the following result:

name
age
email

This is a traditional approach that can be useful in some situations. However, there is a more modern solution, which offers the Object option.

Object related methods

The Object provides us with three useful methods for extracting keys, values and key-value pairs from an object: Object.keys(), Object.values() and Object.entries(). Below are examples of their use:

Wyciąganie kluczy za pomocą Object.keys()

const user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

const userKeys = Object.keys(user);

console.log(userKeys);

The code above uses the Object.keys() method, which returns an array containing all the keys from the "user" object. The result is the following array: ["name", "age", "email"].

Tired of reading? Watch this video to see how Wojtek makes things quick and easy (available in Polish only).

Wyświetl ten post na Instagramie

Post udostępniony przez Ragnarson (@ragnarsoncom)

Extracting values using Object.values()

const user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

const userValues = Object.values(user);

console.log(userValues);

The Object.values() method allows us to get an array containing all the values from the "user" object. The result of this code will look like this: ["John", 30, "john@example.com"].

Extracting key-value pairs using Object.entries()

const user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

const userKeysValues = Object.entries(user);

console.log(userKeysValues);

If you use the Object.entries() method, you will get an array that contains key-value pairs for each element of the "user" object. The result will look as follows:

[  ["name", "John"],
  ["age", 30],
  ["email", "john@example.com"]
]

Summary

Extracting keys, values and key-value pairs from an object in JavaScript can be accomplished in several ways. The traditional approach is to use a "for...in" loop, whose task is to iterate through the object's keys. However, a better approach is to use methods associated with the Object object. Object.keys(), Object.values() and Object.entries() methods allow us to quickly and conveniently get keys, values or key-value pairs from an object. They make our code more readable and easier to understand.