dots Created with Sketch.
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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Simple Page Hit Counter in PHPPHPHow to create a flip effect with CSS?CSSA complete diagram with building blocks of an Angular applicationAngularHow to select multiple values in React dropdown?React3 ways to pass a variable in url() function in SCSS (Sass)SCSSWhat does Containment mean in React?React