Borislav Hadzhiev
Last updated: Feb 23, 2022
Photo from Unsplash
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.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.
// 👇️️ ['one', 'two'] console.log(Object.keys({one: 1, two: 2}));
You can then iterate over the array of keys in the following way:
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.
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.
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.
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.
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.
const arr = [ ['name', 'Tom'], ['country', 'Chile'], ] as const; const map = new Map(arr); console.log(map); // 👉️ {'name', 'Tom', 'country' => 'Chile'}