Changing the value of a variable after iterating through an array in JavaScript

Question

Changing the value of a variable after iterating through an array in JavaScript

I'm just getting started with programming and teaching myself. I'm struggling to grasp how to update a variable by iterating through an array.

Here's an array containing the best pies, each with its own price:

[blueberry, strawberry, pumpkin, apple]

I want the total to increment based on the price using conditional statements, like this:

    var total = 0
    arr.map(pie => {
    if (pie==="blueberry") {
    total = total + 2.5;}
    else if (pie === "apple") {
    total = total + 2}}

However, the total only reaches 2.5 before resetting to 0. So instead of 4.5, I end up with a total of 2 because "apple" was the last pie. :(

What causes this issue, and how can I ensure the total is preserved and continues to accumulate the prices of the other pies?

javascript arrays if-statement iteration

Answer 1

Answer №1

let items = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var total = 0

items.forEach(item => {
    if (item==="blueberry") {
    total += 2.5;
    }
    else if (item === "apple") {
    total += 2
    }
});

console.log(total)

Instead of utilizing map function, consider using forEach instead.

A brief explanation is as follows:

forEach() — executes a provided function once for each array element.

map() — creates a new array with the results of calling a provided function on every element in the calling array.

Answer 2

let items = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var total = 0

items.forEach(item => {
    if (item==="blueberry") {
    total += 2.5;
    }
    else if (item === "apple") {
    total += 2
    }
});

console.log(total)

Instead of utilizing map function, consider using forEach instead.

A brief explanation is as follows:

forEach() — executes a provided function once for each array element.

map() — creates a new array with the results of calling a provided function on every element in the calling array.

Answer 3

Answer №2

It seems like your example is still giving an output of 4.5. However, it might be beneficial for you to check out the API documentation for javascript to gain a better understanding of it.

Here, the map function allows you to create another array from the current one. If you want to keep your existing code, you can simply switch from using .map() to .forEach().

var arr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var totalMap = 0;
var totalForeach = 0;
arr.map(pie=>{
    if (pie === "blueberry") {
        totalMap = totalMap + 2.5;
    } else if (pie === "apple") {
        totalMap = totalMap + 2;
    }
});
arr.forEach(pie=>{
    if (pie === "blueberry") {
        totalForeach = totalForeach + 2.5;
    } else if (pie === "apple") {
        totalForeach = totalForeach + 2;
    }
});
console.log('map total:',totalMap);
console.log('forEach total:', totalForeach);

Answer 4

It seems like your example is still giving an output of 4.5. However, it might be beneficial for you to check out the API documentation for javascript to gain a better understanding of it.

Here, the map function allows you to create another array from the current one. If you want to keep your existing code, you can simply switch from using .map() to .forEach().

var arr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var totalMap = 0;
var totalForeach = 0;
arr.map(pie=>{
    if (pie === "blueberry") {
        totalMap = totalMap + 2.5;
    } else if (pie === "apple") {
        totalMap = totalMap + 2;
    }
});
arr.forEach(pie=>{
    if (pie === "blueberry") {
        totalForeach = totalForeach + 2.5;
    } else if (pie === "apple") {
        totalForeach = totalForeach + 2;
    }
});
console.log('map total:',totalMap);
console.log('forEach total:', totalForeach);

Answer 5

Answer №3

As previously stated by Issac, it is generally frowned upon to use the map function for side effects such as updating an accumulator. However, the example you provided should function correctly as shown below:

let arr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var total = 0

arr.map(pie => {
  if (pie==="blueberry") {
    total = total + 2.5;}
  else if (pie === "apple") {
    total = total + 2}
})

console.log(total)

Answer 6

As previously stated by Issac, it is generally frowned upon to use the map function for side effects such as updating an accumulator. However, the example you provided should function correctly as shown below:

let arr = ['blueberry', 'strawberry', 'pumpkin', 'apple']
var total = 0

arr.map(pie => {
  if (pie==="blueberry") {
    total = total + 2.5;}
  else if (pie === "apple") {
    total = total + 2}
})

console.log(total)

Changing the value of a variable after iterating through an array in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Comparison between a Typescript optional field and a field that has the potential to be undefined

Reveal the MongoDB database connection to different sections within a Next.js 6 application

A guide on setting up dual observables in Angular 2

Is there a way to continuously click on a button 99 times or until the code finishes running?

Issue with Checkbox Functionality Between Parent and Child Components in React.js

js.executeScript produces a Unexpected identifier error

Tips for presenting random images from an assortment of pictures on a webpage

Display the printed outcome in a fresh window

Is there a way to trim JSONP data to only obtain the year value

Having trouble getting the JQuery Tipsy tooltip to display correctly with D3.js circles?

Tips on converting mysql results to JSON using PHP

Compute the total value stored in a sqlite database and display the result

Mastering the art of counting down using a forEach loop in JavaScript

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Encountered a TypeError in React 16.7: The function (0, _react.useState) is not recognized

Tips on implementing v-show within a loop

Generate unique div elements randomly using jQuery and Javascript to populate a container

Bringing joy to a JS library: Embracing both Node and the Window

Is there a delay in using ngShow and ngClick for authentication in AngularJS and Firebase?

Transforming the text to a new line