Promise in JavaScript, Understanding With Example

Hi, I am trying to explain here the Promise in JavaScript little bit with the help of example. Suppose we want to perform 3 tasks (task1, task2, task3), and we want to perform some other action when all three task are completed and we don't know how much time any task will take then surely we need to apply some logic in our code then we can achieve this but using Promises this is very easy to do.

Let's see this example:

Creating tasks using promises

 function task1(){
        return new Promise(function(resolve, reject){
         setTimeout(function(){
          resolve("Hello Task1 is done");  // we can use reject also on the basis of some condition.
         },5000)
        });
}
function task2(){
        return new Promise(function(resolve, reject){
         setTimeout(function(){
          resolve("Hello Task2 is done");
         },3000)
        });
}

function task3(){
        return new Promise(function(resolve, reject){
         setTimeout(function(){
          resolve("Hello Task3 is done");
         },7000)
        });
}

In above example I have taken setTimeout with some time but in real scenarios it can be some aync ajax request. Now suppose we need to perform some action on completing all three tasks.

Promise.all([task1(), task2(), task3()]).then(function(value){ 
    // do your action here
    console.log(value);
 });

// output for above code will come after 7 seconds as this is the maximum time that task3 will take:
["Hello Task1 is done", "Hello Task2 is done", "Hello Task3 is done"]

For more detail of Promise in JavaScript you can refer this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Convert Multiline Text Into Single Line for HTML page

If you want to create your multiline message in single line for html which will be shown on the browser with multiline then just paste/write here your multiline message as it is and then click on "Convert" button:

Use Ctrl + C to copy the message OR right click and copy

Why call and apply two methods available in JavaScript

I hope everyone know about what is call and apply. Just for reminder,

The call() method calls a function with a given this value and arguments provided individually

 myFunction.call(thisArg[, arg1[, arg2[, ...]]])

The apply() method calls a function with a given this value and arguments provided as an array

 myFunction.apply(thisArg, [argsArray])

So both call and apply do similar job as to change the scope of function in which it gets executed (change this of function). So why exactly JavaScript has these 2 methods, one to pass array as an argument and another as the comma separated args. As per my experience in JavaScript I found few places where actually we can use apply but not call. May be you got some other examples also then please share. I would like to take one example here. Suppose we need to find out the min in a given array of integer (unsorted), what will be your approach? First approach we can think to search and find min or sort the array and find min. But if the question is, you have 5 numbers and find out the min of these 5 numbers, now can you think to use Math library (Math.min) in this case and find out min

 // we can pass individual numbers comma separated in Math.min and find out min easily
 Math.min(4,1,8,3,7) // 1

Now think about using array here.......??? can we pass array in this Math.min ? ..... Yes we can !

 var ar = [4,1,8,3,7];
 Math.min.apply(undefined, ar) // 1

Now suppose if only call is available in javascript we can not achieve this using call

In ES6 there is one more way to achieve this. Spread/rest parameter

 var ar = [4,1,8,3,7];
 Math.min(...ar) // 1

Know more about spread/rest parameter