Iterate over an Array or String with Index in TypeScript

# Table of Contents

1. Iterate over an Array with Index in TypeScript
2. Iterate over a String with Index in TypeScript

If you need to iterate over a String with Index, click on the second subheading.

# Iterate over an Array with Index in TypeScript

Use the forEach() method to iterate over an array with access to the current index.

The second parameter the callback function takes is the index of the element in the array.

Copied!
const arr: string[] = ['bobby', 'hadz', 'com'];

arr.forEach((element, index) => {
  // 👇️ bobby 0, hadz 1, com 2
  console.log(element, index);
});

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

The callback function gets passed the following 3 parameters:

1. The current element in the array.
2. The index of the element in the array.
3. The array on which the forEach() method was called.

The forEach() method returns undefined, so it is used to mutate an external variable.

# Iterate over an Array with Index using map()

If you need to loop over the array with an index but return a value on each iteration, use the Array.map method instead.

Copied!
const arr: string[] = ['bobby', 'hadz', 'com'];

const result = arr.map((element, index) => {
  return element + index;
});

// 👇️ ['bobby0', 'hadz1', 'com2']
console.log(result);

The function we passed to the map() method gets called with each element in the array and gets passed the same parameters as forEach().

# Iterate over an Array with Index using a for loop

An important thing to note when using the forEach() method is that you can't use the break keyword to break out of the loop.

If you have to use the break keyword to exit the loop if a condition is met, use a basic for loop instead.

Copied!
const arr: string[] = ['bobby', 'hadz', 'com'];

for (let index = 0; index < arr.length; index++) {
  // 👇️ bobby 0, hadz 1
  console.log(arr[index], index);

  if (index === 1) {
    break;
  }
}

A basic for loop is not as elegant as using forEach(), however, it enables us to use the break keyword to exit the loop once a condition is met.

# Iterate over a String with Index in TypeScript

If you need to iterate over a string with index:

1. Use the spread syntax (...) to unpack the string into an array.
2. Use the forEach() method to iterate over the array.
3. The second parameter the forEach() method takes is the index of the current element.

Copied!
const str = 'hello';

const arr: string[] = [...str];

console.log(arr); // 👉️ ['h', 'e', 'l', 'l', 'o']

arr.forEach((char, index) => {
  // 👇️ h 0, e 1, l 2, l 3, o 4
  console.log(char, index);
});

We used the spread syntax (...) to unpack the string into an array.

The array contains all of the characters in the string as elements.

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

The callback function gets passed the following 3 parameters:

1. The current element in the array.
2. The index of the element in the array.
3. The array on which we called the forEach() method.

# Iterate over a String with Index using a for loop

An important thing to note when using the forEach() method is that you can't use the break keyword to break out of the loop.

If you have to use the break keyword to break out of the loop if a condition is met, use a basic for loop instead.

Copied!
const str = 'hello';

for (let index = 0; index < str.length; index++) {
  // 👇️ h 0, e 1, l 2
  console.log(str[index], index);

  if (index === 2) {
    break;
  }
}

The break keyword enables us to exit the loop early and is not supported when using the forEach() method.

Other than that, the for loop is a little more verbose and is used less often in the real world as the language offers more abstractions on top of it.