What are Block Scoped variables and functions in ES6 ?
Block-scoped variables and functions are defined inside a particular block or inside curly { } braces and they can only be accessible inside that particular block or within that block. The block-scoped variables were first introduced in EcmaScript2015 or es6. ES6 introduces us with two keywords: let and const which allows us to declare variables with block scope. Let us see them in detail in this article.
The let keyword: The let keyword does not allow us to redeclare a variable in the same block, while it is possible when you declare it using the var keyword. If you try to redeclare a variable defined using the let keyword it will throw the error as SyntaxError: Identifier has already been declared.
Syntax:
let first_name="John";
Example 1: The below example illustrates when we are not redeclaring the variable with let keyword.
HTML
< script > function myFunction() { var name = "w3wiki"; let desc = "A computer science portal for all Beginner"; console.log(name); console.log(desc); var name = "GFG"; console.log(name); } myFunction(); console.log(desc); // ReferenceError: desc is not defined </ script > |
Output:
Example 2: The below example illustrates when we are redeclaring the variable with let keyword.
HTML
< script > function myFunction() { var name = "w3wiki"; let desc = "A computer science portal for all Beginner"; console.log(name); console.log(desc); var name = "GFG"; let desc = "Welcome to GFG"; console.log(name); console.log(desc); } myFunction(); </ script > |
Output:
The const keyword: The variables declared using const keyword can not be redeclared like let keyword as well as we can not reassign them. We use const keyword to declare a constant whose value we don’t want to change in code. If we try to reassign the const variable it will show an error as TypeError: Assignment to constant variable.
Syntax:
const age = 23;
Example 1: In this example, we try to reassign a const variable resulting in an error.
HTML
< script > function myFunction() { var name = "w3wiki"; const desc = "A computer science portal for all Beginner"; desc = "Welcome to GFG"; console.log(name); console.log(desc); } myFunction(); </ script > |
Output:
Example 2: In this example we try accessing a variable outside the function.
HTML
< script > function myFunction() { var name = "w3wiki"; const desc = "A computer science portal for all Beginner"; console.log(name); console.log(desc); } myFunction(); console.log(desc); //ReferenceError: desc is not defined </ script > |
Output:
Example 3: In this example we try to redeclare the description variable.
HTML
< script > function myFunction() { var name = "w3wiki"; const description = "A computer science portal for all Beginner"; console.log(name); const description = "Welcome to GFG!"; console.log(description); } myFunction(); </ script > |
Output:
Block-scoped functions: Block-scoped functions can be defined inside the block of code that block could be inside simple curly braces or inside any function of the conditional statement. If a function is written inside another function, then those functions are nested functions.
Function written inside another function:
Syntax:
function func1(){ // Content of the func1() function func2(){ // Content of the func2() } }
Example:
HTML
< script > function myFunction() { var name = "w3wiki"; function myFunction2() { let desc = "A computer science portal for all Beginner."; console.log(name); console.log(desc); } myFunction2(); console.log(name); } myFunction(); </ script > |
Output:
Function written inside a conditional statement:
Syntax:
if (true){ // Content of conditional statement function func1(){ // Content of func1() } }
Example:
HTML
< script > if (true) { var name = "w3wiki"; function myFunction() { let description = "A computer science portal for all Beginner."; console.log(name); console.log(description); } myFunction(); } </ script > |
Output: