A few days ago I was debugging an issue in one web application.
All tracks were pointing to Java Script logic that shortly speaking was creating a copy of the array and then modifying the destination array.

Problem

Check out the code below. I must say I wasn’t expecting the result I saw.

1
2
3
4
5
6
    var alphabet = ['a', 'b', 'c'];
    var newAlphabet = source;
    newAlphabet.push('d');

    console.log(alphabet);
    console.log(newAlphabet);

Surprisingly for me the output was:

    ["a", "b", "c", "d"]
    ["a", "b", "c", "d"]

Wait a minute. Wasnt’t I just modifying newAlphabet array?
Not really. Turns out that:

    var newAlphabet = alphabet;

is treated as setting newAlphabet with a reference to alphabet array. NewAlphabet array is never created/copied. That way modifying newAlphabet variable was modifying alphabet array.

Solution

In order to achive my goal I needed to somehow clone the array content. After googling around I found out that answer to that question was not that trivial. One of the most often given solutions was to use JavaScript slice function:

1
2
    var alphabet = ['a', 'b', 'c'];
    var newAlphabet = source.slice();

The function was giving correct results. I was more then happy to fix that bug.

However I started to think if it is also going to work with more complex arrays…

I will try to tell you more about my findings in next part of that post.

Stay tuned :)