TypeError: forEach is not a function in JavaScript

# Table of Contents

1. Solving the error when working with objects
2. Convert the value to an Array before calling forEach()
3. Check if the value is the correct type before calling forEach()

# TypeError: forEach is not a function in JavaScript

The "TypeError: forEach is not a function" error occurs when we call the forEach() method on a value that is not of type array, Map, or Set.

To solve the error, make sure to only call the forEach method on arrays, Map or Set objects.

Here is an example of how the error occurs.

Copied!
const obj = {
  name: 'James',
  country: 'Chile',
};

// ⛔️ TypeError: object.forEach is not a function
obj.forEach(element => {
  console.log(element);
});

We called the forEach() method on an object which caused the error.

# Solving the error when working with objects

Use the Object.keys() method if you need to iterate over an object.

Copied!
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ ['name', 'country']
console.log(Object.keys(obj));

Object.keys(obj).forEach(key => {
  console.log(key); // 👉️ name, country
  console.log(obj[key]); // 👉️ James, Chile
});

You can also use the Object.values() method to get an array of the object's values.

Copied!
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ ['James', 'Chile']
console.log(Object.values(obj));

Object.values(obj).forEach(value => {
  console.log(value); // 👉️ James, Chile
});

If you only care about the values of the object, get an array of the object's values using the Object.values() method.

If you need the keys and values of an object in an array, use the Object.entries() method.

Copied!
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ [['name', 'James'], ['country', 'Chile']]
console.log(Object.entries(obj));

Object.entries(obj).forEach(([key, value]) => {
  console.log(key); // 👉️ name, country
  console.log(value); // 👉️ James, Chile
});

The Object.entries() method returns an array of arrays, where the inner arrays consist of 2 elements - the key and the value.

# Convert the value to an Array before calling forEach()

There are many array-like objects, e.g. Set objects and the value returned from Array.from() that don't implement the Array.forEach() method.

Copied!
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ Uncaught TypeError: boxes.forEach is not a function
boxes.forEach(element => {
  console.log(element);
});

The getElementsByClassName() method returns an array-like object (not an array). Trying to call the Array.forEach method on the array-like object causes the error.

To solve the error, use the Array.from() method to convert the value to an array.

Copied!
// 👇️ with DOM elements
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// 👇️ convert to array with Array.from()
Array.from(boxes).forEach(element => {
  console.log(element);
});

We used the Array.from method to convert the array-like object to an array before calling the forEach() method.

You can also use the spread syntax (...) to convert a value to an array before calling forEach().

Copied!
const set = new Set(['bobby', 'hadz', 'com']);

const arr = [...set];

arr.forEach(element => {
  // bobby
  // hadz
  // com
  console.log(element);
});

We used the spread syntax (...) to unpack the values of a Set object into an array to be able to use the Array.forEach() method.

# Check if the value is the correct type before calling forEach()

Alternatively, you could check if the value is of the correct type before calling the forEach method.

Copied!
const arr = null;

// ✅ Check if the value is an array
if (Array.isArray(arr)) {
  arr.forEach(element => {
    console.log(element);
  });
}

We used the Array.isArray() method to check if the arr variable stores an array.

The forEach() method is only called if the variable stores an array.

You can use the instanceof operator if you need to check if a value is a Map object before calling Map.forEach().

Copied!
const map = new Map([
  ['first', 'bobby'],
  ['last', 'hadz'],
]);

// ✅ Check if the value is a `Map` object before calling `forEach()`
if (map instanceof Map) {
  map.forEach((value, key) => {
    // first bobby
    // last hadz
    console.log(key, value);
  });
}

The instanceof operator will return true if the value is a Map object and false otherwise.

The forEach() method is only called if the variable stores a Map.

The same approach can be used to check if a variable stores a Set object before calling Set.forEach().

Copied!
const set = new Set(['bobby', 'hadz', 'com']);

if (set instanceof Set) {
  set.forEach(element => {
    // bobby
    // hadz
    // com
    console.log(element);
  });
}

The if block only runs if the value is a Set object.

If the "forEach is not a function" error persists, console.log the value you're calling the forEach() method on and make sure the value is an array, a Map object or a Set, depending on your use case.

If the value is fetched from a remote server, make sure you have parsed the JSON to a native JavaScript array before calling the forEach method.

# Solve the error if using local storage

If you use local storage to store an array, make sure to parse the array before calling the Array.forEach() method.

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

localStorage.setItem('site', JSON.stringify(arr));

const arrAgain = JSON.parse(localStorage.getItem('site'));
console.log(arrAgain); // 👉️ ['bobby', 'hadz', 'com']

arrAgain.forEach(element => {
  // bobby
  // hadz
  // com
  console.log(element);
});

We used the JSON.stringify() method to convert an array to a JSON string and added the string to local storage.

The next step is to use the JSON.parse() method to parse the string into an array.

Lastly, we called the forEach() method on the array.