Table of contents
There are three ways we can declare variables in javascript i.e
var, let, and const
.var
is an old way of declaring variables in javascript since it was created, andlet
andconst
were introduced in the ES6 version of javascript to overcome some of the limitations of var. So let's see variables Declaration, Scoping, and Shadowing.
Declaration
What is a Declaration?
- Creating a variable in JavaScript is called "declaring" a variable. There are 3 ways in javascript to declare variables i.e
var, let, and const
. - There are some rules about declaring variables in javascript.
When we try to declare the same variable name with
var
then this is absolutely fine there is no error. We can re-declare it as many times as we want.
But when we try to declare the same variable name withvar firstName; var firstName;
let
then this gives an error. Error:Uncaught SyntaxError: Identifier 'a' has already been declared
. We can not re-declare the variable by usinglet
andconst
in the same scope.let firstName; let firstName;
- Declaration without initialization (without providing any value) is possible in
var
andlet
. But forconst
we can not declare a variable without initializing. If we try to declare aconst
variable without initializing this will throw an error. Error:Uncaught SyntaxError: Missing initializer in const declaration
. We need to provide some value while declaring a variable withconst
.
var firstName; // no error
let name; // no error
const firstName; // error: Uncaught SyntaxError: Missing initializer in const declaration
const lastName = "Phule" // no error
Scoping
What is the Scope?
- Scope is the certain region of a program where a defined variable exists and can be recognized and beyond that, it can not be recognized. There are 3 types of scope in javascript Global scope, Function scope, and Block scope.
The Declaration of a variable without any function or block is called global scope.
var firstName = "Amardeep"; // global scope
If I create a function and declare a variable inside it, it is called function scope.
function checkLastName() {
var lastName = "Phule"; // functional scope
}
And if I create any block using curly braces ({}) and declare a variable inside it, then this is called block scope.
{
// block scope
}
The var
is a function scope but let
and const
are block scope. The scope is global when a var
variable is declared outside of a function which means it is available for use in the whole window.
var firstName = "Amardeep";
console.log(firstName); // output: Amardeep
{
var lastName = "Phule";
}
console.log(lastName); // var still accessible, output: Phule
But when I change it to the let
and const
it gives an error i.e uncaught referenceError: lastName is not defined
.
Note: you can change
let
withconst
and check the result.
{
let lastName = "Phule";
}
console.log(lastName) // output: uncaught referenceError: lastName is not defined
and when I console the variable inside the block it gives desired output. So variable declared inside the block with the let
or const
keyword is accessible inside a block.
{
let lastName = "Phule";
console.log(lastName); // output: Phule
}
Shadowing
What is Shadowing?
- Shadowing occurs when a variable declared in a certain scope (e.g. a function/local variable) has the same name as a variable in an outer scope (e.g. a global variable). When this happens, the outer variable is said to be shadowed by the inner variable.
- In javascript, the introduction of
let
andconst
in ES6 along with block scoping allows variable shadowing.
function name(){
let firstName = "Amardeep";
if(true){
let firstName = "Amar";
/* The firstName variable inside this block will shadow the
firstName variable outside of this block. */
console.log(firstName); // output: Amar
}
/* Here still we get "Amardeep" as output*/
console.log(firstName); // output: Amardeep
}
name();
While shadowing a variable it should not cross the boundary of the scope i.e we can shadow the var
variable by using the let
but can not do the opposite. So if we try the let
variable by the var
variable it is known as illegal shadowing and it gives us the error that the variable is already defined.
function fullName() {
var firstName = "Amardeep";
let lastName = "Phule";
if(true){
let firstName = "Amar";
var lastName = "fule";
console.log(firstName);
console.log(lastName);
}
}
fullName();
/*Uncaught SyntaxError: Identifier 'lastName' has already been declared*/
That's it for now, Thank you for reading. Keep in touch I will provide a simple explanation on important javascript topics.