Javascript: forEach Is Not A Function and What To Do?
Published: 2022-10-06 13:14:21

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2><strong>What is Loop?</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">A loop is a programming instruction that will cause a computer program to execute the same set of instructions over and over again as long as a particular condition is true.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2><strong>The Traditional Loops</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">The traditional loops in functional programming are for and while loops. These loops are used to execute a series of statements or instructions repeatedly. The for loop executes a set of statements until a certain condition is met, whereas the while loop executes a set of statements as long as the condition is true.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:spacer {"height":"0px"} -->
<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2><strong>Javascript</strong> forEach loop</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">The forEach method is an ES6 javascript iteration addition that executes code in arrow function for each item in an array. It can be used to iterate through arrays of any type and size, Map or Set.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">It's different than the traditional "for loop". forEach passes a callback function for each element of an array with the following parameters: Current Value (required) - The index of the current array.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const techBlog = &#91;'Nerd', 'Level', 'Tech']
techBlog.forEach((item, index)=&gt;{
console.log(index, item)
})
// Output
// =====

// 0 Nerd
// 1 Level
// 2 Tech</code></pre>
<!-- /wp:code -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2><strong>Common Error Related - forEach:</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will generate that uncaught typeerror “forEach is not a function.", if we use the forEach like in the example below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const nums = {
  "number 1" :1,
  "number 2": 2,
  "number 3": 3,
  "number 4":4
}

nums.forEach((num) =&gt; {
  console.log(num);
});

// Output the error below image.</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":484,"width":841,"height":51,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://nerdleveltech.com/wp-content/uploads/Screenshot-2022-09-21-at-15.02.16.png" alt="" class="wp-image-484" width="841" height="51"/></figure>
<!-- /wp:image -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">In that use case of the above example, we can use forEach with objects but not directly. To simple fix that we can use it with the built in keys object as it returns an array of keys or any array-like object, which is in these cases can be directly attached to forEach.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const nums = {
  "number 1" :1,
  "number 2": 2,
  "number 3": 3,
  "number 4":4
}

Object.keys(nums).forEach(key =&gt; {
  console.log(key +" : "+ nums&#91;key]);
});

// OR

Object.entries(nums).forEach((&#91;key, value]) =&gt; {
console.log(key+" - "+value);
});
</code></pre>
<!-- /wp:code -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2>Wrapping up - <strong>Most Common Cause</strong>:</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">a- Calling "forEach" on a value that is not of type array, Map, or Set will result in the error “forEach is not a function." To fix this, make sure it's being used on an Array, Map or Set instead</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">b- You can also console.log the object and verify that it's an object of type Array, Map, or Set. If the type of Object is Object it needs first to be converted to these allowed types “Array, Map or Set“ then attach the forEach to it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">c- If it's fetched from a remote server, make sure you've parsed the JSON object to a native JavaScript array first.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->