Skip to main content

Different between VAR, LET and CONST in JavaScript with examples.

Hello Guys,

In this blog we are going to learn about LET, CONT, VAR keywords in JavaScript.

To store data in JavaScript, you have three ways of declaring variables: var, const, and let. 

These three have the same purpose but vary in certain aspects. Familiarizing yourself with the contrasts can guide you on which to select for your unique requirements.

JavaScript's let, const, and var have some notable distinctions to consider.

`LET` :- 

Here's an example: the let keyword enables block-scoped variables to be declared. 

Only the block where it was declared and any nested blocks within it have access to a variable with let due to block scoping. Introduced in ES6, let offers this capability.




The concept of variable shadowing is demonstrated by the double declaration of let for x. 

Despite sharing a name, one instance occurs in the example function block and the other occurs within the if block. 

They can be treated as individual variables due to their separate block declarations.

To sidestep variable shadowing bugs and boost your code's clarity, it's advisable to substitute "let" for "var".

"CONST" :- 

Once a value is assigned to a const variable, it cannot be reassigned, which is the main difference when declaring variables using the const keyword. 

Here's an instance to help solidify the concept:




Try as we might, changing the value of x after declaring it as const is a futile effort. 

The end result is always the same:

  TypeError that signals the impossibility of reassigning x.

Using const in your code can have many benefits. 

It's a great tool for declaring variables that won't change, like constants in math formulas or configuration settings for your app. Not only does const prevent unexpected reassignments, but it also adds an element of predictability to your code.

"VAR" :- 

 
In JavaScript, the original method of declaring variables is through the use of the var keyword.

Function-scope is characteristic of variables declared under var, enabling them to be accessible within the function where they were declared. 

To illustrate, consider the following:


The second assignment to x overwrites the first because both variables refer to the same function-scoped var variable. 

Within the if block and example function, x is declared twice using var.

It's generally a better idea to use let and const instead of var when declaring variables in JavaScript, though var is still allowed. 

The rationale is that utilizing var can result in unintended bugs like creating global variables unintentionally or overwriting variables by accident.

Conclusion


With differing scoping and reassignment regulations, let, const, and var are three distinct approaches to declaring variables in JavaScript.

  • To prevent variable shadowing bugs and declare block-scoped variables, simply utilize "let".
  • When variables are declared with const, the possibility of them being accidentally reassigned is eliminated.
  • When it comes to declaring function-scoped variables that cannot use `let` or `const`, it is best to use `var`. However, it is important to only use `var` when it is necessary.

If you guys have any query then you can drop a mail to us on this mail id:

techoswag@gmail.com

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Different between ``===`` and ``==`` operators in JavaScript

Hello Guys, In this blog we are going to learn about "===" and "==" different with details understanding and examples. JavaScript operators that you might have stumbled upon as a developer include "===", "==". JavaScript's "==" operator is commonly utilized for loose comparison purposes.  It functions by converting both of the values to a common type and then comparing them for equality.  Here's an example: The comparison operator "==" transforms the value of "17" from a string to a number before determining if the values match.  Consequently, if both versions of the data share the same properties and values, the comparison is marked as valid and returns true. The results of the "==" operator can occasionally be surprising, including: The comparison returns true when the "==" operator converts the empty string to the number 0 and compares it to the number 0.  This can result in bugs, so ...
Post a Comment
Read more

What is the Lazy-loading in Angular and Different between Old syntax and New Syntax of Lazy-loading with examples

Hey Guys, In this blog we are going to learn about How we can use Lazy-loading in angular with examples. We are also going to learn the different syntax of lazy loading in angular . Lazy loading is used to load the specified module once the routes match. It will load the modules once use access that particular section or modules in our application. Using lazy loading will improve the performance of our application and also decrease the load time of our application. Using lazy-loading will help to reduce the bundle size of the application. Lazy -loading Old syntax in angular 7 or lower version          {                path: "feature",                loadChildren:'./feature-module/feature-module.module#FeatureModuleModule'          }, Lazy -loading new syntax in angular 8+   {     path:'feature',     loadChildren:() =>  import...
Post a Comment
Read more

Learn About Call(), Apply() and Bind() Method in JavaScript

Hello Guys, In this blog your going to learn about CALL(), APPLY() and BIND() method in JavaScript with details understanding and examples. Invoking a function with a specific this value is possible in JavaScript through call(), apply(), and bind(). These three methods may be comparable in terms of their function, but the way they operate and handle arguments set them apart. call(), apply(), and bind() can be confusing to differentiate, so let's look at how each one differs from one another. Call() :-  Method used to invoke a function with specified this value and given arguments - call(). First argument is this value, followed by any expected arguments. For instance, a case in point: Calling findNames() in this scenario, we set the this value to person, thus causing person.name to equate to this.name within the function. APPLY() :-  Ahead of time, it's sometimes unclear how many arguments will be required when calling a function.  In such instances, the apply() metho...
Post a Comment
Read more