Converting a piece of javascript from .forEach to for Loop

#1

How would I convert this piece of javascript to for loop?

What would this be changed to?

 function initCovers(coverOpts) {
    coverOpts.forEach(function (opts) {
      init(opts);
    });
  }
#2

what does forEach do? how would you do it with a loop?

#3

What do you mean, it can’t just be changed to for loop the way it is?

#4

I’m asking you how it would be written using for loop instead.

#5

Yes, it can be converted. We are a teaching platform and ilenia was just prompting you to think about it.

#6

It’s part of a code that shows and hides covers.

#7

To put it another way, any of that category of prototype methods can be converted to a loop, many of them for loops. If we could look internally in the code of an implementation of forEach, I would expect us to find a for loop.

1 Like
#8

Here is the code that comes before it if that helps.

Here is the working code.
https://jsfiddle.net/u0w51qso/


  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    if (cover.coverOpts.show) {
      show(document.querySelector(cover.coverOpts.show));
    }
    if (cover.coverOpts.hide) {
      hide(document.querySelector(cover.coverOpts.hide));
    }
  }
  function initCovers(coverOpts) {
    coverOpts.forEach(function (opts) {
      init(opts);
    });
  }
#9

What it is used for or what comes before doesn’t really matter in this case. All we care about is how we’re iterating over that data.

As an example, here is some simple functionality, written 3 ways:

const data = [1, 2, 3];

data.forEach(num => console.log(num));

for (let i = 0; i < data.length; i++) {
  console.log(data[i])
}

for (num of data) {
  console.log(num);
}

Personally, I think the first one is cleaner and safer. Unless there is a specific reason, I would want to use a prototype method. I usually avoid for and while and do/while loops for readability and safety.

Of the remaining, I think the last one is the next best.

But as I think was being hinted, if you understand a for loop and understand what forEach is doing, this should be pretty easy.

1 Like
#10

Out of curiosity, why do you want to change from a prototype method to a for loop? I suppose it’s possible there would be a reason to do it, I just can’t imagine what the for loop can do that forEach can’t do more elegantly.

1 Like
#11

And sorry if you aren’t comfortable with arrow functions, the first example could be written as

data.forEach(function(num) {
  console.log(num);
});
1 Like
#12

Just for learning purposes so I know how to do it.

#13

OK, that’s a pretty good reason. Did you figure it out?

#14

No, I didn’t, did you?

I have examples of ones in my codes, but it doesn’t help much.

It’s confusing to me.

Examples:

also, I would probably want to stick to the same method in how these were done.

  function hideAllButtons(button) {
      const buttons = button.querySelectorAll(".play, .pause, .speaker");
      for (let i = 0; i < buttons.length; i++) {
         hide(buttons[i]);
      }
   }

   function pauseAllButtons() {
      let buttons = document.querySelectorAll(".playButton");
      for (let i = 0; i < buttons.length; i++) {
         if (isPlaying(buttons[i])) {
            showPlayButton(buttons[i]);
         }
      }
   }

      if (event.data === YT.PlayerState.PLAYING) {
         for (let i = 0; i < players.length; i++) {
            if (players[i] !== event.target) players[i].pauseVideo();
         }
      }

And these are the .forEach equivalents.

  function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
   }



   function pauseAllButtons() {
      var buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
         if (isPlaying(button)) {
            showPlayButton(button);
         }
      });
   }

      if (event.data === YT.PlayerState.PLAYING) {
         players.forEach(function pauseOtherVideos(player) {
            if (player !== event.target) {
               player.pauseVideo();
            }
         });
      }
#15

What code have you tried? I haven’t seen any code where you tried to convert this into a for loop.

#16

It’s confusing to me.

 function initCovers(coverOpts) {
for (let i = 0; i  <something.something; i++) {
    });
  }

Code I’m trying to convert.

function initCovers(coverOpts) {
    coverOpts.forEach(function (opts) {
      init(opts);
    });
  }
#17

Well, this won’t work. What should this something be? It needs to be a number of some sort.

This is malformed syntax (stray )) and you need to put something in the function body.

#18

This?
for (let i = 0; i < covers.length; i++)

#19

Where is covers defined?

#20

In here?

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    if (cover.coverOpts.show) {
      show(document.querySelector(cover.coverOpts.show));
    }
    if (cover.coverOpts.hide) {
      hide(document.querySelector(cover.coverOpts.hide));
    }
  }
  function initCovers(coverOpts) {
    coverOpts.forEach(function (opts) {
      init(opts);
    });
  }