Header Ads Widget

var, let, const in JavaScript

My codding spot March 05, 2022

In JavaScript or any other languages a variable is common to write programming statements. JavaScript allow you to declare variables using var, let and const keyword.

In this post we will discussed about var, let and const in JavaScript, their usage, rule for variable name and much more.


What are the var, let and const in JavaScript?

The var, let and const are reserved keywords used to declare variables in JavaScript. 
Before 2015 only var is in use for variable declaration. Later let and const have been added in JavaScript and being in use for declaring the variable.
Thus, in JavaScript you can declare variables in 3 ways: var, let or const.

Example

1
2
var a;
let a;

What is variable?

In previous paragraph we discussed about the ways we can declare variables. So it’s time to know what is the variable and what is the use of variables?
The JavaScript variables are container for data values to store value with specific name.

Example


var n = 5;

Number 5 is stored in variable named n. 


let name = “krish”;

The string krish is stored in name variable.

Note:
The numbers are specified without quotes and string or text values are specified within quotes.

Rules for variable name declaration 

There are some rules for creating or declaring variable you should keep in mind.

  • Always start variable name with alphabets (a-z , A-Z) or dollar sign ($) or underscore (_).
Example

var _a; or
var a; or 
var $a;

  • Use digit (0-9) after first letter, do not use digit as a first character in variable name.
Example

let 1o=99; // invalid or unexpected token

  • Variable names are case sensitive ( var H; & var h; both are treated as different variables).
  • Reserved keywords can not be used as variable name.
Example
let else = 99; In output value 99 is not display because ‘else’ is reserved keywords.


let else=99;//unexpected token 'else'

var in JavaScript

The var keyword is very first keyword used to create or declare variables. 

Syntax

var name ;
var name = value;

Example

var fruit ; // variable fruit is created.
fruit =”Apple”; // value “Apple” is assigned to fruit.

You can also assign value at the time of declaration.

var car = “Audi”;

Scope of var

You can declare variables globally or locally.

Global scope

When ‘var’ is declared outside a function, the scope of variable is global.

Example
Program defines two functions evenodd () and sqr (). 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>JS variables</title>
</head>
<body>
<script>
var a=16;
// function 1
function evenodd()
{
if(a%2==0)
{
document.write(a," is even number");
}
else
{
document.write(a," number is odd");
}
}
evenodd();
// function 2
function sqr()
{
a=a*a;
document.write("<br> squre of 16 is:-",a);
}
sqr();
</script>
</body>
</html>

Output:-
Global scope
Global scope

In this program ‘var a’ is declared outside the function so variable a is used in evenodd () function and also used in sqr () function. Both functions are working.

Local scope

When ‘var’ is declared inside function the scope of variable is local means you can not use this variable outside the function. The ‘var’ is function scoped.

Example

Previous program with just changed variable declaration, here variable ‘a’ declared inside evenodd () function.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>JS variables</title>
</head>
<body>
<script>
// function 1
function evenodd()
var a=16;
if(a%2==0)
{
document.write(a," is even number");
}
else
{
document.write(a," number is odd");
}
}
evenodd();
// function 2
function sqr()
{
a=a*a;
document.write("<br> squre of 16 is:-",a);
}
sqr();
</script>
</body>
</html>

 Output:-
Local scope
Local scope




The sqr () function also use variable ‘a’ but this time it didn’t work nothing will display in output. Only output of evenodd () function will display. An error message display in console for function sqr ().

let in JavaScript

let is keyword used to declare variables in JavaScript in 2015 introduced by ECMA script (ES6). 

Syntax

let name ;
let name = value;

Example

let fruit_name;
let fruit_name = mango;

Scope of let

let have block scope.

Block scope

In earlier only two variable scopes are available global scope and local/function scope. 
After the introduction of let and const in 2015 variable have a block scope in JavaScript.
Variable have block scope means variable declared using let inside block can not be accessed or used outside the block.

Example
In example two variables are declared using let, fruit1 and fruit2.
The fruit1 scope is global scope and fruit2 scope is block scope.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>let in js</title>
</head>
<body>
<script>
//block scope
let fruit1="apple";
{
let fruit2="mango";
document.write("(inside block)second fruit name is:- ",fruit2,"<br>");
}
document.write("(outside block)first fruit name is:- ",fruit1,"<br>");
document.write("(outside block)second fruit name is:- ",fruit2);
</script>
</body>
</html>

