Assigning to a new value to an object passed into a function in JavaScript

Your interpretation is spot on.

First, you have a variable called x which is a reference to a string object. Let's say that memory is 0x100. x points to 0x100, which contains the bytes blah:

var x = "blah"; // x is 0x100 which references a string in memory

Next, you pass 0x100 into the function foo:

function foo(bar) {
    bar = "something else";
}

As everything in JavaScript is passed by value, even references, JavaScript makes a copy of this reference in memory, which is now called bar within that function:

foo(x); // Copies the value of x (a reference) to bar

At this point, we have two separate variables. x and bar. Both happen to have the same value, 0x100. Thus, if you were to change a property of the object either of those is referencing, it would affect both x and bar.

However, what you're doing is assigning bar to point to something else:

bar = "something else"; // Now references some other string we just created

Now, bar gets re-assigned to reference a new string we've just allocated memory for. bar no longer has a value of 0x100, it now has a value of some other address (say 0x500). x of course still has a value of 0x100 since bar was merely a copy of x, and not a reference to x.

For this reason, when you:

alert(x);

You'll still get the original value, as that is what x is pointing to.

Second question:

is there any way to say, change the data referenced by this variable? Is this a situation that comes up often, or can it be easily avoided?

Yes, just wrap it in another object. For example:

var x = {Value: "blah"};
foo(x);

Now, we have a reference to an object with a property called Value, which contains a reference to a string in memory somewhere.

In foo, we can do:

bar.Value = "something else";

Which will affect the Value property of x, since both bar and x referenced the same object, and you never changed the value of either of them.

In other words, you cannot re-assign the reference you're passing into a function, since you're simply re-assigning a copy. You can, however, change a property of an object being referenced, since other copies of that reference all point to the data you're changing.

Your interpretation is correct.

You can change the values of keys in an object, which lets you do something similar to pass-by-reference:

function foo(bar) {
  bar.msg = "something else";
}
var x = { msg: "blah" };
foo(x);
alert(x.msg);

Douglas Crockford in the video I watched says "objects are always passed by reference they're not passed by value", which is correct, but arguments to functions are passed by value, it's just the reference is passed by value.

It's not correct. What that describes is precisely called pass-by-value. JavaScript, like Java, only has pass-by-value. There is no pass-by-reference.

You understanding is correct. Every value in JavaScript is either a primitive, or a reference (pointer to an object). An object itself can never be a value directly. When you pass or assign a reference (pointer to an object), the new copy of the pointer sees the same object as the original pointer. But they are still two different pointer variables.

I know you've answered your own question with your edit...

Douglas Crockford in the video I watched says "objects are always passed by reference they're not passed by value", which is correct, but arguments to functions are passed by value, it's just the reference is passed by value.

but because that edit made me suddenly grok how this worked... which I will admit I was struggling with here is a code sample and pen that I think really demonstrates it.

x = {};
y = x; //point y reference to same object x is pointed to

console.log(x === y) //true both pointed at same object

function funky(o) //pass by value a reference to object
{
  o = null; //change reference to point to null away from object
}

funky(x);

console.log(x)//not null still an object

var myObj = {
  value: "Hello"
};

function change(localObj) {//pass reference to object
  localObj.value = "Bye";//change property through the reference
  localObj = null;//point the reference to null away from object
}

console.log(x === y) //still same reference;
change(myObj);
console.log(myObj.value) // Prompts "Bye"
console.log(myObj) //not null - its an object;
x = myObj; //point x to different object
console.log(x === y) //false pointed at different object;
console.log(x);
console.log(y);

https://codepen.io/waynetheisinger/pres/YewMeN