knowing when to use a loop or map

Question

Trying to learn by coding (React), my question: React uses map() everywhere, so can we replace every loop for example for loop with map ? When is good to use map and when for loop ? in following example i have used for loop, should i be using map ?

how would this be changed to map ?:

 const links = currentLinks;
      for (let i = 0; i < links.length; ++i) {
        let border = links[i].boundary.points;
        drawPath(canvas, ctx, border, '#AA1111', '#AA1111', 0.2);
      }
      
      
      
      -----------------
      
      links.map(() => (
      ?
      
      ));

use map when you want to return something. for example in react return jsx. — cmgchess, Feb 27 '22 at 18:32
always when returning ? that for loop cant be replaced with map ? — walee, Feb 27 '22 at 18:34
https://stackoverflow.com/questions/60786111/for-loops-vs-map-to-iterate-arrays — cmgchess, Feb 27 '22 at 18:35
The OP does not return anything with each iteration step but the OP ***for each*** iteration step, and based on the currently processed item, executes/invokes another process/function. Thus, if at all picking an array method it should be [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) — Peter Seliger, Feb 27 '22 at 18:46

Robo Robok · Answer 1 · 2022-02-27T18:44:01.413

It's a matter of preference, but in my book, using loops a lot means someone is less experienced. The main difference is that you need to keep the state when you're using a loop. And when you're using a state, you need to think of a name for it and - believe it or not - that's sometimes the hardest part. On the other hand, .map(), .filter(), .reduce() etc. are just expressions.

Use whatever you prefer, but use it wisely.

That being said, sometimes using a loop makes more sense. The rule of thumb is that whenever your code generates some kind of side effect, using a loop is more logical. Consider these two examples:

for (const fruit of fruits) {
    draw(fruit);
}

// or:

fruits.forEach(
    fruit => draw(fruit) // makes sense
);

// vs.

fruits.map(
    fruit => draw(fruit)
);

All will work and do the same thing, but the last one is rather amateurish to do. It returns an array of whatever draw() returns and that return value is never used, so the purpose of using an expression is lost.

To sum up:

expression? use .map()
side effect? use loops

if you were to change that for loop into map, how would it be ? — walee, Feb 27 '22 at 18:36
In your case you're using a *side effect* by calling `drawPath()`, so using a loop makes sense. I will add it to my answer. — Robo Robok, Feb 27 '22 at 18:38

score 1 · Accepted Answer · edited Feb 27 '22 at 23:30

map => For Transformation or Projection - It gives a new collection

loops => For doing some operation (on the collection itself or in general) - It does not return anything

For example

const data = [1, 2, 3, 4, 5]

You want to get the doubles of each number in the array

const doubled = data.map((number, index) => number * 2);

//-- Output 

[2, 4, 6, 8, 10]

You want to call some method (or perform some action) if the item is between 2 and 5

data.forEach(number => { 
    if(number > 2 && number < 5){
        //call some method
    }
    else{
        //..... do some other work
    }
}

or

for(let i=0; i< data.length; i++){
    const number = data[i];
    if(number > 2 && number < 5){
        //call some method
    }
    else{
        //..... do some other work
    }
}

I know the examples are contrived and not very good, but I hope you get the point. Let me know in the comments if you have any query

Update For your case you could use map as below

links.map(link => {
  let border = link.boundary.points;
  drawPath(canvas, ctx, border, '#AA1111', '#AA1111', 0.2);
});

@walee I did not downvted. I upvoted your question. Your question is valid. Ignore these people, — Abhay Prince, Feb 27 '22 at 19:09
If you replace my example code with map, would it be like this : links.map((k) => drawPath( canvas, ctx, links[k]?.boundary?.points, '#AA1111', '#AA1111', 0.2, ), ); ? — walee, Feb 27 '22 at 19:09
@walee Sorry my mistake, map's first parameter is item and second is index. I have updated the answer again — Abhay Prince, Feb 27 '22 at 19:18

score 0 · Answer 3 · answered Feb 27 '22 at 19:13

First and foremost if you know you need to break out early then you need to use a loop as you can not return early with forEach and map (without the use of something like filter).

Also specific for react you will get a re-render if state or properties change. Using map will create a new array (at least the reference to the array) which will get you a re-render which is often desired.

knowing when to use a loop or map

3 Answers3