Output:-
let block scope
let block scope


In output, variable fruit2 value is display only one time (inside block). Outside the block fruit2 can’t access.

Re declaration of variables using let 

  • Once you declare variable with let, it cannot be re declared in same block.
Example
In example ‘a’ is first declared with value “hello”, second time with value “hii”.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>let in js</title>
</head>
<body>
<script>
//re declaration in same block
let a="hello";
let a="hii";
document.write(a);
</script>
</body>
</html>

Output:-
Redeclare let variable in same block
Redeclare let variable in same block

When above code is executed, in output nothing will display. With let you are not allow to assign different values to same variable within same block.

  • You can re declare variables using let in different block.
Example
In example ‘x’ and ‘y’ variables are declared inside and outside the block. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>let in js</title>
</head>
<body>
<script>
//re declaration in differnt block 
let x=5;
{
let x=6;
let y=10;
document.write("value of x inside block=",x,"<br>");
document.write("value of y inside block=",y,"<br>");
}
let y=22;
document.write("value of x inside block=",x,"<br>");
document.write("value of y inside block=",y);
</script>
</body>
</html>

Output:-
Re declaration of let variable in different block
Re declaration of let variable in different block

In output first values of ‘x’ and ‘y’ declared inside block are display then after values of both variables declared outside the block will display.

const in JavaScript

The const keyword introduced in 2015 by ES6 with let keyword. The variable declared with const can not be changed later.

Syntax

const name=value;

Rules for declaring variable using const

  • Assign value when you declare variable with const.
Example

const a = 25; //correct
const a;
a =25; // no value display in output
There is a syntax error.

Using const variable can not be initialized after declaration. 
  • const variable can not reassign.
Example 

const a = 20;
 a = 40; // type error

You can not reassign the value to const variable.

  • const variable can not re declare.
Example

const a = 9;
const a = 7; //syntax error: identifier ‘a’ has already been declared.

  • Scope of const
Like let scope of const variable is block scope.

Example
In example const variable is not accessed outside the block. It display reference error.

//block scope
{
const x="hello";
document.write(x);
}
document.write(x);//reference error

  • Constant array elements can be changed.
Example 
In example fruit array is declared with 3 elements. An array element change using it’s index number.

//constant array
const fruit=["apple","banana","cherry"];
document.write("list of fruits::- ",fruit,"<br>");
fruit[0]="mango";
document.write("list of fruit after change in index 0::- ",fruit,"<br>");
fruit[2]="orange";
document.write("list of fruit after change in index 2 ::- ",fruit);

Output:-
Constant array elements change
Constant array element change

  • Constant array can not reassign.
Example 
Reassigning the fruit array gives type error.


//constant array
const fruit=["apple","banana","cherry"];
document.write("list of fruits::- ",fruit,"<br>");
fruit[0]="mango";
document.write("list of fruit after change in index 0::- ",fruit,"<br>");
fruit[2]="orange";
document.write("list of fruit after change in index 2 ::- ",fruit);
//reassign array
fruit=["tomato","lemon","grapes"];
document.write(fruit);

Output:-
Reassigning constant array
Reassigning constant array

  • Like constant variables and constant array constant object can not reassign.
Example
Attempt to reassign fruit object generate type error.

//reassign object
const fruit={name:"apple",color:"red"};
document.write("fruit name is ::- ",fruit.name,"<br>");
fruit={name:"banana",color:"yellow"};
document.write("fruit name is ::- ",fruit.name);

Output:-
Reassigning constant object
Reassigning constant object

  • You can change object property.
Example
fruit object property (name) changed.

//change object property
const fruit={name:"apple",color:"red"};
document.write("fruit name is ::- ",fruit.name,"<br>");
fruit.name="mango";
document.write("new fruit name is ::- ",fruit.name);

Output:-
Change constant object property
Change constant object property


Note:
In older browser let variable not work.

Conclusion
var, let and const keywords are used to declare variables in JavaScript, but you should be aware about when they are used. 
Suppose if you already know your variable value change in future then do not use const. With let and const re declaration and reassignment is not possible. When you run your code on older browser use var for variable declaration.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments