How to Convert an Object to an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 23, 2022

banner

Photo from Unsplash

Convert an Object to an Array in TypeScript #

There are three ways to convert an object to an array in TypeScript:

  1. Object.keys() - returns an array containing the object's keys.
  2. Object.values() - returns an array containing the object's values.
  3. Object.entries() - returns an array containing key-value pair arrays.
index.ts
const obj = { name: 'Tom', country: 'Chile' }; const keys = Object.keys(obj); console.log(keys); // 👉️ ['name', 'country'] const values = Object.values(obj); console.log(values); // 👉️ ['Tom', 'Chile'] const entries = Object.entries(obj); console.log(entries); // 👉️ [['name', 'Tom'], ['country', 'Chile']]

In the first example, we used the Object.keys method to get an array of the object's keys.

The method returns an array of strings where the keys of the object are in the same order as provided by a for...in loop.

index.js
// 👇️️ ['one', 'two'] console.log(Object.keys({one: 1, two: 2}));

You can then iterate over the array of keys in the following way:

index.ts
const obj = { name: 'Tom', country: 'Chile' }; const keys = Object.keys(obj) as (keyof typeof obj)[]; console.log(keys); // 👉️ ['name', 'country'] keys.forEach((key) => { // 👇️ name Tom, country Chile console.log(key, obj[key]); });

The second example shows how to use the Object.values method to get an array of the object's values.

index.ts
const obj = { name: 'Tom', country: 'Chile' }; const values = Object.values(obj); console.log(values); // 👉️ ['Tom', 'Chile']

Similarly to the keys method, the values are added to the array in the same order as that provided by a for...in loop.

The third example uses the Object.entries method, which returns a two dimensional array.

The nested arrays consist of 2 elements - the key and the value.

index.ts
const obj = { name: 'Tom', country: 'Chile' }; // 👇️ const entries: [string, string][] const entries = Object.entries(obj); console.log(entries); // 👉️ [['name', 'Tom'], ['country', 'Chile']]

You can conveniently iterate over the array of key-value pairs by using the forEach() method.

index.ts
const obj = { name: 'Tom', country: 'Chile' }; // 👇️ const entries: [string, string][] const entries = Object.entries(obj); console.log(entries); // 👉️ [['name', 'Tom'], ['country', 'Chile']] entries.forEach(([key, value]) => { // 👇️ name Tom, country Chile console.log(key, value); });

Notice that we used array destructuring to destructure the key and value from the array.

Here is a more an example that shows how array destructuring works.

index.ts
const arr = ['hello', 'world']; const [a, b] = arr; console.log(a); // 👉️ "hello" console.log(b); // 👉️ "world"

We are basically unpacking the array elements into variables. Note that the order is preserved.

There are many applications for an array of key-value pairs.

For example, you can use one to create a Map, which is a data structure very similar to the object, where the insertion order of keys is preserved and any value (objects and primitives) can be used as keys or values.

index.ts
const arr = [ ['name', 'Tom'], ['country', 'Chile'], ] as const; const map = new Map(arr); console.log(map); // 👉️ {'name', 'Tom', 'country' => 'Chile'}
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.