<blockquote>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a> are both used in JavaScript for iterating over elements in an iterable
</blockquote>
<hr />
for...of is a more versatile and general-purpose way to iterate over iterable objects. It provides access to the elements themselves, allowing you to perform various operations on each element.
<pre class="shiki github-dark shaku"><code>const arr = [1, 2, 3, 4];for (const element of arr) { console.log(element); // Access and use each element in the array}</code></pre>
<ul>
<li>It can be used with the <code>break</code> statement to exit the loop early.</li>
<li>It is not limited to arrays and can be used with any iterable.</li>
</ul>
<hr />
forEach is a specific method available on arrays for iterating over their elements. It is a higher-order function and takes a callback function as an argument. It does not return a value, and its main purpose is to execute a provided function for each element in the array.
<pre class="shiki github-dark shaku"><code>const arr = [1, 2, 3, 4];arr.forEach(function(element) { console.log(element); // Access and use each element in the array});</code></pre>
<ul>
<li>It cannot be easily exited prematurely with a <code>break</code> statement.</li>
<li>Specifically designed for array only</li>
</ul>

for...of vs forEach

We could use for...of and Array.prototype.forEach to apply functions agains elements in an array. What is the difference? Notice that for...of is iter…