Help with javascript map method

setCartValues(cart){

   let tempTotal=0;

   let itemsTotal=0;

   cart.map(item=>{

       tempTotal += item.price * item.amount;

       itemsTotal += item.amount;

   })

   cartTotal.innerText=parseFloat(tempTotal.toFixed(2));

   cartItems.innerText=itemsTotal;

}

hi, what i need to understand is that as per definition map returns new array but
i dont know what its doing here because its not returning anything and on function call it is called with “this” operator inside the class .

A few things I spotted:

  • Did you declared your function correctly?
  • You need to return something in the callback function inside map(). The returned value of each callback run is what makes up the new array map() returns.
  • Do you really need a new array from map()? It looks like you can use forEach() instead.

even i dont understand why actually iam following a online project and that instructor guy do this definately he does it with reason

When not to use map() - JavaScript | MDN (mozilla.org)
Unfortunately without further information we aren’t able to help you understand what the instructor’s reasons were.

can we use map method without return value . ?

Why would you want to do that? The purpose of the map method is to create a new array. If you are not creating a new array, just use a for loop or the forEach method.

Based on your need to create two sums, I would use the reduce method here to create an object with two properties (tempTotal and itemsTotal) and use those object properties in the innerText of the two elements instead.

1 Like

Hi, as i said earlier iam following a online project video and teacher use map method but its not returning anything so i dont know whats happening in the code above

if i do this now then all code associated with this function will also change, i cant do this

cart.map(item => {
  tempTotal += item.price * item.amount;
  itemsTotal += item.amount;
});

is equivalent of

let totals = cart.reduce(({tempTotal, itemsTotal}, item) => {
  tempTotal += item.price * item.amount;
  itemsTotal += item.amount;
  return {tempTotal, itemsTotal};
});
// then values can be accessed with dot or bracket notation, like totals.tempTotal or totals["tempTotal"]

or

cart.forEach(item => {
  tempTotal += item.price * item.amount;
  itemsTotal += item.amount;
});

or

for (let i = 0; i < cart.length; i++) {
  tempTotal += cart[i].price * cart[i].amount;
  itemsTotal += cart[i].amount;
}
1 Like

but definition says map returns array and here its not returning anything?

In case of that “teacher”, map returns empty array, because it’s not used properly, though the local values tempTotal and itemsTotal should change if you do this via map method like this as well.

2 Likes

It returns a new array of elements that are created by the callback function specified as the first argument of the method. That callback function will be called on each element of the existing array and you must explicitly return a value (the new value for the element being iterated over).

1 Like

if you have two minutes than go threw the video link i shared

Yeah pretty sure it’s an anti-pattern.

1 Like

The part of the video where that code is written is definitely anti-pattern. This instructor is teaching you a way of coding that goes against the purpose of the map method. The reduce method would be a better choice or the forEach method I mentioned earlier.

2 Likes

should i use foreach instead? he is good instructor is their any chance that he is seeing something that we dont?

Unless the instructor comes back later in the video and explains why you should not being using the map method that way and refactors the code to not use it that way, then I do not think this is a good instructor. It makes it seem as if the instructor does not understand when and when not to use the map method.

Since the array be created behind the scenes by the map method is not being used outside the code, it is wasted memory usage.

2 Likes

To err is human, its a long video ,things happen sometimes we will not talk about my teacher anymore

An experienced programmer may well have bad habits, but I agree with @RandellDawson that, to be a good “instructor”, one should know the ins and outs of certain fundamentals so as to not pass on false knowledge.

The reason why anti-patterns are called anti-“patterns” is because their occurrences are common and can be an annoyance.

In the case of using map() without needing an array to be returned, even though it may not cause apparent failure of your program, it wastes computing resource and may also result in other issues inadvertently.

If you want to see what was returned by the map function, try wrapping it with console.log() as so and check the console:

console.log(cart.map(item=>{
       tempTotal += item.price * item.amount;
       itemsTotal += item.amount;
   }))

If the function was coded correctly and you pass an array to it, you should see in the console an array filled with undefined the number of which corresponds to the length of the original passed array.

1 Like