The value of an object is replaced when a general method is called for the second time

Question

The value of an object is replaced when a general method is called for the second time

I seem to be missing a fundamental concept in programming as I am encountering an unusual issue that I have never faced before.

Let me illustrate my problem through this code snippet:

var result = {abc: 10, cde: 20, efg: 30};
var final_result = {};
var customFunction1 = function(results){
  console.log(results);
  return results; // result= {abc: 10, cde: 20, efg: 30}
};
var customFunction2 = function(results){
 results.cde = 100;
 results.efg = 500;
 return results; // {abc: 10, cde: 100, efg: 500}
};
final_result.result1 = customFunction1(result);
final_result.result2 = customFunction2(result);
console.log(final_result);

In the code above, I'm passing the "result" object as a parameter to functions and storing the returned value in "final_result.result1". However, this value gets overwritten when I call another function with the same parameters. The output I am currently receiving is:

{"result1":{"abc":10,"cde":100,"efg":500},"result2":{"abc":10,"cde":100,"efg":500}}

The expected output should be: {"result1":{"abc":10,"cde":20,"efg":30},"result2":{"abc":10,"cde":100,"efg":500}}

I'm puzzled why the value of "final_result.result1" is being overwritten by "result.result2".

JSBin http://jsbin.com/mepizecuka/edit?js,console
Plunkr http://plnkr.co/edit/BF0UNnacV9UeXtyk3stI?p=preview

If anyone could provide some assistance, it would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

When you pass the same object to the same reference and then change it, there is no override happening. Let me illustrate this with an example.

var obj = {a:100};
var holder = {};
function changeValues( object )
{
    object.a = 5;
}
console.log(JSON.stringify(obj));
holder.test = obj; // our object is now assigned to holder.test.
holder.test2 = obj;// our object is now also assigned to holder.test2.
// holder.test = holder.test2 now;

changeValues(holder.test);
console.log(JSON.stringify(obj));

If you want to pass and change the reference, you can clone the object instead.

    var obj = {a:100};
    var holder = {};
    function changeValues( object )
    {
        object.a = 5;
    }
    console.log(JSON.stringify(obj));
    holder.test = jQuery.extend({}, obj); // now our object is cloned;
    holder.test2 = obj;// our object is still assigned to holder.test2.
    // holder.test is not equal to holder.test2 now;

    changeValues(holder.test);
    console.log(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now you have a different object at holder.test...

Answer 2

When you pass the same object to the same reference and then change it, there is no override happening. Let me illustrate this with an example.

var obj = {a:100};
var holder = {};
function changeValues( object )
{
    object.a = 5;
}
console.log(JSON.stringify(obj));
holder.test = obj; // our object is now assigned to holder.test.
holder.test2 = obj;// our object is now also assigned to holder.test2.
// holder.test = holder.test2 now;

changeValues(holder.test);
console.log(JSON.stringify(obj));

If you want to pass and change the reference, you can clone the object instead.

    var obj = {a:100};
    var holder = {};
    function changeValues( object )
    {
        object.a = 5;
    }
    console.log(JSON.stringify(obj));
    holder.test = jQuery.extend({}, obj); // now our object is cloned;
    holder.test2 = obj;// our object is still assigned to holder.test2.
    // holder.test is not equal to holder.test2 now;

    changeValues(holder.test);
    console.log(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now you have a different object at holder.test...

Answer 3

Answer №2

The code in question appears to be functioning correctly without any issues.

This behavior is typical of JavaScript (as well as many other languages) where arguments are passed by reference.

When you initially create the result object, it is a reference type in JavaScript. This means that the same reference will be shared across all functions.

Imagine that your result object has been assigned a reference A in memory. When you pass this to the first function, it's the reference A that gets passed. Since you're not modifying it, the returned output still points to A with the values remaining the same. The same reference A is then assigned to final_results.result1.

Subsequently, passing the result to

function2</code means the same reference <code>A

is passed again. However, this time some values are changed on it. These changes affect the reference and will reflect wherever that reference is used. The modified output is then assigned to final_results.result2.

In essence, the final_result object now consists of 2 properties that both point back to the same memory reference A. Hence, any modifications made after the second function call impact both properties.

To summarize: Objects and arrays in JavaScript are passed by reference, while primitive types like number and string are passed by value. If the initial data had been a primitive type (e.g., a number like var result = 20), such issues wouldn't have arisen.

As for addressing this issue, @Burak has provided one solution already. There are additional approaches worth exploring as well; perhaps you can discover them yourself.

Answer 4

The code in question appears to be functioning correctly without any issues.

This behavior is typical of JavaScript (as well as many other languages) where arguments are passed by reference.

When you initially create the result object, it is a reference type in JavaScript. This means that the same reference will be shared across all functions.

Imagine that your result object has been assigned a reference A in memory. When you pass this to the first function, it's the reference A that gets passed. Since you're not modifying it, the returned output still points to A with the values remaining the same. The same reference A is then assigned to final_results.result1.

Subsequently, passing the result to

function2</code means the same reference <code>A

is passed again. However, this time some values are changed on it. These changes affect the reference and will reflect wherever that reference is used. The modified output is then assigned to final_results.result2.

In essence, the final_result object now consists of 2 properties that both point back to the same memory reference A. Hence, any modifications made after the second function call impact both properties.

To summarize: Objects and arrays in JavaScript are passed by reference, while primitive types like number and string are passed by value. If the initial data had been a primitive type (e.g., a number like var result = 20), such issues wouldn't have arisen.

As for addressing this issue, @Burak has provided one solution already. There are additional approaches worth exploring as well; perhaps you can discover them yourself.

The value of an object is replaced when a general method is called for the second time

Answer №1

Answer №2

Similar questions

Modify Javascript to exclusively focus on SVG paths

Determining the navigation changes within a React browser

Error: Headers cannot be set once they have already been sent

What could be causing my search function to not recognize special characters?

Amend the value in the database

Utilize the splice function when resizing the window based on specific breakpoints

"JavaScript encountered an Uncaught TypeError: Cannot read property 'style' of undefined

A guide on extracting data from a mongoose model and assigning it to a variable in a manner similar to the MVC design pattern

Performing multiple ajax calls simultaneously in JavaScript using the React framework

Establish a connection that mirrors the previously clicked hyperlink

I am able to successfully receive accurate data in JSON format, however I am facing difficulties binding it to a jquery

How to effectively utilize $emit in Angular?

Tips for correctly linking JS and CSS resources in Node.js/Express

Removing chips in Material UI can be easily accomplished by following these steps

Implement a procedure for printing a page once the columnize operation has been completed

Having issues with the onclick() function not functioning properly with Jquery?

Listening to JavaScript Events with SWT Browser Widget: A How-To Guide

What is the best way to retrieve the value of an UL LI element using jQuery

Utilize the `multiselect` false attribute in conjunction with the `checkboxCell

Implementing conditional statements in Puppeteer web scraping