How does Binding work in JavaScript?

To store values, JavaScript has a way called a binding which is just a fancy name for a variable.

Foe e.g.

let x = 10;

I am sure we have used the above let keywords quite a few times in JavaScript. It indicates the beginning of the binding followed by the name for that binding variable and in some cases followed by the value for that variable.

You’re not required to assign the value immediately after the declaration.

The example above created a binding called x and we assigned the value 10 to it. Now, we can just use that x wherever we want in our program. Just like this:

console.log(x * x);
//100

Can you change the value of binding variable let?

Yes. We definitely can. Binding variable values are not going to stay same. It’s easily changeable.

Just assign any other value like this:

let x = 10;
console.log(x); //10
x = 20;
console.log(x); //20

Think of binding variables as normal variables. What do normal variables used for? Holding a value and changing it when required. Right? Same way we can hold a value with binding and change it when it needs to be changed.

For e.g. a simple increment or decrement in a value like this:

let x = 100;
x = x - 10;
console.log(x); //90

x = x - 20;
console.log(x); //70

x = x + 20;
console.log(x); //90

What happens when you try to print a value of empty binding?

It will just print undefined since there is no value attached to it.

Just like this:

let x;
console.log(x);
// undefined

Define multiple bindings

You can also define multiple binding in a single statement and even with a string, it doesn’t have to be a number only.

Just like this:

let x = 10, y = "hello";
console.log(x); //10
console.log(y); //hello

Can you use var and const to create bindings?

You sure can.

Just like this:

var x = 10;
const y = "hello";

console.log(x); //10
console.log(y); //hello

In ES5 and before var keyword was used to define bindings.

You can change values for the variables declared by var and let but not const.

Be careful while choosing binding variable name

JavaScript has some keywords reserved for itself so whenever you try to use those keywords as your own variable name then it will throw an error. Some of the reserved keywords are catch, try, let, break etc. There is a huge list of it.

If you really want to use a similar name to the reserved keyword then try to use it with a number or a special character. For e.g. try100 is a valid variable name.

A binding variable name can have an underscores(_) or a dollar signs ($). You CAN NOT use any other special characters.

Share this post