#callbysharing

It’s been an amazing week, but I’m actually going to save the personal/Fullstack stuff for the end of the post and first provide a focused discussion on something thorny that can waste hours of your time if you don’t know it backwards and forwards. Without further ado, Code and Stuff As Will Break Her, Installment The Sixth:

--Javascript calls by sharing. Remember when I talked about objects being passed by reference and primitive values being passed by copying? Those statements are true, but don’t actually tell the whole story. Let’s try passing a few things into a few functions to illustrate the difference.

function addSixTo(num) {  num = num + 6; }

myNum = 2; addSixTo(myNum); console.log(myNum); --> “2″

As you might expect from knowing that values are passed by copying, “num” inside the function just copies our “myNum” variable. There are actually two separate numbers once the function is called, and everything we do to the function’s “num” after then has no effect on the original "myNum.” But check this:

function modify(obj) {  obj.name = "Ollie"; }

var myTurtle = {type: "yellow-bellied slider"}; modify(myTurtle); console.log(myTurtle); --> “{ type: 'yellow-bellied slider', name: 'Ollie' }”

Insert your best Jeffersons-style reaction take here. You might think the function would create a new object the instant it messes with the original object passed in. Not the case. The function here actually has power to mutate the object passed into it. Remember, the object is passed in by reference, so “obj” inside the function points to the same thing that “myTurtle” outside the function points to. This is where “sharing” comes in! The function has the same right to modify myTurtle as any other place pointing to it.

You might still not be surprised. “I get it, objects are passed by reference and values by copying. So you can always change an object, but when you change a value, you’re just changing a copy of it.” Not so fast. Here’s the biggest mind-bender:

function modify(obj) {  obj = {type: "red-eared slider"}; }

var myTurtle = {type: "yellow-bellied slider"}; modify(myTurtle); console.log(myTurtle); --> “{ type: 'yellow-bellied slider' }”

Here, an object (gasp) is acting just like a value! The modification done in the function hasn’t stuck at all and instead seems to have disappeared, or gone into a copy of the object. The explanation is that yes, you can mutate objects, but you can’t change them wholesale. Once “obj” is given a whole new object to point to (instead of just an additional attribute), the link between it and what it’s pointing to is broken. The object it was pointing to (”myTurtle”) survives in its unchanged form, while a new red-eared slider object is created and “obj” is pointed at it. 

So, in sum: values, since they are always passed by copying, can’t be mutated. When you pass them to a function, you simply create a new copy that then changes. Objects can be mutated and still be successfully referred to by all variables pointing at them in their mutated form. But when you assign a new object to a variable, it breaks all links to the old object and things behave more like value copying: the original object (as well as any variable pointing to it) remains unchanged, and a new object is created for your variable to point to.

I gotta name-check Barbara Liskov here, because she apparently was the first to name this evaluation strategy. And, in turn, Ayana, an instructor at Fullstack who turned us on to this wackiness.