Yogesh Chauhan's Blog

How does Binding work in JavaScript?

in JavaScript on April 16, 2021

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);

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;
// 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.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Killing A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousWhat are keys in React?ReactWhat is a component helper function in React?ReactLEFT JOIN in PostgresPostgresFlash of Invisible Text and Mitt Romney Web Font ProblemCSSSELF JOIN in PostgresPostgres