Why the two scripts behave differently? I want the to use the first script, but in the second drawData() call it changes data; it's weird and not what I want to happen. The second script does not have this problem. Why is it like that, and how can I fix the first script?

First script does not change data:

    var data = ["right"];

    function drawData(arrs, type) {
        if (type == "percentage") {
            arrs[0] = "omg";
        }
        console.log(data[0]); // Changed!?
    }
    drawData(data);
    drawData(data, "percentage");

Why the two scripts behave differently? I want the to use the first script, but in the second drawData() call it changes data; it's weird and not what I want to happen. The second script does not have this problem. Why is it like that, and how can I fix the first script?

First script does not change data:

    var data = ["right"];

    function drawData(arrs, type) {
        if (type == "percentage") {
            arrs[0] = "omg";
        }
        console.log(data[0]); // Changed!?
    }
    drawData(data);
    drawData(data, "percentage");

Second script:

    var data = "right";

    function drawData(arrs, type) {
        if (type == "percentage") {
            arrs = "omg";
        }
        console.log(data); // OK, not changed.
    }
    drawData(data);
    drawData(data, "percentage");

• javascript
• arrays
• object

• 4 It is because an object is itself. When an object is modified that object is modified. When a value (object) is passed to a function it is not copied, cloned or duplicated (internally there are different techniques that are used, but this is semantically correct). That is, there is only one array -- and that same array is changed inside the function. If you wish to be able to change it without fear of affecting the outside, make a copy first. For a simple array this can be done with Array.prototype.slice. Otherwise, libraries like jQuery have handy copy methods. – user166390 Commented Jun 12, 2012 at 4:45
• Oh, and answerees, before you say "pass by reference", please read Evaluation strategies and search for the term "reference" in the ECMAScript specification and be able to back up your word choices. Thanks! – user166390 Commented Jun 12, 2012 at 4:49
• 1 thank you, I've found something interesting in http://stackoverflow./ just look at John Resig's answer. – Tom Tom Commented Jun 12, 2012 at 5:35

2 Answers 2

This is the difference between assignment to a local variable and mutation of the given object.

In both pieces of code arrs is a local variable, distinct from data. But the elements and other properties of arrs are exactly the same as those of data. Making changes to those property values (which is monly called mutation of the object/array) will be visible whether you access them via arrs or via data. And this is exactly what the first script does.

The second script however, does not change a property value of arrs, but assigns an entirely new value to arrs, so that now it does not share any properties any more with data. This is even more apparent, because both data and arrs are primitive values which cannot mutate like explained in the previous paragraph. But even if they were objects or arrays, and you would do the following assignment:

arrs = [1234];

It would not affect data. data would only be affected if you would assign to a property/index of arrs without assigning to arrs directly.

First variant modifies object passed as parameter to function (which happens to be array) - so this change is seen outside function. Second variant assigns new value to function parameter (which happens to be reference to array) but does not change array itself.