<p>In programming, the concept of looping is seen to repeat a block of code without actually writing it multiple times and to make it look compact and readable. The concept of implementing a loop remains similar in most programming languages.&nbsp;</p>
<p>In Javascript, we have quite different ways to implement loops. In this article, we are going to look at the three kinds of Javascript for loops viz., <code>for</code>, <code>for in</code> and <code>for of</code>. Besides <code>for</code> loops there are <code>while</code>, <code>do while</code> and different iterative methods that can be called on arrays to perform looping actions.</p>
<h2 style="text-align: center;">For loops in Javascript</h2>
<h3>JS for loop</h3>
<p>The for loop in JS is similar to the C language for loop, it takes three statements, first is initialization, second is condition and third is the update.&nbsp;</p>
<pre class="language-javascript"><code>for (Statement 1; Statement 2; Statement 3) {
  // code block
}</code></pre>
<ul>
<li>Statement 1: Initialization of the variable is done using <code>let</code> or <code>var</code> keywords. <code>const</code> cannot be used because variables declared with <code>const</code> cannot be reassigned.&nbsp;</li>
<li>Statement 2: Condition for ending the loop</li>
<li>Statement 3: For updating the value of the variable</li>
</ul>
<pre class="language-javascript"><code>// A simple for loop to log numbers from 0 to 9
for( let i = 0; i &lt; 10; i++) {
  console.log(i);
}</code></pre>
<p>The first and the third statements can be omitted if those are defined in other parts of the code, but the second statement is important for ending the loop. If the second statement returns true then the loop keeps running if it's false, it stops. When the second statement is also omitted, care has to be taken to break the loop from inside.&nbsp;</p>
<pre class="language-javascript"><code>// First and third statements are omitted but are inferred one from outside and the other inside the loop
let i = 0;
for (; i &lt; 5; ) {
  console.log(`Logging ${i}`);
  i++;
}
</code></pre>
<p>Using <code>let</code> keyword for <code>for loop</code> doesn't affect the variables declared outside the loop because of the block scope but if <code>var</code>&nbsp;keyword is used for <code>for loop</code> then it may overwrite the values outside the scope.</p>
<pre class="language-javascript"><code>let i = 5;
for (let i = 0; i &lt; 10; i++) {
  // some code block
}
console.log(i); // The value of i is 5</code></pre>
<pre class="language-javascript"><code>var i = 5;
for (var i = 0; i &lt; 10; i++) {
  // some code block
}
console.log(i); // 10
// It is 10 because the value of i when loop ends is 10 
// and it is declared with var, so the value persists outside the block</code></pre>
<p>Next, let's see the for-in loop.</p>
<h3>JS for-in loop</h3>
<p>The Javascript for-in loop is used to iterate over the properties of an object especially the enumerable properties of the object.&nbsp;</p>
<blockquote>
<p>Enumerable properties are those that have enumerable flag set to true when defining the property. By default objects created using <code>{}</code> are enumerable. Find more about it on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" target="_blank" rel="noopener">mozilla</a>.</p>
</blockquote>
<pre class="language-javascript"><code>// for-in loop
for( let key in object) {
  // key gives each key in the object for every iteration
  // code block
}</code></pre>
<pre class="language-javascript"><code>const countries = {
  norway: 'oslo',
  japan: 'tokyo',
  finland: 'helsinki'
}

// const can be used because it's not being reassigned
for(const country in countries) {
  console.log(countries[country]);
}

// Logs all the values assigned to each country</code></pre>
<p>The for-in loop can also be used for arrays and strings just like objects because the keys for arrays or strings will simply be their indexes. The caveat for using for-in for arrays is that the order of indexes may not be right all the time because those will be treated like the keys in an object and so in the object, the order of the keys is not guaranteed.</p>
<pre class="language-javascript"><code>const numbers = [10, 9, 8, 7, 6];

for(const index in numbers) {
  console.log(numbers[index])
}

// Index order may not be right all the time
// To understand this, conceive it like an object, 
// where the order of props is not guaranteed
// {
//   '0': 10,
//   '1': 9,
//   '2': 8,
//   '3': 7,
//   '4': 6,
// }</code></pre>
<h3>JS for-of loop</h3>
<p>The Javascript <code>for-of loop</code> loops over the values of the iterable object. The iterable here cannot be a direct object with key-value pairs because we can't access values directly without their keys. So the iterable in <code>for-of</code> loop refers to an array-like object or a string.</p>
<pre class="language-javascript"><code>// for-of loop
for( let value of iterable) {
  // value gives each value in the iterable
  // code block
}</code></pre>
<pre class="language-javascript"><code>const colors  = ['red', 'green', 'pink', 'yellow'];

for(const color of colors) {
  console.log(color); 
}
// All the values from the colors array get logged
</code></pre>
<p>Using for-of we can iterate over the letters of a string easily.</p>
<pre class="language-javascript"><code>const name = 'John';
for(const letter of name) {
  console.log(letter);
}
// Each letter of the string name gets logged</code></pre>
<p>To access the key-value pairs of an object using <code>for-of</code> loop we can use <code>Object.entries</code> method.</p>
<pre class="language-javascript"><code>const countries = {
  norway: 'oslo',
  japan: 'tokyo',
  finland: 'helsinki',
};

for (const [country, capital] of Object.entries(countries)) {
  console.log(country + ' - ' + capital);
}
// norway - oslo
// japan - tokyo
// finland - helsinki</code></pre>
<p>So that is about for-of loop.</p>
<p>People often get confused in remembering the Javascript for-in and for-of loops.</p>
<p>A simple trick is whenever you see <code>for-in</code> loop think of the second word <code>in</code> as an index which means it can iterate over indexes of an array and the equivalent part in objects is keys.&nbsp;</p>
<p>In the case of <code>for-of</code> loop, think of <code>of</code> as value belonging to something, in objects values belong to keys, and in arrays just the values directly.</p>
<p>There's one more in Javascript for loops that starts with for, but it is a method that can be called on arrays. Let's have a glimpse at that.</p>
<h3>JS forEach for arrays</h3>
<p><code>forEach</code> is a method that can be run on arrays to iterate the values and indexes in their original order. This is the most often used method for looping arrays.&nbsp;</p>
<p><code>forEach</code> takes a callback function with three arguments(the last two are optional), that runs on every element of the array.</p>
<pre class="language-javascript"><code>array.forEach((value, index, array) =&gt; {
  // code block
})</code></pre>
<p><strong>Note: </strong><code>forEach</code> doesn't have support for async, await, the results could be not as expected when you await the results inside forEach method. Use <code>for</code>, <code>for-of</code> or <code>for-in</code> loops for asynchronous operations.</p>
<p>That's all about Javascript for-loops. Hope this gave a quick understanding of the differences between each.&nbsp;</p>

Here are all the details you need to know about JavaScript for loops and their differences. How forEach is different compared to other for-loops?

Posts tagged with ForEach

JavaScript for loops, their uses & trick to remember each