Promises and closures 😶‍🌫️

 A simple Promise

const getData = new Promise((resolve, reject) => {
  reject('error');
  resolve('data');
});

getData.then((res, err) => console.log(res));
getData.catch((res, err) => console.log(res));

A promise can have resolve or reject

Same way when you read the response, you can have resolve or reject. You can read them both or you can have a separate catch function.

In the above example, we get "error" instead of "data" as it was rejected 1st

const getData = new Promise((resolve, reject) => {
  resolve('data');
  reject('error');
});

getData.then((res, err) => console.log(res));
getData.catch((res, err) => console.log(res));

This will give "data" and not "error"


Static Functions of Promise

1. Promise.all

It waits for all promises to resolve and then give a single array with combined output

const getData1 = new Promise((resolve, reject) => {
  resolve('data1');
  reject('error1');
});

const getData2 = new Promise((resolve, reject) => {
  resolve('data2');
  reject('error2');
});

const getData3 = new Promise((resolve, reject) => {
  resolve('data3');
  reject('error3');
});

Promise.all([getData1, getData2, getData3])
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

Output: ["data1", "data2", "data3"]


If one of the promise rejects, the catch is executed and will not give the resolved value of other promises

const getData1 = new Promise((resolve, reject) => {
  resolve('data1');
  reject('error1');
});

const getData2 = new Promise((resolve, reject) => {

  //resolve('data2');

  reject('error2');
});

const getData3 = new Promise((resolve, reject) => {
  resolve('data3');
  reject('error3');
});

Promise.all([getData1, getData2, getData3])
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

Since getData2 is not resolving, but rejecting the output will be: "error2"

2. Promise.allSettled

This will will give the response of all promises irrespective of rejected or resolved. But just waits for all promises to be completed.

The same code with allSettled will give the below output:

[{…}, {…}, {…}]
  1. 0: Object
  2. 1: Object
  3. 2: Object


3. Promise.race

Race will give the output of the 1st completed promise. Could be resolved or rejected

const getData1 = new Promise((resolve, reject) => {
  resolve('data1');
  reject('error1');
});

const getData2 = new Promise((resolve, reject) => {
  //resolve('data2');
  reject('error2');
});

const getData3 = new Promise((resolve, reject) => {
  resolve('data3');
  reject('error3');
});

Promise.race([getData1, getData2, getData3])
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

Output: data1

SetTimeouts Inside Promises

const getData1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'data1');
});

getData1.then((res) => console.log(res));
getData1.catch((res) => console.log(res));

Here we are resolving 'data1' after 3 seconds. 

Output: data1

Dynamic Time for setTimeouts.

Just wrap it around a function and return the promise
function myFunction(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time, 'data1');
  });
}

let c = myFunction(1000);
c.then((res) => console.log(res));
c.catch((res) => console.log(res));

//output: data1 after 1 sec


Closures Returning Promises

Let us first recap what a closure is. Closure is a function that returns an inner function that has a cached value of the state of a variable on the outer function

A normal closure would look something like this:

function Outer() {
  let count = 0;
  return function inner() {
    count = count + 1;
    return count;
  };
}

let func = Outer();
func(); //1
func(); //2

Now, we need to return a promise instead of a regular function

function Outer() {
  let count = 0;
  return function inner() {
    return new Promise((resolve, reject) => {
      count = count + 1;
      resolve(count)
    }) 
  }
}

let func = Outer();
func().then(res => console.log(res))
func().then(res => console.log(res))
func().then(res => console.log(res))
func().then(res => console.log(res))

Now we get the same output. You can send your own time for a setTimeout. Thus combining async, promise and closures


function Outer() {
  let count = 0;
  return function inner(time) {
    return new Promise((resolve, reject) => {
      count = count + 1;
      setTimeout(resolve, time, count)
    }) 
  }
}

let func = Outer();
func(100).then(res => console.log(res+"called-1"))
func(200).then(res => console.log(res+"called-2"))
func(5).then(res => console.log(res+"called-3"))
func().then(res => console.log(res+"called-4"))


Guess the output!
Answer is below














it is:























































Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more