You could define a getter that acts as a reference to the live variable:

var myArray = Object.defineProperty([0,1], 2, {
    get() { return x },
    enumerable: true,
    configurable: true
});
var x = 2;
console.log(myArray);
x = 3;
console.log(myArray);

Of course, this is a horrible thing to do to an array, and will probably incur heavy performance penalties in every place where the array is used. So: don't do this. Just assign to myArray[2] instead of x in every place, or use a getter/setter function pair instead of the x variable that does this.

function setX(v) { myArray[2] = v; }
var myArray = [0,1,2];
setX(2);
console.log(myArray);
setX(3);
console.log(myArray);

I tried to use Array.filter() function, but it returns a new array instead of a reference to the original array. which I can not use to mutate the original array.

It returns a new array, but the array's entries are still references to the same objects. So filter is just fine for this.

var filteredUsers = users.filter(function(entry) { return entry.id === 2; });
var item = filteredUsers[0];
item.name = "user2 name updated";
console.log(users[1].name) // "user2 name updated"

The array contains references to the objects, not copies of them. When we do item = users[1], or use filter to get a new array containing a subset of the objects, we get a copy of the object reference, and so the variable now refers to the same object, like this:

                +−−−−−−−−−−+
users−−−−−−−−−−>| (array)  |          
                +−−−−−−−−−−+           +−−−−−−−−−−−−−−−+
                |   0      |−−−−−−−−−−>|    (object)   |
                |          |           +−−−−−−−−−−−−−−−+
                |          |           | id:   1       |
                |          |           | name: "name1" |
                |          |           +−−−−−−−−−−−−−−−+
                |   1      |−−+
                |          |  |
                |          |  |        +−−−−−−−−−−−−−−−+
                |          |  +−−−+−+−>|    (object)   |
                +−−−−−−−−−−+     / /   +−−−−−−−−−−−−−−−+
                                 | |   | id:   2       |
                +−−−−−−−−−−+     | |   | name: "name2" |
filteredUsers−−>| (array)  |     | |   +−−−−−−−−−−−−−−−+
                +−−−−−−−−−−+     | |   
                |   0      |−−−−−+ |
                +−−−−−−−−−−+       |   
                                   |
item−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

Changing the object changes the object, and those changes are visible regardless of which reference to the object you use to look at its properties.

Now if you had an array of primitives:

var a = [1, 2, 3, 4, 5];

...then of course, you can't use the approach above because they aren't objects. In that case, you'd use indexOf to find the index:

var index = a.indexOf(3); // Find the first entry === 3

...and then modify the entry

a[index] = 42;

This also applies to strings (provided they're nice normal string primitives, not things you created via new String(), which there's virtually never a reason to do).

Your code is creating new empty array, instead you can empty existing array with length = 0

var myArray = [2, 3, 4, 5];
function doStuff(arr) {
   arr.length = 0;
};

doStuff(myArray);
console.log(myArray)

Put an object into the array instead:

var name = {};
name.title = "foo";

var array = [];

array["reference"] = name;

name.title = "bar";

// now returns "bar"
array["reference"].title;

First thing is arrays are always passed as reference in javascript.

Now coming to your question, when an array is passed to a function the argument variable of that function will hold that reference, in your case it's arr argument. If you mutate arr it will mutate original array as it is referring to original array but if you just assign some other value or reference to arr it will no longer hold reference to that original array and any changes to new reference won't have any effect on that array.

It looks like you are confusing JavaScript array objects with the fact that all objects are associative arrays. Note that normal objects (e.g. the "Fruit" object you allude to) do not have an intrinsic ordering of properties (keys) whereas Array objects do (due to the natural ordering of integral indices). Essentially, an Array is just an object with a special "length" property that stores the last integer index (starting from zero) plus one.

Any object's properties will be iterated in arbitrary (e.g. random) order:

var obj = {a:'Aye', b:'Bee', c:'See', d:'Dee'};
for (var prop in obj) {
  alert(prop + '=' + obj[prop]); // No order is guaranteed.
}

Strictly speaking, even arrays are not guaranteed by the specification to iterate in natural order using a for-in loop; however, most JavaScript interpreters do so anyway. (Notably, IE8 iterates in the order that indices were assigned, not natural order.) This is why you should always iterate arrays using indices in a plain "for" loop.

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for (var i=0; i<arr.length; i++) { // i = [0 .. length-1]
  alert(arr + '=' + arr[i]); // Explicitly order as 'a', 'b', 'c'...
}

These differences mean that regardless of how your "Fruit" object is defined there is no reliable way to ensure a strict ordering of keys (e.g. "Banana", "Apple", "Color", "Size", etc.) unless you retain your own ordering separately.