What’s In The BOX?!: Variables

Little Boxes

What is a variable? Most (especially mozilla web docs(MDN)) would describe it as “a container for a value”. A named code that refers to a program of any kind from simple values to functions.

var foo = "I pity the...";
const group =['Rhonda', 'Jamey', 'Kori', 'Greg'];
let greed = function (root) {
console.log("of all evil");
}

Picture by MDN

It’s common practice to describe a variable “being like little cardboard boxes that you can store things in.(MDN)” Without those boxes, our values would shrivel and die in the heat of the code, ceasing to exist soon after implementation. As said in the tome Eloquent JavaScript(EJS), the variables would need to “…be used immediately or (they) will dissipate” and there are two ways to create these containers for lasting expressions:

• Declaration: Means just what it sounds like. Declaring a variable confirms its existence and name, but little else. The box isn’t open, so we can’t see it’s contents, or value. Because the box is closed, but we expect something to be inside,(Schrodinger vibes, anyone?) we give these boxes the justly named value undefined.

var question;
let box;
const cat;

• Initialization: Initialization is the JavaScript way to say “There’s a box here, and this is what’s inside.” This box is brought into existence wide open, and we can easily see its contents. “The = operator“(EJS) is used to denote what’s inside the box. Which could be anything, really. Or nothing.. To say “This box is open, but there’s definitely nothing in it” we use the term null. Here are some examples of initialization:

var question = true;
let box = null;
const cat = 4 + 3;

The reading of = will always give what’s on the left of it the value of what’s on the right. That’s how we know that there’s nothing in box
Now, like any open box, its contents can shift at just about any time you like. “* The = operator can be used at any time on existing (variables) to disconnect them from their current value and have them point to a new one:*”(EJS)

let greenLight = false;
//*the greenLight box contains the false value*
greenLight = true;
//*greenLight is now set to the value true*

The false value used to inhabit this box, but with one simple change, there’s a whole new value inside. It’s just that easy!
Okay, it feels like we’ve thoroughly explored and internalized the container, box concept. Now let’s explore why it’s wrong.

Learn the box. Forget the box.

The “container” philosophy for variables is pretty good for a lot of things, as you may have seen. Still, at some point, boxes start to get complicated:

let a = 5;
let b = a;
a = 7;
console.log(b);// 5 

If box b has box a inside it, and box b is filled with a new value, isn’t the same true for a? I mean, two boxes put together tend have the same contents inside when filled, right? Wrong. The box concept of variables becomes confusing when you think about these kinds of things, because often, variables don’t really behave like boxes at all.

Bindings and tentacles

Really, in this case, it would be better to think of the data as having been there all along. In essence, a variable just kind of makes that piece of data important and accessible. The programs are floating in the vast reaches of techSpace, and it’s up to our variables to “catch and hold (them)“(EJS). It’s a little strange at first, but it makes a lot of sense when you think about it. Eloquent JavaScript describes it like this:

“You should imagine bindings as tentacles rather than boxes. They do not contain values; they grasp them—two bindings can refer to the same value. A program can access only the values to which it still has a reference. When you need to remember something, you either grow a tentacle to hold on to it or reattach one of your existing tentacles to it.“

Now, attach is a little deceiving here, since these “tentacles” only “grasp” at values that are small enough to hold (64 bits). These values are called “simple dataTypes”(EJS) and include Numbers, Strings, and booleans. If a value is simple, our tentacle will wrap around and hold on to it.. Kind of.. An act we call Pass by value(GFG). I say kind of because if a value our tentacle looks for is simple enough, it won’t bother holding on to the same one, it’ll just make a copy and hold it for itself:

In the above example, our b tentacle didn’t bother grasping the same 5 that a had, so when a changed its stripes and that 5 disappeared into space, b was still left with the copy of 5 it was originally holding. Now lets try something a little different:

var a = [13, 40, 27]; var b = a;
b.push(5, 1)//push is a method that moves these values into the end an array console.log(a);//[13, 40, 27, 5, 1];

This example is a bit more complex. Our complex dataTypes(arrays, objects, functions) are much to big to go around making copies of them to wrap our tentacles around, so what we do is simply point to the original. An act we like to call Pass by reference(GFG). In this example, b can’t hold on to its own array, so when it goes through a change, the original array it points to feels that change pass through it.

This was a small introduction to how we name, grasp, point to, and otherwise utilize data for our own brilliant purposes. It’s easy to overlook, but without variables, we would all be lost in a sea of code, digital waters all around us, grasping away as digital water falls right through our fingers. Variables are the boats that carry us all to our destination, and I, for one, appreciate the ride.

References by initial
(MDN)
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables
(EJS)
https://eloquentjavascript.net/02_program_structure.html
(GFG)
https://www.geeksforgeeks.org/pass-by-value-and-pass-by-reference-in-javascript/