Different types of variable declarations in JavaScript - var, let and const.

#javascript #beginners #webdev #react

Hi everyone. Here is my first blog in JavaScript. This blog is about the ways that can be used to declare variables in JavaScript. I know, as a beginner, it is difficult to understand the declaration of variable scope.

So.. I am here to make it easy.
And here you go................

In JavaScript, there are four ways to declare a variable.

Yes, you heard it right... let's elaborate.

1. Assign variable without declaring it in JS:

Yes, we can assign the variable without using var, let and const keywords. And when we do that, it becomes a global property of window object.

But remember, this is not recommended.

x = 78
console.log(a); // output- 78

But this is not applicable when we use the strict mode.

'use strict'
x = 78;
console.log(a); // output- Uncaught ReferenceError: x is not defined

2. var:

When JavaScript was first introduced, developers only used var to declare variables.Let's see a few examples.

Hoisting: We can use variables before we declare them in our code. We would get undefined as an output, but JavaScript would not throw an error if we are using var keyword.

'use strict'

function varExample() {
    console.log(x); // output- undefined
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
};
varExample();

Global Scope: var can be used globally. We have declared x without any assignment, so for the first output we got undefined. And in the last output, we got 2 after assigning the value.

'use strict'

var x
function varExample() {
    console.log("First check", x); // output- First check undefined.
    for ( var i = 0; i< 3; i++){
        x = i;
    };
    console.log("last check", x); // output- 2
};
varExample();

Functional scope: var has a functional scope, which means we can access the var variable anywhere within the function. For example, x is declared within the for loop block but x is accessible outside of the block.

'use strict'

function varExample() {
    
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    console.log(x); // output- 2
};
varExample();

But x can't be accessible outside of the function.

'use strict'

function varExample() {
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    
};
console.log(x); // output- Uncaught ReferenceError: x is not defined
varExample();

Re-Declaration is allowed: We can use var to re-declare or update the variable.

'use strict'

function varExample() {
    var x = 10;
    var x = 19;
    console.log(x); // output- 19
    x = 60;
    console.log(x); //output - 60
};
varExample();

3. let:

let is introduced in ES6.Let's see the same examples with let as well.

Hoisting: We can't use variables before we declare them in our code using the let keyword. While trying to access 'c', we are getting a reference error. This is called Temporal Dead Zone(TDZ). until the value gets initialized to the variable TDZ continues.

'use strict'

function varExample() {
    console.log(c); // output-Uncaught ReferenceError: c is not defined. TDZ continues here.
    for ( var i = 0; i< 3; i++){ // TDZ continues here.
        let c = i; // TDZ ended here.
    };
};
varExample();

Global Scope: let is having global scope too. And it would show the same output as var.

'use strict'

let c;
function varExample() {
    console.log(c); // output - undefined
    for ( var i = 0; i< 3; i++){
        c = i;
    };
    console.log(c); // output - 2
};
varExample();

Block Scope: The scope of a let variable is only block scope in JavaScript. Let's check out the below example. x is declared inside the for loop block, so when we are trying to access the x outside of the block, we are getting an error.

'use strict'

function varExample() {
    
    for ( let i = 0; i< 3; i++){
        let x = i;
    };
    console.log(x); // output - uncaught ReferenceError: x is not defined
};
varExample();

Re-declaration: For let variable, re-declaration is not permitted.

'use strict'

function varExample() {
    let t = 10;
    let t = 19; // output - Uncaught SyntaxError: Identifier 't' has already been declared.
    console.log(t);
    t = 60;
    console.log(t);
};
varExample();

But updating variables are allowed.

'use strict'

function varExample() {
    let t = 10;
    console.log(t); // output - 10
    t = 60;
    console.log(t); // output - 60
};
varExample();

3. const:

The variable const is the same as the variable let. const is also introduced in ES6. The only difference is that "const" can't be updated once it is declared.

'use strict'

const x = 8
function varExample() {
    x = 11; // output - Uncaught TypeError: Assignment to constant variable.
    console.log(x);
    
};
varExample();

But if we are declaring a variable like below, then x has a different scope—one is global and another is block scope,so JavaScript treats them as different variables.

'use strict'

const x = 8
function varExample() {
    const x = 11; 
    console.log(x); // output - 11 (block scope)
    
};
console.log(x); // output - 8 (global scope)
varExample();

Summary:

We should not use variables without the var, let and const keywords.
It is a good practice to use const unless you don't have anything to override.
Try to avoid var until you don't have a browser compatible issue.
let and const does not create properties of window object when declared globally (in the top scope).
Our first priority should be to use const variable to avoid value re-assignment errors in our code Unless we are pretty sure that we will not be changing its value later. Then let should be our second priority.