Iterating over an Object with forEach() in TypeScript

avatar
Borislav Hadzhiev

Last updated: Feb 27, 2024
2 min

banner

# Iterating over an Object with forEach() in TypeScript

To iterate over an object:

  1. Use the Object.keys() method to get an array of the object's keys.
  2. Use the Array.forEach() method to iterate over the array.
  3. Access each value using the current key.
index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; (Object.keys(obj) as (keyof typeof obj)[]).forEach((key, index) => { // ๐Ÿ‘‡๏ธ name Bobby Hadz 0, country Chile 1 console.log(key, obj[key], index); });

iterating over object with foreach

The code for this article is available on GitHub

The Object.keys() method returns an array of the object's keys.

index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; // ๐Ÿ‘‡๏ธ [ 'name', 'country' ] console.log(Object.keys(obj));

We used keyof typeof to set the type of Object.keys() to an array containing keys of obj, so we can safely access its values.

The function we passed to the Array.forEach method gets called with each element in the array.

The function also gets passed the index of the current iteration as shown in the examples.

# Iterating over an Object's entries with forEach()

This is a two-step process:

  1. Use the Object.entries() method to get an array of key-value pairs.
  2. Use the forEach() method to iterate over the array.
index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; Object.entries(obj).forEach(([key, value], index) => { // name Bobby Hadz 0 // country Chile 1 console.log(key, value, index); });

iterating over object entries with foreach

The code for this article is available on GitHub

The Object.entries() method returns an array of the given object's key-value pairs.

index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; // ๐Ÿ‘‡๏ธ const result: [string, string][] const result = Object.entries(obj); // ๐Ÿ‘‡๏ธ [['name', 'Bobby Hadz'], ['country', 'Chile']] console.log(result);

The forEach() method gets passed an array containing 2 elements on each iteration - the key and the value.

We can use destructuring to get the key and value directly.

index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; Object.entries(obj).forEach(([key, value], index) => { // name Bobby Hadz 0 // country Chile 1 console.log(key, value, index); });

We used destructuring assignment in the function's parameter list.

This is very similar to the following line of code.

index.ts
const [key, value] = ['name', 'Bobby Hadz']; console.log(key); // ๐Ÿ‘‰๏ธ "name" console.log(value); // ๐Ÿ‘‰๏ธ "Bobby Hadz"

We are basically assigning the array elements to variables (the order is preserved).

# Iterating over an Object's values with forEach()

You can also use the Object.values() method if you need to iterate directly over the object's values.

index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; Object.values(obj).forEach((value, index) => { // Bobby Hadz 0 // Chile 1 console.log(value, index); });

iterating over object values with foreach

The code for this article is available on GitHub

The Object.values() method returns an array of the object's values.

index.ts
const obj = { name: 'Bobby Hadz', country: 'Chile', }; const values = Object.values(obj); // ๐Ÿ‘‡๏ธ [ 'Bobby Hadz', 'Chile' ] console.log(values);

This is useful when you don't need to access the key of the current iteration.

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.

Copyright ยฉ 2024 Borislav Hadzhiev