Quirky Behavior of an Array of Objects

Question

Quirky Behavior of an Array of Objects

const allocation = [
   {partner: 3},
   {partner: 1},
   {partner: 2},
   {partner: 0},
   {partner: 4}
];

const rightallocation = new Array(5);
rightallocation.fill({number: 1});

for (let i = 0; i < allocation.length; i++) {

   const rightIndex = allocation[i].partner;
   rightallocation[rightIndex].number = i;


   console.log("Filling "+ (i) + " into rightallocation["+ (allocation[i].partner)+"]");
   console.log(rightallocation[allocation[i].partner]);
}

console.log(rightallocation);

This script is designed to mirror the 'allocation' array. For example, if allocation[0] = 3, then rightallocation[3] should equal 0. Although all logs within the loop display correct numbers, the resultant array consists of mostly number:4 entries (last index).

Click here to view the console log.

javascript arrays javascript-objects

Answer 1

Answer №1

The reason for this issue is that the same object is being referenced multiple times in your rightallocation array.

For instance, in this line:

rightallocation[rightIndex].number = i;

Whenever you modify .number, it changes for all elements within the array since they all point to the same singular object created when you initialized the rightallocation array using:

rightallocation.fill({number: 1})

To resolve this, consider revising these lines:

const rightallocation = new Array(5);
rightallocation.fill({number: 1});

An alternative approach could be replacing them with something similar to:

const rightallocation = new Array(5).fill().map(u => ({number: 1}));

To ensure clarity and prevent such errors, try populating your array with more explicit objects like this, which guarantees each element is a unique object:

const rightallocation = [];

for (let i=0; i < 5; i++) {
  rightallocation.push({number: 1});
}

Answer 2

The reason for this issue is that the same object is being referenced multiple times in your rightallocation array.

For instance, in this line:

rightallocation[rightIndex].number = i;

Whenever you modify .number, it changes for all elements within the array since they all point to the same singular object created when you initialized the rightallocation array using:

rightallocation.fill({number: 1})

To resolve this, consider revising these lines:

const rightallocation = new Array(5);
rightallocation.fill({number: 1});

An alternative approach could be replacing them with something similar to:

const rightallocation = new Array(5).fill().map(u => ({number: 1}));

To ensure clarity and prevent such errors, try populating your array with more explicit objects like this, which guarantees each element is a unique object:

const rightallocation = [];

for (let i=0; i < 5; i++) {
  rightallocation.push({number: 1});
}

Quirky Behavior of an Array of Objects

Answer №1

Similar questions

What is the best way to convert Arabic language HTML into a PDF document on the client side?

Tips for retrieving a local variable from inside a callback and using it outside the function

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Proper method for validating Jwt

Leveraging web workers for asynchronous API calls

Clicking on a different texture/image allows for the texture to change in Three.js

When using Selenium WebDriver, the WebElement .findElement method can sometimes cause errors in JavaScript

Are there any lodash functions available for removing an array that matches another array from the main array?

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Tips on updating a div with jQuery AJAX in my PHP script - help needed!

Easy steps to automatically disable a checkbox once the expiration date has been reached

Updating serialized $_POST array with new key/value pair using jQuery AJAX

Sending blank AJAX data to a PHP function

Tips for utilizing rowspan and colspan in BootstrapTable

I am attempting to transfer information from one page to another in Next.js, but unfortunately, I am experiencing difficulties in

What is the rationale behind requiring a semicolon specifically for IE11 in this function?

Encountering the "excessive re-renders" issue when transferring data through React Context

JavaScript: Understanding the concept of closure variables

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

I am looking to create a PHP script that restricts access to individuals under the age of 18 based on the current