How to use replace for loop using forEach in JavaScript?

Question

I have a for loop for an array of objects, and I need to replace the for loop using an array method. I thought if using for Each or Map, I researched and read the documentation but I am not able to replace it and also not able to understand how to replace. I have a few lines of code to run within the for loop.But all the documentation and theory deals with only console.log and I don't know how to incorporate so many lines of code within a for Each method.

for ( var i = 0; i < points.length; i++ ) {

  let point = points[i];
  if ( point.x*x < 0 || point.y*y < 0 )
      continue; 

  let magnitude = point.x*x + point.y*y;

  if ( magnitude > max_magnitude ) {
      max_magnitude = magnitude;
      max_index = i;
  }

}

Points is an array of objects. It consists of vectors and their x and y coordinate.

Answer 1

The forEach function takes a callback which will receive 3 arguments. The first argument is the item being iterated, and the second argument is the index of the current item. Your code can be rewritten like this:

points.forEach((point, i) => {

    if ( point.x*x < 0 || point.y*y < 0 )
        return; 

    let magnitude = point.x*x + point.y*y;

    if ( magnitude > max_magnitude ) {
        max_magnitude = magnitude;
        max_index = i;
    }
})

Answer 2

You are maybe missing the fact that the function you pass to .forEach() can also take the current index as an argument. So it would look like this:

points.forEach((point, i) => {

  if ( point.x*x < 0 || point.y*y < 0 )
      continue; 

  let magnitude = point.x*x + point.y*y;

  if ( magnitude > max_magnitude ) {
      max_magnitude = magnitude;
      max_index = i;
  }

});

Answer 3

You say you need to replace the loop with an array method. The usual rationale for that (or so I teach my students) is that the array methods more clearly document what you're trying to do. If you have a for loop used to find the first value to match some condition, you should use .find . If you want to find all matching values, use .filter . If you want a item-by-item transformation, use .map . If you want to check that every item matches a given condition, use .every . If you want to check that some items match a condition, use .some . And if you want to transform the array down to a single value, use .reduce .

Note what isn't in this list: forEach . While there's nothing wrong with forEach , it doesn't really add any useful semantics. It's mostly helpful when the function passed to forEach is independently reusable, and you don't fit any of the categories above.

Let's look at what you want to do. You are transforming the points into magnitudes and then choosing the maximum. We could do this by using map for the transform, then using Math.max to find the maximum. It would look like this:

 const points = [{x: 1, y: 2}, {x: 8, y: 6}, {x: 7, y: 5}, {x: 3, y: 0}] const max_magnitude = Math .max (0, ... points .map (({x, y}) => x * x + y * y)) console .log (max_magnitude) //=> 100 (8 * 8 + 6 * 6)

We add the 0 to maximum call in order to provide a minimum for an empty array.

(I also make the assumption explained in the comment to the question, that point.x * x is supposed to be point.x * point.x , and similarly for y . This makes sense when talking about magnitudes, but if it's wrong, the code would have to change slightly.)

But you were calculating two things, the maximum magnitude and the index of the point with the maximum magnitude.

For that, I would switch to reduce . We could have used reduce just for just the maximum, but Math.max simplified it. Since we have to do further calculations, reduce becomes simpler.

So perhaps we might write this:

 const points = [{x: 1, y: 2}, {x: 8, y: 6}, {x: 7, y: 5}, {x: 3, y: 0}] const results = points .reduce ( ({max, index}, {x, y}, i) => x * x + y * y > max ? {max: x * x + y * y, index: i} : {max, index}, {max: -Infinity, index: -1} ) console.log (results) //=> {max: 100, index: 1}

And to get back your original variables, we could replace const results = ... with const {max: max_magnitude, index: max_index} = ... .

These array methods help make much more clear what your loop code might obscure. It's definitely worth learning them.