Episode 1: Why and Why Not Var, Let & Const | Function vs Block Scope in Modern Javascript Lightning Web Components Salesforce ☁️⚡️

Kapil October 29, 2022


 Before ES6, the only way you could declare a variable or a function in JavaScript was using the var keyword. You now have other options, and in video I will show you why you want to use them.

For all the videos and tutorial in this series I will be using playground from playcode.io 

For that you just need to go to playcode.io and choose the JavaScript template option to get started.


Let’s start it by understanding an example of using var, Variables declared with the var keyword are said to be in the function scope. This means that a variable would exist only within the scope of the function in which it was declared. Or the nearest parent function, if it's a nested function.


For example let’s try to run a code block in the playground:

1
2
3
4
5
6
7
8
    var txt1 = "Hello";

    function myFunction() {
        var txt1 = "World";
        console.log(txt1);
    }
    myFunction();
    console.log(txt1);

Output


You will be able to see both logs. But what if we add a block scope with if condition as shown below

1
2
3
4
5
6
7
8
var txt1 = "Hello";

if (true) {
    var txt1 = "World";
    console.log(txt1);
}
myFunction();
console.log(txt1);


Output


Executing that code results in the world word twice, because the fact that the var keyword does not support block scope.

A block is any code within curly braces. Block scoping ensures that any variables defined within those braces don't become global variables. They instead have local scope. 


Let is the new var


Let is the new var in modern javascript which will solve the block scoping issue here. Let’s try same example with let as well!


1
2
3
4
5
6
7
8
let txt1 = "Hello";

if (true) {
    let txt1 = "World";
    console.log(txt1);
}
myFunction();
console.log(txt1);

Output



And don’t forget we have Const also: Variables declared with the const keyword are also block-scoped

However, there are a couple of things to be aware of when using the const keyword. Since const values cannot be reassigned, they must be initialized at the time they are declared.

If you will not reassign it than it will throw an error saying the constant must be initialised. 

You can always modify the properties of objects or arrays with const for example, if you declare an object such as 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 const myUser = {
        firstName: "Kapil",
        lastName:"Batra"
    }
    console.log(myUser);

    myUser.firstName="Salesforce";
    myUser.lastName="Bolt";

    console.log(myUser);

Output



The bottom line of all of this is that you definitely should use const to define variables whose values will never change.


Checkout complete video tutorial below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments