Parameter Passing: In and Out

Question

Consider:

Primitive data types are passed by value in JavaScript. This means that a copy is effectively made of a variable when it is passed to a function, so any manipulation local to the function leaves the original variables untouched.

function fiddle(arg1) {
      arg1 = "Fiddled with";
      console.log("In function fiddle str = "+arg1+"<br>");
}
var str = "Original Value";
console.log("Before function call str = "+str+"<br>");
fiddle(str);
console.log("After function call str ="+str+"<br>");

EASY

composite types such as arrays and objects if used, they are passed by reference rather than value

Consider the following modification of the previous fiddle() function:

function fiddle(arg1) {
       arg1[0] = "Fiddled with";
       console.log("In function fiddle arg1 = "+arg1+"<br>");
}
var arr = ["Original", " Original ", " Original "];
console.log("Before function call arr = "+arr+"<br>");
fiddle(arr);
console.log("After function call arr ="+arr+"<br>");

FINE till here

From here I find myself really confused,

function fiddle(arg1) {
      arg1 = ["Blasted!","Blasted!"];
      console.log("In function fiddle arg1 = "+arg1+"<br>");
}
var arr = ["Original", " Original ", " Original "];
console.log("Before function call arr = "+arr+"<br>");
fiddle(arr);
console.log("After function call arr ="+arr+"<br>"); // Why this hasn't changed?

Any suggestion? And will it be OK to say

composite types such as arrays and objects if used, they are passed by reference rather than value

in this case too?

possible duplicate of [Why isn't this object being passed by reference when assigning something else to it?](http://stackoverflow.com/questions/9437981/why-isnt-this-object-being-passed-by-reference-when-assigning-something-else-to) — JJJ, Sep 12 '15 at 19:55
If you do `arg1.push("Blasted!","Blasted!");` then changes are done to the original, but you're creating a new array inside fiddle by using `arg1 = []`. — Data, Sep 12 '15 at 19:57
Assigning to a name is not the same as mutating the object that name happens to refer to. The former only changes the name binding. The latter the object. — Dan D., Sep 12 '15 at 20:00

score 1 · Answer 1 · answered Sep 12 '15 at 19:53

1

Seems pretty clear, inside fiddle you're overwriting the reference to arr with an array you created on the spot. You never touched arr itself through its reference, just the reference, so once you're outside again, arr is still the original array.

answered Sep 12 '15 at 19:53

Blindy

65,249
10
91
131

@Blindly: I Appreciate your answer. – Farhan stands with Palestine Sep 12 '15 at 20:16

score 1 · Answer 2 · edited May 23 '17 at 12:29

That is because the bracket notation (for arrays) or the dot notation (for objects) allows you to mutate objects within an array/object, which will propagate up and outwards the scope of the function as they are passed by reference, even though the "parent" object is passed by value. This feature is known as call-by-sharing, as addressed in a previous question. In short:

Everything is passed by value, but...
Objects within the "everything" (if exists, i.e. for arrays and objects) is passed by reference

If you want to modify arr outside of the scope of the fiddle() function, you will have to return it, i.e.: return arr1; and then assign arr = fiddle(arg1[,arg2,...]), like as follow:

function fiddle(arg1) {
  arg1 = ["Blasted!","Blasted!"];
  $('body').append("In function fiddle arg1 = "+arg1+"<br>");
  return arg1;
}
var arr = ["Original", " Original ", " Original "];
$('body').append("Before function call arr = "+arr+"<br>");
arr = fiddle(arr);
$('body').append("After function call arr ="+arr+"<br>"); // Why this hasn't changed?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thanks for the response, Terry. – Farhan stands with Palestine Sep 12 '15 at 20:16 — Farhan stands with Palestine, Sep 12 '15 at 20:16

Parameter Passing: In and Out

2 Answers2