Introduction:

var, let and const are the keywords in JS used for declaring variables and functions. 'var' is the only keyword which has traditionally been part of JS since it's inception, where as keywords 'let' and 'const' were introduced as part of ES6 updates in JS.

Var Keyword in depth:

Creating variables and functional expressions with 'var' keyword is the traditional way of creating them.

Example Of Variable:

Example Of Functional Expression:

Variables with var:

• Variables created with 'var' keyword are prefixed with 'var' keyword. Such variables are 'function scoped', which means a variable declared using 'var' keyword cannot be accessed outside the scope of a function where it's declared.

Example:

Output:

• Variables declared with 'var' get hoisted, which means that they can be accessed even before they are declared and initialised a value. But accessing them, before initialisation would result into 'undefined', to know why 'undefined' read my other blog on 'execution context'.

Example:

Output:

• Variables declared with 'var' can be re-declared as well as reinitialised and can also be declared without being initialised.

Example Re-Declaration:

Output:

Example Re-Initialisation:

Output:

Example Declaration without Initialisation:

Output:

Variables with 'var' keyword become part of global object and can be accessed through 'this' pointer.

Example:

Output:

Functional Expressions with var:

Functional Expressions declared with keyword 'var' also gets hoisted, but accessing them even before it is declared and initialised would result in error, as JS Engine generally hoists variable and assigns it 'undefined', so calling functional expression even before it is initialised a value results JS Engine considering it to be a variable and throwing Error when called as functional expression.

Example:

Output:

Let Keyword in depth:

Variables and Functional Expressions can be declared with 'let' keyword also.

Example Of Variable:

Example Of Functional Expression:

Variables with Let:

• Variables declared with 'let' keyword are block-scoped, which means that a variable declared using 'let' keyword cannot be accessed outside the scope where it is declared.

Example:

Output:

• Variables declared with 'let' keyword also get hoisted and are stored in a seperate memory location, where they cannot be accessed unless they are initialised with a value. Accessing a 'let' variable even before initialisation results into Error. The time period since the variable gets hoisted to the time it has been initialised the variable is said to be in Temporal Dead Zone(TDZ).

Example:

Output:

• Variables declared with 'let' can be reinitialised but cannot be re-declared.

Example with Re-Initialisation:

Output:

• Variables with 'let' keyword can be declared without initialisation or can be initialised later.

Example:

Output:

• Variables with 'let' keyword do not become part of Global Object.

Functional Expression with Let:

• Functional Expressions can be created with 'let' keyword, these functional expressions do get hoisted but cannot be accessed before initialisation as it remains in TDZ and generally results in error.

Example:

Output:

Const Keyword in depth:

Variables and Functional Expressions can be declared with 'const' keyword also. 'const' keyword generally refers to something which should not change over time.

Example Of Variable:

Example Of Functional Expression:

Variables with Const:

• Variables declared using 'const' are also block-scoped, meaning they cannot be accessed outside their scope where they are declared.

Example:

Output:

• Variables with 'const' keyword also gets hoisted, but cannot be accessed prior to initialisation as it remains in TDZ and trying to access them results into Error.

Example:

Output:

• Variables with 'const' keyword can neither be reinitialised nor be re-declared.

Example with Re-Intialisation:

Output:

Example with Re-Declaration:

Example:

Output:

• Variables with 'const' keyword must be initialised with a value at the time of declaration.

Example:

Output:

• Variables with 'const' keyword do not become part of Global Object.

Functional Expression with Const:

Functional Expressions can be created with 'const' keyword, these functional expressions do get hoisted but cannot be accessed before initialisation as it remains in TDZ and generally results in error.

Example:

Output:

Conclusion:

In this article, we tried to cover different use cases of var,let and const keywords with variables and functional expressions.