The quirky behavior of JavaScript's Array.reduce

Here is a snippet of code:

let data = [1, 2];
let newBody = {};

let newArray = data.reduce((acc, current) => {
  newBody.doc = current;
  acc.push(newBody);
  return acc;
}, []);

The resulting array is:

newArray = [ { doc: 2 }, { doc: 2 } ]

If I redeclare the empty newBody inside the loop, it works correctly. However, if I declare it outside the loop, the value of the last array element is applied to all other elements and I'm unsure why.

Answer №1

Accidentally leveraging a closure, make sure the newBody is placed in its appropriate scope:

let items = [5, 10];

let updatedArray = items.reduce((accumulator, currentElement) => {
  let freshData = {};
  freshData.value = currentElement;
  accumulator.push(freshData);
  return accumulator;
}, []);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Implementing a feature in React JS react-table to dynamically add a new column when a

I'm struggling to add a new column to react-table when a button is clicked. Even after re-rendering the table with a flag, I can't seem to add the new column. Can anyone suggest where I might be going wrong? Here's the link to the executable ...

Code with Javascript using Selenium and WebdriverIO framework

When conducting tests, my directory structure is set up as follows: custom lib tests pages Each JavaScript function that is written in the 'custom' directory can be accessed by the 'test' directory through a "browser ...

Duplicate data insertion issue encountered when choosing from table utilizing checkbox

I'm having issues with the loop in this code. Whenever I select data from a table using checkboxes (which is generated using JSON), the selected data gets added multiple times. What could be causing the problem in this code snippet that loops through ...

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

Error message "Error: listen EADDRINUSE" is reported by node.js when calling child_process.fork

Whenever the 'child_process.fork('./driver')' command is executed, an error occurs: Error: listen EADDRINUSE at exports._errnoException (util.js:746:11) at Agent.Server._listen2 (net.js:1156:14) at listen (net.js:1182:10) ...

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

"Unlock the Power of VueJS 2 with Dynamic Templates

Just starting out as a VueJS student! I created a "MainTemplate.vue", which includes a menu, footer, header... Then I decided to create another .vue file named "ComponentB.vue". Here is the content of my ComponentB.vue file: <template> <h ...

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

Ways to deactivate the submit button using Cookies, sessions, or local storage

Although cookies and storage can be deleted, they can still help prevent many human spammers who are unaware of this. How can I temporarily disable the form submit button on a specific page for just one day? I want to create a code that saves "Submitted" ...

Error encountered while fetching files from Google Cloud bucket using Firebase functions: RangeError - Maximum call stack size exceeded

I'm currently trying to access Firestore backup files stored in a Google Cloud bucket: export const retrieveFirestoreBackup = functions.https.onCall( async (data: RetrieveFirestoreBackupPayload, context) => { try { return await sto ...

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

Ways to implement $map in a MongoDB $projection

I am working with a database that contains documents structured like this: { _id: 123, metrics: [{ _id: ObjectID(…), name: 'foo', steps: [1, 2, 3, …], values: [10, 12, 13, ...

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Here is the HTML code I am using to input prompts into a chatbot: <div class="input-group mb-3"> <input type="text" class="form-control" id="chat-input"> <div class="input-group-append ...

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

My API endpoint for the post operation query using mongoose is not returning the updated array after adding a new item. I have been struggling with this issue for 3 days without any success. Any help would be greatly appreciated. router.post("/:spot ...

Halt scrolling news feed when hovering over with the mouse

I'm currently working on a news ticker on this jsfiddle, but it's not functioning as I'd like. Here are the issues I'm facing: When I increase the width and height of all the divs, it doesn't work properly as the last divs over ...

Switching the hierarchy of list items in React

I have a JSON structure with nested elements. const JSON_TREE = { name: "PARENT_3", id: "218", parent: { name: "PARENT_2", id: "217", parent: { name: "PARENT_1", i ...

Issue with Vue 2: Promise does not resolve after redirecting to another page

Although I realize this question might seem like a repetition, I have been tirelessly seeking a solution without success. The issue I am facing involves a method that resolves a promise only after the window has fully loaded. Subsequently, in my mounted h ...

Ensure no duplicate values are added to the array during population

I am encountering an issue with populating an array with 6 randomly generated numbers. The process involves generating a random number between 1 and 49, checking it against existing numbers in the array, and adding it to the array if no duplicates are foun ...

Locate the element within the specified parameters using [protractor]

Here's my query: element.all(by.repeater('user in users')).then(function(rows) { // looking to locate an element in rows using CSS selector, for example } UPDATE : I want to clarify that I am trying to find an element using rows[rows.len ...