6

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");
Liam
  • 27,717
  • 28
  • 128
  • 190
Tom Tom
  • 85
  • 1
  • 1
  • 4
  • 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. –  Jun 12 '12 at 04:45
  • Oh, and answerees, **before you say** "pass by reference", please read [Evaluation strategies](http://en.wikipedia.org/wiki/Evaluation_strategy) and search for the term "reference" in the [ECMAScript specification](http://es5.github.com/) and be able to back up your word choices. Thanks! –  Jun 12 '12 at 04:49
  • 1
    thank you, I've found something interesting in [http://stackoverflow.com/](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object) just look at John Resig's answer. – Tom Tom Jun 12 '12 at 05:35

2 Answers2

3

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 commonly 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.

trincot
  • 317,000
  • 35
  • 244
  • 286
0

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.

Konstantin Pribluda
  • 12,329
  • 1
  • 30
  • 35
  • 2
    Response is too unclear/cryptic for this question and uses ill-defined terms: "changes reference to this array"? It also mixes up scope (assignment of a local variable) with object mutability (assignment of a property on an object). –  Jun 12 '12 at 05:02