My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Variables in JavaScript

Variables in JavaScript

var, let & const

Adarsh Patel's photo
Adarsh Patel
·Sep 29, 2021·

4 min read

What are variables?

The variable is a container that holds some value. In other words, a variable is simply a name of storage location where the value of that variable will be stored. There are two types of variables in JavaScript: local variable and global variable. These variables can be defined using keyword var or let or const.

There are a lot of new features that came out with ES6. But wait some of you are wondering that what is ES6?.

What is ES6?

ES6 is ECMAScript's 6th edition. EcmaScript is a standard for the scripting language. It is a small update on Javascript which adds on various features.

In this blog, we are talking about one of the features of ES6 which is const and let, which can be used for variable declaration in JavaScript. But you are wondering why ES6 introduced const and let when we have var for declaring variables.

Var

var is used to declare the variables before ES6. But there are some issues(block scope issue) with variables declared with var. To resolve these issues ES6 has introduced let and const.

Scope of var

Scope is a range of variable means where these variables are available for use. var declarations are globally or locally scoped.

The scope is called global if var variable is declared outside the function. It means the variable is accessible within the whole program.

var is a function scoped when it is declared inside a function. This means that it is available and can be accessed only within that function block.

var a = 10;   // globally scoped

function fun(){
   var b = 20;    // function scoped
}

here variable a is globally scoped as it exists outside the function whereas variable b is function scoped as it is declared within the function.

Variables declared with var can be re-declared and reinitialized.

var a = 10;
var a = 20;  //redeclaration of  variable a is allowed in var

Problem with var

Redeclaration and reinitialization of variables using var can cause problems when we want to access the global value of a variable. Let's understand it with an example.

var str = "hello";  // globally scoped

function fun(){
   var str  = "hey";  //function scoped
}

console.log(str);   //it gives hey on console

the problem in the above code is that we can not access the global value of var str as it is redeclared in the function scope. That's why let and const are introduced.

Let

let is also used to declare variables and it resolves the problem of scope which we have encountered in var.

let is block scoped

Block is nothing but part of code that is enclosed within two curly braces {}.

let variables are only accessible within the block.

let a = 5;    //globally scoped

function name(){
 let a = 50
  let b = 40;     //function scoped
}

console.log(a);  // 5
console.log(b);   // b is not defined

In the above code, if we can not access variable b outside its scope. And also when we access variable a outside function scope it will take only global value.

let variables can be updated but not re-declared.

let a = 10;
    a = 50;    //it is allowed as variable is only updated not re-declared. 
let a  = 20;  // error: Identifier 'greeting' has already been declared

function scope(){
   let a = 30;  //it is allowed because variable a is now block scoped.
}

Const

As its name suggests that variables declared with const maintain a constant value. const declaration is the same as let declaration as both are block scoped. That means they can only be accessible within the blocks they were declared. The only difference in const is that like let they can not be updated throughout the program.

const PI = 3.14;
      PI = 3.0;         //error: Assignment to constant variable. 
const PI = 3.5;    //error: Identifier PI has already been declared

Here is a quick recap of what we have learned in this blog

scope.jfif

Thanks for reading.