Welcome Guest! (App Version 3.1)

websitnero logo name

Let and Const

New 3rd Scope -- Block Scope

If you have any experience of "Vanilla JavaScript", then you must have known that JavaScript has only 2 kinds of scope - 1. Global 2. Functional. There is not any 3rd kind of scope in this language.

Now, ES6 comes with a new kind of scope, but since a billion websites are already using var for variable declaration, changing its functionality could cause problems in millions of them.

The solution is create some new 'variable declaration tool' that from beginning has a new type of scope -- "Block Scope". Answer is 2 new tools -- Let and Const

Note: "Block scope is represented by { }."

1st Tool - Let

"Let" is the first tool to have block scope. To understand look at the following snippet:

var x=5; 
for(i=0; i<10; i++){
 var x=i+1;
}
console.log(x);

Output: 10

Now, lets see another example with variable declaration using "Let":

let x=5; 
for(i=0; i<10; i++){
 let x=i+1;
}
console.log(x);

Output: 5

Explaination: var does not make any difference inside and outside "{ }" tags, but let is scoped within these braces (having block scope). For 'var' whole code is open having no boundries. For "Let" there is an outer boundry of global-scope and there is a local boundry/wall of { } or Block Scope.

2nd Tool - Const

Const is the 2nd tool that you can use with ES6. It acts just like "Let" with the exception that once declared, it cannot be assigned a new value (in case you try the browser with throw an error). The scope of const is also { } or Block.

Look at the following example to understand better:

const a = 10;
if(true){
  const a=5;
  console.log(a);
}
console.log(a);

Output: 5 and 10

Explaination:Since, const has a block-scope, therefore in a new block (in case above - the if block), you can again create a new const and assign its value. As, if block closes the scope and life of 'const a' ends. The old 'const a' which was declared (or given birth) in the first line of code still exists and then output comes as 10.

Look at another example:

const a = 10;
a = 15;
console.log(a);

Output: Uncaught SyntaxError: Identifier 'a' has already been declared.

Explaination:You cannot re-assign value to a const once assigned the first time.

Const with Arrays & Objects

Remember, you cannot reassign the values to const once assigned first time. But, as arrays & objects always only have pointer (call by reference) to some memory location, what is inside the memory location you can change, without reassigning the pointer or reassigning value of const.

To understand better, look at the following examples:

const a = ['red', 'green', 'blue'];
a.push('yellow');
console.log(a);

Output: ["red", "green", "blue", "yellow"]

Explaination: Remember, you are just changing content where array pointer is pointing and NOT reassigning a new 'memory location'.

Look at another example:

const a = {name: 'Peter', age: 29};
a.name = "Rosy";
a.country = "France";
console.log(a);

Output: {name: "Rosy", age: 29, country: "France"}

Explaination: Remember, in this case also we are not reassigning a new memory location (by using the '=' operator). We are just changing the content in the pre-pointed memory location (which we can surely do with const).

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.