{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/for-loops-in-javascript/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li>\n<p><a href=\"#for\">for</a></p>\n<ul>\n<li><a href=\"#syntax\">Syntax</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"#foreach\">for...each</a></p>\n<ul>\n<li><a href=\"#syntax-1\">Syntax</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"#forin\">for...in</a></p>\n<ul>\n<li><a href=\"#syntax-2\">Syntax</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"#forof\">for...of</a></p>\n<ul>\n<li><a href=\"#syntax-3\">Syntax</a></li>\n<li><a href=\"#iterating-over-an-array\">Iterating over an array</a></li>\n<li><a href=\"#iterating-over-a-string\">Iterating over a string</a></li>\n</ul>\n</li>\n</ul>\n</div>\n<h2 id=\"for\" style=\"position:relative;\"><a href=\"#for\" aria-label=\"for permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>for</h2>\n<p>A for loop repeats until a specified condition evaluates to false.</p>\n<h3 id=\"syntax\" style=\"position:relative;\"><a href=\"#syntax\" aria-label=\"syntax permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Syntax</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> ([initialization]</span><span class=\"mtk10\">;</span><span class=\"mtk1\"> [condition]</span><span class=\"mtk10\">;</span><span class=\"mtk1\"> [final-expression]) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">    statement</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<p><strong>Initialization</strong>: Typically used to initialize a counter variable.</p>\n<p><strong>Condition</strong>: An expression to be evaluated before each loop iteration.</p>\n<p><strong>Final-expression</strong>: Generally used to increment the counter variable.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">i</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk7\">0</span><span class=\"mtk1\">; </span><span class=\"mtk3\">i</span><span class=\"mtk1\"> </span><span class=\"mtk10\">&lt;</span><span class=\"mtk1\"> </span><span class=\"mtk7\">5</span><span class=\"mtk1\">; </span><span class=\"mtk3\">i</span><span class=\"mtk10\">++</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">i</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">// output</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">0</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">1</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">2</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">3</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">4</span></span></span></code></pre>\n<h2 id=\"foreach\" style=\"position:relative;\"><a href=\"#foreach\" aria-label=\"foreach permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>for...each</h2>\n<p>The <del>for...each</del> method executes a provided function once for each array element.</p>\n<h3 id=\"syntax-1\" style=\"position:relative;\"><a href=\"#syntax-1\" aria-label=\"syntax 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Syntax</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">// Arrow function</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">forEach</span><span class=\"mtk16\">((</span><span class=\"mtk1\">element) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> { ... } )</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">forEach((element, index) =&gt; { ... } )</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">forEach</span><span class=\"mtk16\">((</span><span class=\"mtk1\">element</span><span class=\"mtk10\">,</span><span class=\"mtk1\"> index</span><span class=\"mtk10\">,</span><span class=\"mtk1\"> array) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> { ... } )</span></span></span></code></pre>\n<p><strong>element</strong>: The current element being processed in the array</p>\n<p><strong>index</strong>(<em>optional</em>): The index of the element in the array.</p>\n<p><strong>array</strong>(<em>optional</em>): The array <del>for...each</del> was called upon.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">team</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk16\">&quot;Sam&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;Alex&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;Cathy&quot;</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">team</span><span class=\"mtk1\">.</span><span class=\"mtk6\">forEach</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">teamMember</span><span class=\"mtk1\"> </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk16\">`Hello </span><span class=\"mtk8\">${</span><span class=\"mtk3\">teamMember</span><span class=\"mtk8\">}</span><span class=\"mtk16\">`</span><span class=\"mtk1\">))</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">// output</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Hello Sam</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Hello Alex</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Hello Cathy</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">nums</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk16\">&quot;10&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;20&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;30&quot;</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">nums</span><span class=\"mtk1\">.</span><span class=\"mtk6\">forEach</span><span class=\"mtk1\">((</span><span class=\"mtk3 mtki\">num</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">index</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">arr</span><span class=\"mtk1\">) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> (</span><span class=\"mtk3\">arr</span><span class=\"mtk1\">[</span><span class=\"mtk3\">index</span><span class=\"mtk1\">] </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">num</span><span class=\"mtk1\"> </span><span class=\"mtk10\">*</span><span class=\"mtk1\"> </span><span class=\"mtk7\">2</span><span class=\"mtk1\">))</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">nums</span><span class=\"mtk1\">)</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">// output</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">[ 20, 40, 60 ]</span></span></span></code></pre>\n<h2 id=\"forin\" style=\"position:relative;\"><a href=\"#forin\" aria-label=\"forin permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>for...in</h2>\n<p>Used to loop through the properties of an object.(<em>It iterates through the properties in an arbitrary order</em>.)</p>\n<p><strong>Don’t use <del>for...in</del> loop to iterate over an Array where the index order is important</strong>.</p>\n<h3 id=\"syntax-2\" style=\"position:relative;\"><a href=\"#syntax-2\" aria-label=\"syntax 2 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Syntax</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> </span><span class=\"mtk3\">(variable</span><span class=\"mtk1\"> </span><span class=\"mtk10\">in</span><span class=\"mtk1\"> object) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">   statement</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">object</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">firstName</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Hemanta&quot;</span><span class=\"mtk1\">,</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">lastName</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Sundaray&quot;</span><span class=\"mtk1\">,</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> (</span><span class=\"mtk3\">key</span><span class=\"mtk1\"> </span><span class=\"mtk10\">in</span><span class=\"mtk1\"> </span><span class=\"mtk3\">object</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk16\">`</span><span class=\"mtk8\">${</span><span class=\"mtk3\">object</span><span class=\"mtk14\">[</span><span class=\"mtk3\">key</span><span class=\"mtk14\">]</span><span class=\"mtk8\">}</span><span class=\"mtk16\">`</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"10\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">// output</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Hemanta</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Sundaray</span></span></span></code></pre>\n<h2 id=\"forof\" style=\"position:relative;\"><a href=\"#forof\" aria-label=\"forof permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>for...of</h2>\n<p>Used to loop over iterable objects. (Arrays, strings, Maps, Sets etc.).</p>\n<h3 id=\"syntax-3\" style=\"position:relative;\"><a href=\"#syntax-3\" aria-label=\"syntax 3 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Syntax</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"11\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> (variable of iterable) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">   statement</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<h3 id=\"iterating-over-an-array\" style=\"position:relative;\"><a href=\"#iterating-over-an-array\" aria-label=\"iterating over an array permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Iterating over an array</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"12\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">numbers</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk7\">10</span><span class=\"mtk1\">, </span><span class=\"mtk7\">20</span><span class=\"mtk1\">, </span><span class=\"mtk7\">30</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">number</span><span class=\"mtk1\"> </span><span class=\"mtk10\">of</span><span class=\"mtk1\"> </span><span class=\"mtk3\">numbers</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">number</span><span class=\"mtk1\"> </span><span class=\"mtk10\">*</span><span class=\"mtk1\"> </span><span class=\"mtk7\">2</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"13\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">//outout</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">20</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">40</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">50</span></span></span></code></pre>\n<h3 id=\"iterating-over-a-string\" style=\"position:relative;\"><a href=\"#iterating-over-a-string\" aria-label=\"iterating over a string permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Iterating over a string</h3>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"14\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">lastName</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;sundaray&quot;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">fullName</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Hemanta &quot;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">for</span><span class=\"mtk1\"> (</span><span class=\"mtk3\">letter</span><span class=\"mtk1\"> </span><span class=\"mtk10\">of</span><span class=\"mtk1\"> </span><span class=\"mtk3\">lastName</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">fullName</span><span class=\"mtk1\"> </span><span class=\"mtk12\">+=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">letter</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">fullName</span><span class=\"mtk1\">)</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"15\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">//output</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">Hemanta Sundaray</span></span></span></code></pre>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk7 { color: #2EE2FA; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .mtk8 { color: #72F1B8; }\n  .synthwave-84 .mtk14 { color: #B6B1B1; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"For Loops in JavaScript","date":"2021-06-02"}}},"pageContext":{"slug":"/for-loops-in-javascript/","prev":{"fields":{"slug":"/array.from()-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/cloud-firestore-by-firebase/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}