How to Convert an Object to an Array in TypeScript

Convert an Object to an Array in TypeScript #

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

Object.keys() - returns an array containing the object's keys.
Object.values() - returns an array containing the object's values.
Object.entries() - returns an array containing key-value pair arrays.

index.ts

Copied!
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

Copied!
// 👇️️ ['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

Copied!
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

Copied!
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

Copied!
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

Copied!
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

Copied!
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

Copied!
const arr = [
  ['name', 'Tom'],
  ['country', 'Chile'],
] as const;

const map = new Map(arr);

console.log(map); // 👉️ {'name', 'Tom', 'country' => 'Chile'}

How to Convert an Object to an Array in TypeScript

Convert an Object to an Array in TypeScript #

Borislav Hadzhiev