Essentials of Javascript(Part 3)

The story of Triple Gems in Javascript — Let , Const , Var 😉🔥

Javascript is executed at run time in the Javascript engine of the browser.

Let’s dive into more important aspects and concepts of Javascript that every developer should know :)

If you wanna get most out of learning Javascript I highly reccomand you to check out my previous Articles regarding Javascript.

Please make sure to grasp your knowledge from them before dive into this Article.

Check out the links below.

Essentials of Javascript :) (Part1)

Essentials of Javascript :) (Part 2 )

Now let’s dive right into the things I want you to know 😄

Variable Declaration in Javascript

What is a Variable ? 🤔

As you already know Variable is a memory location in the memory which is used to store some data. In every programming Language , the variables are there to store data.

How Variables are declared ? 🤔

In other programming languages like ‘Java , C , Python and etc’ , they have premitive data types. All that means is , in order to declare a variable we have to give that variable’s data type(The type of data we want to store in that variable) like integer , double , string and so on.

When it comes to Javascript , the story becomes different regarding variable declaration.

Since Javascript is a dynamic programming language and since it is executed at the run time , the data types of the variables are also identified at the execution time. Developers and users don’t need to explicitly define a Variable by giving it’s type. Javascript will automatically identifies it’s type once the Variable is initiated.(once a value is assigned)

It’s an awersome bahaviour of Javascript. 😃🤘

When a programming Language becomes dynamic , there are lot of advantages of it.

Variable declaration using ‘ Var , Let and Const’

So variables in Javascript are data containers where we store our data.

ES6 is the latest Javascript verson.

Now let’s take a look at a code segment below and let’s understand how to declare variables.

Using ‘let’ to declare variables and using ‘const’ to declare constants.

In Javascript we declare variables using ‘let’ and ‘const’ key words according to the latest Javascript version , ES6.

In here at line number 9 , we declared a variable to store a name of a most famous and most instrumental Swedish DJ producer using ‘let’ keyword.

As we already discussed , Javascript understand the ‘djName’ as a String type since we assigned the producer’s name as a String Value.

At line number 11 , we changed the Name to a different Swedish producer’s name and definitely we can do it. Once we declared the variable at line number 9 , Javascript globally identifies it as a variable and we can store different data , later on.

Side note — At line number 11 , we can assign not only a String value but also any type of data since this Javascript is a dynamic language. 😊🔥

That’s the power of ‘let’ keyword.

Now let’s figure out what’s all about ‘const’ keyword.

‘const’ keyword is used to store constants. A constant means , once we assigned a value to a constant , we can’t change the value of it any where in our program.

At line number 13 , we declared a variable called ‘theNumber’ to store a integer type number using ‘const’ keyword. As you can see in the line number 15 , we can’t change the variable’s value and we can see the IDE also shows us it in red lines.

The constants are seldomly used by the developers , since they do need to change Variable’s data in order to accomplish their requirements.

Now we know what’s all about ‘Let’ and ‘Const’.

Keep in your mind — When it comes to variable declaration in Javascript or in any other programming languages , there are naming conventions to follow. In order to grasp those variable naming conventions , I recommend you to check out the link below and naming variables are always upto you :)

JavaScript Naming Conventions - RWieruch

A Side Javascript Joke 😉😃

The ‘var’ keyword

The ‘var’ keyword is also used to declare variables in Javascript.

The ‘var’ keyword is also as same as the ‘let’ keyword. We can declare changeable variables (values can be changed ) using ‘var’ keyword also.

Now you might be thinking why we have two different ways to declare variables in Javascript ? 🤔

Let’s figure it out 😄🤘

According to the old Javascript versions (ES5 and below) , ‘var’ is the only keyword , which was used to declare variables. There were no even ‘const’ keyword to declare constants.

Since the ‘var’ keyword make bugs in the programe and since it was error prone , an optimisation was needed for the variable declaration in Javascript.

In 2015 , The next Javascript version that we have already discussed in the history section of my first Javascript article , was introduced as ES6 which includes optimisations not only for the variable declartion , but also for the whole Javascript.

Es6 is what we are using as the latest Javascript version and it introduced ‘let’ and ‘const’ keywords as an optimization for the variable declaration conventions.

The ‘var’ keyword is not used anymore but it still exists and always remember to use only ‘let’ and ‘const’ keywords since it is not error prone to your code. :)

How ‘var’ can be error prone ? 🤔

Even ‘var’ and ‘let’ sounds acts the same , it’s actually not the same.

In ‘var’ , it’s Global scope. All that means is , if we declare a variable using ‘var’ , it’s globally avaliable to be used.

In ‘let’ , it’s block scope. All that means is , if we declare a variable using ‘let’ , inside a function or inside anything, it’s avaliable only inside that function or in that specific thing. So in order to use that kind of a variable any where in your code, we have to declare it Globally (Declare it top in your file).

1. How to identify block scope ? 🤔

We use curly brazzers {} in , for loops , functions , if conditions , objects and so on. The curly brazzers {} represnts a block scope. It represnts the scope of anything. (either loops , functions , if conditions and etc.)

Let’s take a look at the code segment below.

Representing the block scope.

The curly brazzers of the above if conditon’s , shows it’s scope. The scope of the ‘if condition’ is block scope to itself. Now you know what’s a scope.

Let’s understand how does ‘let’ acts as block scope.

Let’s have a look at the code segment below which represents a DJ producer’s Name and his music Genre.

Representing that ‘let’ is block scope.

In here at line number 9 , we declared a variable which stores the name of the DJ Producer. (we initiated it )

Since we declared it globally in our file , the ‘djName’ variable will be avaliable globally to be used.

