"Unexpectedly, the original values of an array were altered by a Javascript

Question

"Unexpectedly, the original values of an array were altered by a Javascript

After creating a constructor function to generate an object, I set up an array named arr1 with initial values.

Next, I use the map function on arr1 to create a new array called arr2.

However, I noticed that the original arr1 was altered. Could this be due to the asynchronous nature of callbacks during array initialization and event loops?

On a related note, I was inspired by my previous exploration of canvas in this post when working on this code.

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

https://i.sstatic.net/Kol2V.png

javascript arrays

Answer 1

Answer №1

When working with the `map` callback, it is important to consider how you are altering properties of each object (b)...

b.x = b.x+2;
b.y = b.y+2;

If you are aiming for immutability, you might want to try something like this:

const newArr = arr.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

This approach creates a new array with the updated values without modifying the original array.

function createPoint(x,y){
  return {x,y}
}

const originalArr = [createPoint(1,2), createPoint(3,4)];
console.log('originalArr', originalArr);

const newArr = originalArr.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

console.info('originalArr', originalArr);
console.info('newArr', newArr);

Answer 2

When working with the `map` callback, it is important to consider how you are altering properties of each object (b)...

b.x = b.x+2;
b.y = b.y+2;

If you are aiming for immutability, you might want to try something like this:

const newArr = arr.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

This approach creates a new array with the updated values without modifying the original array.

function createPoint(x,y){
  return {x,y}
}

const originalArr = [createPoint(1,2), createPoint(3,4)];
console.log('originalArr', originalArr);

const newArr = originalArr.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

console.info('originalArr', originalArr);
console.info('newArr', newArr);

Answer 3

Answer №2

Utilizing the map function results in the creation of a fresh array, yet this array contains references to the objects. Therefore, any modifications made to the object b in the map are essentially adjustments to the original points, not duplicates.

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];

arr2 = arr1.map((b, i)=>{
  // b IS one of the objects from arr1
  console.log(`b === arr1[${i}]`, b === arr1[i])
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

Alternatively, you can create a new point:

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
arr2 = arr1.map(({x, y}) => point(x + 2, y + 2))

console.log(arr1, "arr1")
console.log(arr2, "arr2")

Answer 4

Utilizing the map function results in the creation of a fresh array, yet this array contains references to the objects. Therefore, any modifications made to the object b in the map are essentially adjustments to the original points, not duplicates.

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];

arr2 = arr1.map((b, i)=>{
  // b IS one of the objects from arr1
  console.log(`b === arr1[${i}]`, b === arr1[i])
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

Alternatively, you can create a new point:

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
arr2 = arr1.map(({x, y}) => point(x + 2, y + 2))

console.log(arr1, "arr1")
console.log(arr2, "arr2")

Answer 5

Answer №3

The explanation for the behavior you are observing is that .map() creates shallow copies of the elements in a new array.

This particular line modifies the values of x and y in each element of the original array.

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

It is advisable to only return new values for x and y without altering the original array element, like so:

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})

You can use the code snippet below to generate a new array with updated x and y values without changing the original array elements.

function point(x, y) {
  return { x, y }
}

arr1 = [point(1, 2), point(3, 4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

Answer 6

The explanation for the behavior you are observing is that .map() creates shallow copies of the elements in a new array.

This particular line modifies the values of x and y in each element of the original array.

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

It is advisable to only return new values for x and y without altering the original array element, like so:

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})

You can use the code snippet below to generate a new array with updated x and y values without changing the original array elements.

function point(x, y) {
  return { x, y }
}

arr1 = [point(1, 2), point(3, 4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

Answer 7

Answer №4

One aspect that has been highlighted is the issue related to reassigning values to your arr while using map. However, it is important to note the side effect you witnessed with the initial console log on arr1 being updated as well. This behavior can be seen as a limitation, depending on the perspective.

function createPoint(x,y){
  return {x,y}
}

arr1 = [createPoint(1,2), createPoint(3,4)];
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

arr1[0] = {x: 15, y: 42};
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

jsFiddle

Take note of how the "opened" arrays display the values at the time the console log was executed. However, when expanding the first console log with the nested array, it shows the updated values.

This side effect cannot be observed by running the code as a snippet. It needs to be executed in a browser for the console to show the output.

Answer 8

One aspect that has been highlighted is the issue related to reassigning values to your arr while using map. However, it is important to note the side effect you witnessed with the initial console log on arr1 being updated as well. This behavior can be seen as a limitation, depending on the perspective.

function createPoint(x,y){
  return {x,y}
}

arr1 = [createPoint(1,2), createPoint(3,4)];
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

arr1[0] = {x: 15, y: 42};
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

jsFiddle

Take note of how the "opened" arrays display the values at the time the console log was executed. However, when expanding the first console log with the nested array, it shows the updated values.

This side effect cannot be observed by running the code as a snippet. It needs to be executed in a browser for the console to show the output.

"Unexpectedly, the original values of an array were altered by a Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

Steps to resolve the issue: The current experimental syntax 'classProperties' is not supported

When utilizing a clone in a Draggable and Droppable scenario, the data/attribute is obtained from the

Running JavaScript code for the iframe

Updating state based on input from a different component

What is the process of saving an empty array as a property of a nested object in Mongoose?

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

What is the significance of the exclamation point before and after in JavaScript?

Dispatching information to a designated Google Analytics tracking code

Display a DIV next to the mouse cursor when a span is hovered over

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

What could be causing the "Error - Only secure origins are permitted" message to appear for my service worker?

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

"Trying to access the Reducer in a container results in an undefined value

Accessing Facebook through the React create app login

Is it possible for a dash in a GET variable name to cause issues with req.query in NodeJS Express?

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

What is the best way to animate changes to a background image using jQuery?

Updating a function in jQuery UI after dynamically loading content through AJAX

JavaScript Application - Problem with Universal Windows Script