Callbacks Exercise Javascript

Question

I have been exercising callbacks and I got this exercise that I have been struggling with the syntax. Here is my code:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}
  
doLaundry([wash, dry, fold]);

Invoking the doLaundry([wash,dry,fold]) is supposed to print out the following:

wash dry fold Done!

by calling this function (needs work)

function doLaundry() {
  // Call functions
}

I tried this and it was close but the syntax is wrong or uneeded:

  function doLaundry(actions, callback) {
          actions.forEach((item, index) => {
            wash(item, (error) => dry(item, (error) => fold(item, (error) => {})));
          });
        }

I'm really confused how to implement the doLaundry() with callback after checking out other simple tutorials. Any suggestions how to approach this?

Must the functions be asynchronous?

CertainPerformance
– CertainPerformance

2021-03-10 02:16:39 +00:00
Commented Mar 10, 2021 at 2:16 — CertainPerformance
– CertainPerformance, Commented Mar 10, 2021 at 2:16
No mention of asynch in the exercise description.

Mustafa
– Mustafa

2021-03-10 02:18:20 +00:00
Commented Mar 10, 2021 at 2:18 — Mustafa
– Mustafa, Commented Mar 10, 2021 at 2:18
callback functions are not defined...

Mister Jojo
– Mister Jojo

2021-03-10 02:30:52 +00:00
Commented Mar 10, 2021 at 2:30 — Mister Jojo
– Mister Jojo, Commented Mar 10, 2021 at 2:30

CertainPerformance · Accepted Answer · 2021-03-10 02:34:50Z

1

Since the functions don't need to be asynchronous, I think you're making this a lot more complicated than it needs to be. Just iterate through the array of actions (functions) and call them. Then log Done at the end.

function wash() {
  console.log('wash');
}

function dry() {
  console.log('dry');
}

function fold() {
  console.log('fold');
}

const doLaundry = (fns) => {
  fns.forEach(fn => {
    fn();
  });
  console.log('Done!');
}

doLaundry([wash, dry, fold]);

Or, if you must stick with the asynchronous functions, you can build up the callback chain starting from the last one in the chain and going backwards with reduceRight:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}

const doLaundry = (fns) => {
  const firstCallback = () => console.log('done');
  const firstFn = fns.reduceRight(
    (nextCallback, fn) => () => fn(nextCallback),
    firstCallback
  );
  firstFn();
}

doLaundry([wash, dry, fold]);

Or, for an easier to understand approach, promisify each callback and await them:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}

const toProm = fn => new Promise(resolve => fn(resolve));
const doLaundry = async (fns) => {
  for (const fn of fns) {
    await toProm(fn);
  }
  console.log('done');
}

doLaundry([wash, dry, fold]);

edited Mar 10, 2021 at 2:34

answered Mar 10, 2021 at 2:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mustafa Over a year ago

I'm not supposed to tamper with the function definitions, how would implementation with callbacks taken into consideration look like? Thanks btw!

CertainPerformance Over a year ago

Thought you said the functions don't need to be asynchronous? But there are other ways, one sec...

uthaya sakthivel · Accepted Answer · 2021-09-24 09:55:03Z

0

Try this simple code:

only one thing that you have to remember is, in the callback function if we are passed arguments, you have to write something in front of the callback like this ()=>

    function wash(dry) {
  console.log("wash");
  setTimeout(dry, 3000);
}
function dry(fold) {
  console.log("dry");
  setTimeout(fold, 2000);
}
function fold(done) {
  console.log("fold");
  console.log("done");
}

setTimeout(() => wash(() => dry(() => fold("done"))), 4000);

answered Sep 24, 2021 at 9:55

uthaya sakthivel

1

Comments

roushanpratap tiwari · Accepted Answer · 2022-08-16 17:47:22Z

0

function wash(callback){
 setTimeout(()=>{
   console.log('wash');
   callback()
},3000)
}

function dry(callback){
 setTimeout(()=>{
   console.log('dry');
   callback()
},2000)
}

function fold(callback){
 setTimeout(()=>{
   console.log('fold');
   callback()
},1000)
}

function doLaundry(callback){
callback()
}

doLaundry(()=>{
wash(()=>{
   dry(()=>{
       fold(()=>{
             console.log('done')
       })
   })
})
});

answered Aug 16, 2022 at 17:47

roushanpratap tiwari

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Jovana · Accepted Answer · 2022-09-20 15:09:24Z

0

This one should do the job.

function doLaundry(actions) {
   const [_wash, _dry, _fold] = actions

   _wash(() => {
      _dry(() => {
         _fold(() => {
            console.log('Done')
         })
      })
   })
}

First line is destructuring the array, so it's elements are easier to access:

const [_wash, _dry, _fold] = actions

Function doLaundry takes array of callback functions as argument, which means when calling those functions inside of body of doLaundry, only names which it takes from arguments should be provided together with arguments that those callback functions are taking.

Since all of them take callbacks as arguments, arguments must be another function. First callback function's (in this case _wash) argument is another callback (_dry), therefore it takes another function as argument. If _wash's argument wasn't another function that takes callback as argument, it would be done like this:

_wash(_dry)

Last callback (_fold) also takes a callback as an argument which is in this case an anonymous function.

edited Sep 20, 2022 at 15:09

answered Nov 14, 2021 at 8:56

Jovana

6081 gold badge6 silver badges21 bronze badges

2 Comments

kiner_shah Over a year ago

Please add some explanation for your solution.

Jovana Over a year ago

Of course, callback hells are a bit complicated. I edited post.

Collectives™ on Stack Overflow

Callbacks Exercise Javascript

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related