The value of a variable undergoes a transformation following its insertion into an

Question

The value of a variable undergoes a transformation following its insertion into an

During my coding tests, I came across this snippet of code:

<script>
  var newData = {}, graphs = []
  for(var j=0; j<2; j++){
    newData["name"] = 'value '+ j
    console.log(newData["name"]);
    graphs.push(newData);
    console.log(graphs);
  }
</script>

When I checked the web console, I saw the following output:

value 0 
Array [ Object ] 
value 1 
Array [ Object, Object ]

It's strange that all the objects in the arrays have the same values:

name:"value 1"

I find it puzzling because I'm not changing any values and the name is still being updated in the same loop.

I appreciate your insights on this issue!

javascript arrays

Answer 1

Answer №1

Storing an object in an array in JavaScript involves placing a pointer to the object in the array, not the actual data of the object. For instance, in the provided case, a single object, newData, is created and its name property is modified within a loop. Consequently, after the loop, the newData object will have the value {'name': 'value 2'}.

Upon examining graphs[0], it will be evident that it holds a pointer to newData, displaying {'name': 'value 2'}. The same logic applies to graphs[1].

To rectify this, a new object should be created for each iteration as shown here:

graphs = []
for(var j=0; j<2; j++){
  var newData = {}
  newData["name"] = 'value '+ j
  console.log(newData["name"]);
  graphs.push(newData);
  console.log(graphs);
}

Answer 2

Storing an object in an array in JavaScript involves placing a pointer to the object in the array, not the actual data of the object. For instance, in the provided case, a single object, newData, is created and its name property is modified within a loop. Consequently, after the loop, the newData object will have the value {'name': 'value 2'}.

Upon examining graphs[0], it will be evident that it holds a pointer to newData, displaying {'name': 'value 2'}. The same logic applies to graphs[1].

To rectify this, a new object should be created for each iteration as shown here:

graphs = []
for(var j=0; j<2; j++){
  var newData = {}
  newData["name"] = 'value '+ j
  console.log(newData["name"]);
  graphs.push(newData);
  console.log(graphs);
}

Answer 3

Answer №2

Please note: It is important to reinitialize the variable newData within the loop. This is because the object reference of newData remains the same, causing it to overwrite the old value with the new value each time. As a result, only the latest value will be visible.

Consider trying the following code:

<script>
    var items = [];
    for(var i=0; i<3; i++){
      var newData = {};
      newData["title"] = 'item '+ i
      console.log(newData["title"]);
      items.push(newData);
      console.log(items);
   }
 </script>

Answer 4

Please note: It is important to reinitialize the variable newData within the loop. This is because the object reference of newData remains the same, causing it to overwrite the old value with the new value each time. As a result, only the latest value will be visible.

Consider trying the following code:

<script>
    var items = [];
    for(var i=0; i<3; i++){
      var newData = {};
      newData["title"] = 'item '+ i
      console.log(newData["title"]);
      items.push(newData);
      console.log(items);
   }
 </script>

Answer 5

Answer №3

Shout out to deceze for the helpful response! I totally blanked on the fact that Js uses call by reference. Check out this revised code snippet:

var charts = []
  for(var k=0; k<3; k++){ 
    updatedData = {}
    updatedData["label"] = 'item '+ k
    console.log(updatedData["label"]);
    charts.push(updatedData);
    console.log(charts);
  }

Answer 6

Shout out to deceze for the helpful response! I totally blanked on the fact that Js uses call by reference. Check out this revised code snippet:

var charts = []
  for(var k=0; k<3; k++){ 
    updatedData = {}
    updatedData["label"] = 'item '+ k
    console.log(updatedData["label"]);
    charts.push(updatedData);
    console.log(charts);
  }

The value of a variable undergoes a transformation following its insertion into an

Answer №1

Answer №2

Answer №3

Similar questions

Showing JSON data as a table in an HTML format

Guidelines for integrating deep links into a ReactJS Ionic Android application

Acquire the jQuery cookie with the power of AngularJS

Unlocking the potential: Clicking on all ng-if elements with matching text using Chrome console

Determine the status of caps lock with a single click of a button

The submission of the form proceeds even with the warning displayed

Creating a functionality in a stack program to track the number of times an object has been shifted

Is it possible to implement a modal within my API services?

Durable Container for input and select fields

RaphaelJS: Ensuring Consistent Size of SVG Path Shapes

Testing actual HTTP requests in unit and integration tests with AngularJS

The unexpected occurence of the Onbeforeunload exception

Challenges with adjusting the value of HTML range inputs

Customize a web template using HTML5, JavaScript, and jQuery, then download it to your local device

What is the correct way to format responses written within response.write() in NodeJS?

What is the best way to transfer a value to v-model using emit?

Do we really need Renderer2 in Angular?

Upon initializing mean.io assetmanager, a javascript error is encountered

What is the best way to retain previous values without using an object array to store values in a React state?

extract and display attribute values from a JSON array using Angular2