Home The Quantizer> JavaScript> JavaScript: ⚠️ Foreach is not a function [Solved ✅]

JavaScript: ⚠️ Foreach is not a function [Solved ✅]

Have you ever been programing along…minding your own business…when all of the sudden this error pops up

error
Uncaught TypeError:  myString.forEach is not a function

This happens when you try to ue forEach on an object that does not implement this function. So in the case of a string you may expect forEach to work and print out each character…but that is not correct.

Strings

const myString = "test string";

myString.forEach(element => console.log(element));
Output
Uncaught TypeError:  person.forEach is not a function

Solution for strings

A classic way to solve this in the case of a string is to just us a for loop that counts up to the length of the string and use the iterator to get the string index

const myString = "test string";

for (let i = 0; i < myString.length; i++){
    console.log("character at index " + i + " = " + myString[i]);
}

Output
character at index 0 = t
character at index 1 = e
character at index 2 = s
character at index 3 = t
character at index 4 =  
character at index 5 = s
character at index 6 = t
character at index 7 = r
character at index 8 = i
character at index 9 = n
character at index 10 = g

From document.getElement…

Another area it may be tempting to use forEach where it is not implemented is on the object returned when grabbing HTML elements using JavaScript. This too, sadly, will not work

document.getElementsByTagName("body").forEach(element => console.log(element));
Output
Uncaught TypeUncaught TypeError:  document.getElementsByTagName(...).forEach is not a function

Solution: You can use a query selector, get the chiled elements and convert it to an array like so

let body = document.querySelector('body').children;
let bodyArray = Array.from(body);
bodyArray.forEach((element) => console.log(element));
Output
<nav id="sidebar" class>…</nav><div id="header-wrapper">…</div><div class="highlightable">…</div></nav>

<section id="body">…</section>

Objects

Another place one may try and ues forEach in a way that will throw an error is when trying to enumerate an object. Take a look at the code example below.

const person = {
    name: "Bob",
    age: 42,
    heightIn: 73
};

person.forEach(element => console.log(element));
Output
Uncaught TypeError:  person.forEach is not a function

This may seam strange that we can not print out each element of an object like the person object in the code example above. However, JS does not implement forEach for objects but there are many options to iterator over an object, depending on what you are looking for.

Solution: Object by Key

    const person = {
        name: "Bob",
        age: 42,
        heightIn: 73
    };

    Object.keys(person).forEach(key => console.log("key: " + key));
Output
key: name
key: age
key: heightIn

Solution: Using an objects keys to get values

    const person = {
        name: "Bob",
        age: 42,
        heightIn: 73
    };

    Object.keys(person).forEach(key => console.log("value from key: " + person[key]));
Output
value: Bob
value: 42
value: 73

If you want to know more about accessing objects using keys checkout our page getting keys by value

Solution: Object by Value

    const person = {
        name: "Bob",
        age: 42,
        heightIn: 73
    };

    Object.values(person).forEach(value => console.log("value: " + value));
Output
value: Bob
value: 42
value: 73

Solution: Object by Entry

    const person = {
        name: "Bob",
        age: 42,
        heightIn: 73
    };

    Object.entries(person).forEach(entry => console.log("entry:" + JSON.stringify(entry)));
Output
entry:["name","Bob"]
entry:["age",42]
entry:["heightIn",73]

Fun Surprise

Congrats for making it all the way to the end! As a fun surprise you should inspect your js console (usually right click->inspect then find the console). You will see the above examples running in your browser 😎