JQuery/JavaScript: Why does function mess up array outside function?

Question

I don't get this! The function messup() is supposed to alter copy, not original. What do I do wrong?

<head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script>
        function messup(copy) {
            copy[0] ++;
            console.log(original);
            $('.putContentHere').html('<button class="plus">+</button>');
        }

        var original = [1, 1];
        var copy = original;

        $(document).ready(function() {
            messup(copy);

            $('html').on('click', '.plus', function() {
                messup(copy);
            });
        });
    </script>
</head>
<body>
    <div class="putContentHere"></div>
</body>

How can I preserve the original while the copy is being messed up?

You have to actually make a copy. A simple assignment like that just makes another variable reference the same array. — Pointy
– Pointy, Commented Apr 11, 2014 at 14:25
How do I make a copy? I'm new here; I wasn't aware of the difference. — user3021737
– user3021737, Commented Apr 11, 2014 at 14:27
@user3021737 - Are you new to programming? If yes, then object copying is a very important concept to know. :) — Derek 朕會功夫
– Derek 朕會功夫, Commented Apr 11, 2014 at 14:35
@Derek朕會功夫: I'm new to JavaScript. I know some PHP. No need to use the slice trick there. Thanks for responding. — user3021737
– user3021737, Commented Apr 11, 2014 at 14:51

Pointy · Accepted Answer · 2014-04-11 14:26:24Z

5

The simplest way to make a copy of an array is:

var copy = original.slice(0);

That makes a shallow copy of the array, which is fine for your purposes here.

A simple assignment:

var copy = original;

results in the new variable "copy" referencing the exact same array as "original". Arrays are objects, and variable values refer to objects.

The .slice() method didn't exist in old versions of IE, but those are of decreasing relevance.

answered Apr 11, 2014 at 14:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2014-04-11 14:29:30Z

Because var copy = original; is not copying an array.

What it does:
original ----------------------> Array
                                   |
                                   |
copy     --------------------------+      (The reference is copied)
=================================================================================
What you want:
original ----------------------> Array


copy     ----------------------> Array   (The Array itself is copied)

There are 3 (actually 4) types of copying an array: Shallow copy, Deep copy, reference copy.

In your code you are only copying the reference. What you want to do is a shallow copy or a deep copy.

var copy = original.slice(); //shallow copy

Jason Sapp · Accepted Answer · 2014-04-11 14:33:55Z

0

You are simply using a reference to the original array by doing

var copy = original;

Being that your array is just a set of integers, using

var copy = original.slice (0);

will copy your array and it's contents. So, for example:

var original = [1, 1, 1];
var copy = original.slice (0);

copy[1] = 2;
console.log (original); // This will print [1, 1, 1]
console.log (copy); // This will print [1, 2, 1]

answered Apr 11, 2014 at 14:33

Jason Sapp

537 bronze badges

Collectives™ on Stack Overflow

JQuery/JavaScript: Why does function mess up array outside function?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related