Achieving different results by modifying an array within a forEach loop

Question

Achieving different results by modifying an array within a forEach loop

I am currently working on a forEach() function that increments an array by one for each iteration.

The problem I am facing is that whenever I try to display the value of the number variable in the browser's console, it only shows me the final state instead of the current one. Is this inconsistency normal or could there be something fundamentally wrong with my code?

Here is the console output for reference

let array = 
[
   {
      "id":1,
   },
   {
      "id":2,
   },
   {
      "id":3,
   }
]

let number = [0]

array.forEach(() => {
    number[0] += 1
    console.log(number)
})

javascript

Answer 1

Answer №1

The final output shows the array reference in its last state after the forEach loop has been executed. After running, the array contains one element with a value of 3.

To understand the change in value, focus on logging the actual value rather than just the reference.

let array = 
[
   {
      "id":1,
   },
   {
      "id":2,
   },
   {
      "id":3,
   }
]

let number = [0]

array.forEach(() => {
    number[0] += 1
    console.log(number[0]) // <--- this is the difference
})

Answer 2

The final output shows the array reference in its last state after the forEach loop has been executed. After running, the array contains one element with a value of 3.

To understand the change in value, focus on logging the actual value rather than just the reference.

let array = 
[
   {
      "id":1,
   },
   {
      "id":2,
   },
   {
      "id":3,
   }
]

let number = [0]

array.forEach(() => {
    number[0] += 1
    console.log(number[0]) // <--- this is the difference
})

Achieving different results by modifying an array within a forEach loop

Answer №1

Similar questions

Iterating through HTML table data using a JQuery for each loop

What is the process for importing the required dependencies for the maps module in react-svg-map?

Using HTML as an argument in a JavaScript function

After an ajax request, the Jquery hover effects are no longer functional

React virtual list module: Scrolling down through code commands

Select an image based on the input value provided

When switching back to the parent window and attempting to execute an action, a JavaScript error is encountered

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Transferring data from SocketIO to Vue.js

When using ngClick with a parameter, the parameter is not being successfully passed

Retrieving Content within <b></b> Tags from an RSS Feed XML (with Javascript/React)

Regular Expression to Replace Characters Not Matching

Scrolling through a lengthy table without affecting the overall window scroll

I am looking to retrieve products based on category alone, category and model together, or simply obtain all products in one go. At the moment, I am utilizing three distinct endpoints

What are some alternative methods for downloading the latest file version without relying on the client cache?

Is it possible to incorporate a variable into an object?

Querying a document by its Id using only JSON in MongoDB

Are $(function() { }) and $(document).ready(function() { }) the same function under the hood?

unable to render the JavaScript code

Display Material checkbox based on a condition