Object value gets overwritten when calling a general method for 2nd time

Question

This is kind of strange. I am sure I am missing some basic concept of programming but not sure whats that. Because till now I have never faced this issue.

Let me explain my issue through programming:

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 above program, I am passing result as parameter to function, and storing the return value of it in "final_result.result1". But this gets overwritten when I call a different function with same params. The output what I am getting is:

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

Expected o/p is: {"result1":{"abc":10,"cde":20,"efg":30},"result2":{"abc":10,"cde":100,"efg":500}}

Why value of final_result.result1 gets overwritten by result.result2.

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

Can anyone please help me here.

http://jsbin.com/gofakajiqe/edit?js,console expected output is the only output i see. Also this might help https://stackoverflow.com/questions/13104494/does-javascript-pass-by-reference — bassxzero, Jun 13 '17 at 11:34
There is no need to add a screenshot or plunkr. Based on the code you provided you got the expected result, as shown by my jsbin link. If the code you provided is not producing the error then it's either a problem with something else or you need to update the code in your question. — bassxzero, Jun 13 '17 at 11:45
I do not know what you mean by expected result. My expected result is : {"result1":{"abc":10,"cde":20,"efg":30},"result2":{"abc":10,"cde":100,"efg":500}} But I am getting soemthing different. See this: http://jsbin.com/mepizecuka/edit?js,console — undefined, Jun 13 '17 at 11:54
I think I have got the issue..I should pass a copy of the object instead. Thanks for your time. — undefined, Jun 13 '17 at 12:30

score 0 · Accepted Answer · answered Jun 13 '17 at 12:11

There is no owerride you are passing same object to same referance and changing it after referance it. Let me explain it with a example.

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

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

If you want to pass and change the referance then you can clone it.

    var obj = {a:100};
    var holder = {};
    function changeValues( object )
    {
        object.a = 5;
    }
    console.log(JSON.stringify(obj));
    holder.test = jQuery.extend({}, obj); // our object is cloned now;
    holder.test2 = obj;// our object is same with holder.test2 now.
    // holder.test != 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 different object at holder.test...

Saurabh Tiwari · Answer 2 · 2017-06-13T12:26:13.163

I do not see any issue with the code here.

This is the way JavaScript works (or most of the languages work, when arguments are passed by the reference).

Your initial result is an object, which is a reference type in JavaScript. What this means is the same (single) reference will be passed to all your function.

Lets assume your result object was assigned a reference A somewhere in memory. So when you pass result to first function, its the reference A that is passed. Here you are not changing it and the returned output still points to A and the values are also same. You assigned same reference A to final_results.result1.

Thereafter, you passed result to function2, which means the same reference A is now passed to function2. this time you changed few values on it. This means the values are being changed on the reference and will be changed everywhere that reference is being used. Next, you assigned the output to final_results.result2.

Now you have a final_result obj which contains 2 properties and essentially these 2 properties refer to the same memory reference A. That's the reason both get changed after your second function call.

In nutshell : Objects and arrays too in JS are passed by reference, while other types like number, string are passed by value. So, the same issue wouldn't be seen if result initially was a primitive (say a number , like var result = 20).

Regarding the solution to handle this, @Burak has already shown you one way. There are others too. Maybe you should find them out.

"its the reference A that is passed" object's are pass by **copy** of a reference not by reference. — bassxzero, Jun 13 '17 at 12:28

Object value gets overwritten when calling a general method for 2nd time

2 Answers2