What Are Bindings in JavaScript?

by

To hold onto new values, JavaScript uses something called bindings, or variables.

For example:

let holdThisValue = 4 * 5;

This translates into:

Create a binding named holdThisValue and use it to grab a hold of the product of 4 * 5.

So you see the keyword let?

It means that this statement is going to be a binding.

The next word after let is going to be the name of the binding which you can make up to be anything you want.

Then after that name, you’ll want to use the = operator and then give it an expression like 4 * 5.

The cool thing about a binding name is that you can use it later on as an expression!

If you do, then the value of a binding name ends up being the expression’s value.

Here’s an example:

Example: A variable name can be used in place of an expression

let four = 4;
console.log(four + four);
// -> 8

Here, you see that we can substitute the variable name “four” for the actual number in an expression. JavaScript actually auto-converts the variable name four into the value it’s holding, 4.

How to change binding values

The equal to operator (=) can be used again on an existing bind to disconnect that variable name from its value and replace it with a new one.

Here’s an example:

Replacing one binding with another binding

let mrFickle = "Susan";
console.log(mrFickle);
// -> Susan

In this same snippet, let’s say we wanted to let mrFickle hold a new value like Vanessa. How would we do that?

Well, as I explained before, we’d use the = operator once again and disconnect mrFickle from Susan like so:

let mrFickle = "Vanessa";
console.log(mrFickle);
// -> Vanessa

See that? mrFickle is no longer attached to Susan, he’s attached to Vanessa now.

In JavaScript, there’s usually a way to think about this sort of thing.

They say you should think of bindings as tentacles rather than boxes that you put things into. With tentacles, you are able to grab onto values.

This also means that two different binding names can refer to the same value as well. It’s like two tentacle limbs holding onto a single object.

A new binding is similar to you growing another tentacle to grab an object while what we did in the above code with mrFickle was reattaching a tentacle to another.

How to update a binding

Let’s say you got out of college and now you owe a ton of money from tuition loans.

It’s been a few years and you’ve made enough money to pay back more than half of it.

let tuitionMoneyYouOwe = 100000;
tuitionMoneyYouOwe = tuitionMoneyYouOwe - 75000;
console.log(tuitionMoneyYouOwe);
// ->25000

You can see that you owe $100,000 in tuition.

The next line says, that you’ve paid off $75,000 from your binding name which is valued at $100,000 and you put that back into tuitionMoneyYouOwe.

If you remember back to the fact that the = operator isn’t set in stone and that if you use it again, it can change or update a binding name.

This is what’s happening to tuitionMoneyYouOwe.

At this moment right after that line, it’s got the value of $25,000.

What happens when you define a binding but don’t provide a value?

Surprisingly, you can create a binding name but not use the = operator and not provide a value for it to grab.

However, if you try to use this binding name in an expression, the output would end up being undefined.

How to make a single let statement define multiple bindings

This is important if you want to use one let statement and define a bunch of binding names from it.

You must separate each definition by a comma.

For example,

let nameOne = 32, nameTwo = 12;
console.log(nameOne - nameTwo);
// -> 20

And there you have it.

We’ve used a single let statement followed by some binding names, = operators, and their values separated by commas.

Leave a Comment