At line number 12 , we have declared a variable using ‘let’ which stores the main music genre of that producer. Since that variable was declared inside the ‘showGenre’ function , it’s scope is blocked and that means the ‘genre’ variable will avaliable to be used , only inside that function.

So in line number 16 , if we try to log the value of variable ‘genre’ , we will not be abled to do it since it is avaliable only inside that function (block scope).

If we make line number 16 as not a comment and if we executed the file , we will get an error as you can see in the picture below.

‘genre’ variable is not avaliable to be used globally.

Yes , the ‘genre’ is not defined Globally so this error make sense :)

2. The ‘var’ is not optimised.

Let me show how ‘let’ keyword is optimised over the ‘var’ keyword.

Look at the code segment below.

‘let’ does not let developers to redeclare a variable.

I used the same code segments and at line number 10 , I redeclared the ‘djName’ variable and if we execute this file , we will get an error saying , we have already declard the ‘djName’ variable before.

Thanks for the ES6 features and thanks for the ‘let’ keyword of it , we could able to trackle the error.

Yes it propmts the error warning

Yes , we already declared it at line number 9.

Now Let’s try to do the same using ‘var’ keyword. (Variable declaration using ‘var’ )

Redeclaring a variable using ‘var’

Now the ‘djName’ variable is declared using ‘var’ keyword and I have redeclared it at line number 10 using ‘var’ keyword.

Now let’s execute the file and let’s see the output.

The output direcly got logged into the console.

Now we can see , we have got the output usually but this can’t be happen. The ‘var’ did not help us to know that we redeclared the variable.

So this is an evidence which represents that ‘var’ is not optimised.

Need to consider— Think in a real senario that you used ‘var’ for the entire program and if you mistakenly redeclard a varibale some where in your code and later on if you used that variable to get a usuful output , you will get a very unexpceted and wrong result. So always remeber not to use ‘var’ for variable declaration.

3. The ‘var’ is really error prone.

We learned that ‘var’ is Global scope and we can access any variable which is declared using ‘var’ keyword any where in our code.

Let’s take a look at a different example as below.

The ‘var’ variables which are function scope(declared inside a function) can’t be accessed globally too.

In this example we try to log the value of ‘genre’ since it is globally avaliable although it is declard inside the function.(The function is block scope to it self)

Let’s execute the file and see the answer.

Yes because it is function scope which is more than ‘block scope’

We are getting an error and according to the error , still we can’t access ‘genre’ keyword even it is globally avaliable.

This sounds weird , but don’t worry let’s have a look at an another example.

‘genre’ can be accessed globally since it is declard inside a if condition (block scope)

In this set of codes , I declared the variable ‘genre’ inside a if conditon and I am trying to log it’s value into the console at line number 28. Since it is globally identified , our expectation is to see the value at the console.

The expected result

As we expected we could able to see the genre of that particular DJ Producer.

But why we couldn’t access it when it was declared inside a function ? 🤔

All that make sense is even both function and if conditoon are block scope to it self , we can’t access ‘var’ variables from outside which are declared inside functions but we can access ‘var’ variables which are declared inside if condtions and inside any other block scope things.

Like wise I can take lot of examples to show how error prone is ‘var’ key word but I dont’ need since now we have got enough evidences to prove it.

So ,

‘var’ is really error prone. 🙃🎈

4. var is not in used anymore.

Since ‘var’ keyword makes lot of problems and since latest Javascript version has introduced ‘let’ and ‘const’ keywords , we should give up for ‘var’ keyword and we can make up our code more reliable by using ‘let’ and ‘const’ keywords to declare variables in our programs.

Good bye our dear old friend , you are worth as a Gem but you are bit clumsy😞😌

Now let’s make up our functionality clean and clear using ‘let’ and ‘const’.

Since ‘AVICII’ is my most favourite Artist , let’s try to log his name along with his music genre , into the console by using only ‘let’ and ‘const’ keywords.

Variable declaration using ‘let’ and ‘const’

Now let’s take a look at our expected result of this programe.

Our expected result :)

Hopefull we could able to get the answer.

Now we are done with ‘var’ , ‘let’ and ‘const’ keywords. 😀😌

I hope now you understood the importance of using ‘let’ and ‘const’ over ‘var’.

Why ‘var’ still exists ? 🤔

You might be wondering why it’s still avaliable even it is not used ? 🤨

Yes there is an reason.

The ‘var’ keyword is the one , which is avaliable since the day Javascript borned. So the web development happend in that era too using Javascript.

Before ES6 came out , developers used the ‘var’ for declaring variables and they have developed millions of web projects and web applications with ‘var’.

Since those old web applications and web logics are still under operation , if Google team or other browser vender teams stop supporting ‘var’ keyword in their Javascript engines , those miliions of web logics which operates all over the , world wide web(WWW) will stop working and that will be a bigger disaster.

This is the main reason for why ‘var’ still exists but we don’t use ‘var’ any more in Javascript.

From the other hand , since ES6 was only an upgradation for the existing Javascript , it makes lot of sense that ‘let’ and ‘const’ didn’t kick ‘var’ since upgradation does not mean to cut away it’s old version’s features.

Wrap Up

In this Article , we discussed about ‘var’ , ‘let’ , ‘const’ keywords which are used to declare variables in Javascript.

We understood the importance of using ‘let’ and ‘const’ keywords over ‘var’ keyword.

Never tough a variable which was declared using ‘var’ keyword. 😇😃

I hope you enjoyed this Article and I hope you gained up your knowledge regarding Javascript.

Stay tuned for more Javascript or any other IT realted Articles. I will definetly teach you the things that I promised in my previous Articles.

Stay tuned && Happy Programming with Javascript. 😀🔥🤘

Thank You !