Promises inside a loop - Javascript ES6
Tags: showdev, webdev, tutorial, beginners
Published: 2019-07-30 18:45:23

---
title: Promises inside a loop - Javascript ES6
published: true
description: Promises inside a loop - Javascript ES6
tags: showdev,webdev,tutorial,beginners
canonical_url: https://cloudnweb.dev/2019/07/promises-inside-a-loop-javascript-es6/
---

<!-- wp:paragraph -->
<p>In this article, we will see how to write a promise function inside a loop. Promises inside a loop - Javascript ES6</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to learn more about Javascript. check out this articles</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><a href="https://cloudnweb.dev/2019/07/prototypal-inheritance-javascript-weekly/">Prototypal Inheritance - Javascript Weekly</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Understanding Closures in Javascript - Javascript Weekly</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><a href="https://cloudnweb.dev/2019/07/configuring-babel-for-node-js-express-server/">Configuring Babel for Node/Express</a></strong></p>
<!-- /wp:paragraph -->
<p> <a href="http://eepurl.com/gvbr7j">Subscribe to my newsletter</a> for further updates .</p>
<!-- wp:paragraph -->
<p>Before jumping into the code, we will see why we need to write a promise function inside a loop.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Scenario</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Consider a situation where you need to send mail to list of emails. you will write a function which can send a single email at once.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's say that you have a list of emails like this</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const emailList = ['ganesh@gmail.com','john@gmail.com','tarry@gmail.com']</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Firstly, you write a single function which takes an emailId and send a mail to the corresponding mail.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function sendMail() {
  //Sending mail
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>you need to call the function as per the count of emails you have in the array.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>you can think of, why can't I call the function inside the for a loop. it will be simple ..right??.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>No... that's not going to work. because sending a mail is an asynchronous function. Loop will not wait until the previous function completes</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, there might be a chance of missing a function call or sending mail. To solve this problem, we need to use <strong>Promise</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Promises inside a loop - Javascript ES6</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firstly, write the email sending logic inside a function which returns a <strong><a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261">Promise</a></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
const sendEmail = (userEmail) => {

  return new Promise(async (resolve,reject) => {
        //this is a mock email send logic
        setTimeout(() => {

            resolve(`Email Sent to ${userEmail}`);
        },3000)

  })
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>call the function inside the Javascript <strong>map()</strong> function and <strong><a href="https://www.taniarascia.com/promise-all-with-async-await/">Promise.all</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const  sendEmails = async () => {

    const userEmails = ['ganesh@gmail.com','john@gmail.com','Sam@gmail.com'];

    const status = await Promise.all(userEmails.map(email => sendEmail(email)));

    console.log("Status =>",status);

}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This is one of the ways with which you can call promise inside loops.</p>
<!-- /wp:paragraph -->

{% replit @ganeshmani/Promiseloop %}

<!-- wp:html -->
<iframe height="400px" width="100%" src="https://repl.it/@ganeshmani/Promiseloop?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>To sum up, Promises are one the powerful addition in Javascript ES6.Promises inside a loop - Javascript ES6</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>  In addition, we will see more about Core Concepts of Javascript in upcoming articles. Stay Tuned.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then Happy Coding :-)</p>
<!-- /wp:paragraph -->