How to avoid reflection of two array which holds the same objects?

Question

I'm having two arrays of same objects,

var callHistory = [{"CallId":1,"Note":"abcdefghijklmnop"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];
var tempHistory = [{"CallId":1,"Note":"abcdefghijklmnop"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];

for(var i = 0; i < tempHistory .length; i++)
{
    var callNote = tempHistory [i]["Note"];
    if(callNote.length > 6)
    {
        callNote = callNote.slice(0, 5);
        tempHistory [i]["Note"] = callNote;
    }
}

Here i'm changing the Note value of tempHistory array of index 0, but i'm getting the reflected response on callHistory also.

After the end of for loop.

callHistory = [{"CallId":1,"Note":"abcdef"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];
tempHistory = [{"CallId":1,"Note":"abcdef"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];

How it is getting reflected and is there anyway to stop those kind reflection.

Answer 1

You need to clone the object How do I correctly clone a JavaScript object? :

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

var callHistory = [{"CallId":1,"Note":"abcdefghijklmnop"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];
var tempHistory = [{"CallId":1,"Note":"abcdefghijklmnop"}, {"CallId":2,"Note":"123343"}, {"CallId":3,"Note":"abc123"}];

for(var i = 0; i < tempHistory .length; i++)
{
    var callNote = clone(tempHistory [i]["Note"]);
    if(callNote.length > 6)
    {
        callNote = callNote.slice(0, 5);
        tempHistory [i]["Note"] = callNote;
    }
}

console.log(callHistory);
console.log(tempHistory);