var let and const in JavaScript

JavaScript

In the previous article we have explained difference between Null And Undefined In JavaScript. In this article you will learn var let and const in JavaScript. These keywords are used to declare the variables in JavaScript. Basically it is part of the scope in JavaScript. There are two types of scope in JavaScript i.e. first is local scope and second is global scope.

Variable defined outside of function that is called global scope but if variable defined inside the function then it is called local scope.

Global Scope

var name = 'Web Study Point';

function displayName() {
    console.log(name) // Web Study Point
}
displayName();
console.log(name) // Web Study Point

In the above code example you have seen, the name variable have the same value inside the function and as well as outside the function. So that is called global scope because variable is defined outside of the function.

Local Scope

function displayName() {
	var name = 'Web Study Point';
	console.log(name) // Web Study Point
}
displayName();
console.log(name) // nothing display

In the above code example you have seen, we defined the name variable inside the function. So we can’t the access the value of name variable from the outside of function. So that is called local scope because variable is defined inside the function. Local scope is also called function scope.

Block scope

The example of block scope are if/else, while loop, do while loop, for loop, try/catch etc.

var name = 'Web Study Point';
if (true) {
	var name = 'JavaScript Tutorial'; // block scope    
	console.log(name); // JavaScript Tutorial
}
console.log(name); // JavaScript Tutorial

In the above code example you have seen, the value of first name is replaced by the value of second name. So this is problem with the use of var keyword in JavaScript. To resolve this problem, ES6 introduced the let & const keyword. In JavaScript let & const have block scope.

var keyword

var:- var keyword has both scope i.e. global scope and local scope. Using var keyword we can re-declare the variable.

var name = 'Web Study Point';
if (true) {
    var name = 'JavaScript Tutorial';
    console.log(name); // JavaScript Tutorial
}
console.log(name); // JavaScript Tutorial

======================================================================

var name = 'Web Study Point'
var name = 'JavaScript Tutorial'
console.log(name) // JavaScript Tutorial

======================================================================

for (var i = 0; i < 2; i++) {
    console.log(i) // 0  1
}
console.log(i) // 2

======================================================================

var name = 'Web Study Point' // global scope
function displayName() {
    var name = 'JavaScript Tutorial'; // local scope  
    console.log(name) // JavaScript Tutorial
}
displayName();
console.log(name) // Web Study Point

let keyword

let:- let keyword has the block scope and we can’t re-declare the variable using let keyword.

let name = 'Web Study Point';
if (true) {
    let name = 'JavaScript Tutorial';
    console.log(name); // JavaScript Tutorial
}
console.log(name); // Web Study Point

=================================================================================

let name = 'Web Study Point';
if (true) {
    var name = 'JavaScript Tutorial';
    console.log(name); // SyntaxError: Identifier 'name' has already been declared
}
console.log(name);

==================================================================================

let name = 'Web Study Point'
let name = 'JavaScript Tutorial'
console.log(name) // SyntaxError: Identifier 'name' has already been declared

===================================================================================

for (let i = 0; i < 2; i++) {
    console.log(i) // 0  1
}
console.log(i) // "ReferenceError: i is not defined

===================================================================================

let name = 'Web Study Point' // global scope
function displayName() {
    let name = 'JavaScript Tutorial'; // local scope  
    console.log(name) // JavaScript Tutorial
}
displayName();
console.log(name) // Web Study Point

const keyword

const:- const keyword is also same as let keyword but they have little bit difference. The difference is that, we can’t change the value of const variable i.e. const is immutable. Const keyword has also block scope.

const name = 'Web Study Point';
if (true) {
    const name = 'JavaScript Tutorial';
    console.log(name); // JavaScript Tutorial
}
console.log(name); // Web Study Point

=====================================================================

const name = 'Web Study Point'
name = 'JavaScript Tutorial'
console.log(name) // TypeError: Assignment to constant variable

======================================================================

const name = 'Web Study Point'
const name = 'JavaScript Tutorial'
console.log(name) // SyntaxError: Identifier 'name' has already been declared

=========================================================================

for (const i = 0; i < 2; i++) {
    console.log(i) // 0  also TypeError: Assignment to constant variable.
}
console.log(i) // error

=========================================================================

const name = 'Web Study Point' // global scope
function displayName() {
    const name = 'JavaScript Tutorial'; // local scope  
    console.log(name) // JavaScript Tutorial
}
displayName();
console.log(name) // Web Study Point

If we declare any object or array using const keyword then we can add or remove element from the that object or array.

const obj = {
    name: 'Web Study Point'
}
obj.url = 'www.webstudypoint.com' // add new value
console.log(obj) // { name: 'Web Study Point', url: 'www.webstudypoint.com' }
delete obj.url // remove value from object
console.log(obj) // { name: 'Web Study Point' }

==============================================================================

const array = ['Web Study Point']
array.push('www.webstudypoint.com') // add new element
console.log(array) // ['Web Study Point', 'www.webstudypoint.com']
array.pop('www.webstudypoint.com') // remove element
console.log(array) // ['Web Study Point']

So in the above code example you have seen, we have add /remove element from an object and array i.e. we can mutate the object or array using const keyword.

So in this article you have learned var let and const variables in JavaScript. If you want to improve or find anything wrong/incorrect in this article then please leave a message using below comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

three × 3 =