Yet Another Article on Var, Let and Const Keywords.

Fufu Byte
Fufu Byte
Feb 12 · 5 min read
Photo by Christopher Robin Ebbinghaus on Unsplash

If you have been writing JavaScript for a while or you are a beginner who is starting their software development career in JavaScript must have come across these three magic keywords var, let and const. These keywords have only one job, to declare a variable in JavaScript.

A variable in its simplest of terms can be said to be a container in which a value is stored in and can be reused in the code later on. As you can see in the code below the variable greeting now holds the value hello user which can be reused later on in the code if needed.

From Author

If you noticed in the code above the keyword var precedes the variable name greeting. Its main job is to tell JavaScript that the word greeting is a variable, which JavaScript allocates memory to. So if they all do the same thing, which is declare a variable why have three keywords? They all have their subtle differences which can have a major impact on your code if not used properly. I will discuss it in three points.

  • Scope
  • Declaring or Re-declaring
  • Assignment or Reassignment

This is where var can be tricky, and it was one of the reasons the other keywords where created. The problem with var is that it is function scoped and if there is not a function then var will be globally scoped. While let and const are block-scoped. The following code snippets should help you understand.

Image displaying code
Image displaying code
From Author

In this if statement, you must have noticed the variable was declared in the if block, but yet the console.log could still find it why? In this case, there was not a function so the var keyword made variable globally scoped i.e outside the if block

Image displaying code
Image displaying code
From Author
Image displaying code
Image displaying code
From Author

The let and const keyword behaves the same when dealing in scope context. As in the code above, the variable was declared in the if block, so when console.log looked for it, it could not found, hence the Reference error. But if console.log was called inside the if block, it would be seen and logged to the console.

This concept doesn’t only work in if statement but also in for loop

Image displaying code
Image displaying code
From Author
Image displaying code
Image displaying code
From Author

This is a good example of the keyword var scope issue. After the loop had finished variable i still added 1 to its previous value and because var keyword is function scoped the console.log referenced the variable i on the function level not block-level like the let keyword.

It is best to use let or const so as to prevent your code from misbehaving due to the scope issue of var.

It is possible for a developer to re-declare a variable by mistake. This could happen due to either the developer does not know that the variable has been declared. This is also var’s shortcomings, let look at the codes snippet below.

Image displaying code
Image displaying code
From Author

The code above declared a variable and re-declared it thereby changing the value of the variable to the new value.

Image displaying code
Image displaying code
From Author
Image displaying code
Image displaying code
From Author

This is also where let and const have similar behaviour they cannot be re-declared after they been declared. This free you from having to know every variable name you have created to avoid it from being overwritten and alsoe keeps in check.

Image displaying code
Image displaying code
From Author
Image displaying code
Image displaying code
From Author

Though var and let behave the same when you want to reassign a variable to value. On the other hand, const differs from the rest in this regard.

Image displaying code
Image displaying code
From Author

As you can see variable cannot be reassigned with a new value once assigned. It is safe to say const stands for constant in JavaScript. This is useful if you do not want the value of a variable to change

Image displaying code
Image displaying code
From Author

But when dealing with an object, it is a different case entirely, why? This boils down to the way JavaScript stores an object. The variable is holding an object as a value, but not the object itself, but an address in the memory which links to the object. Confusing 😕? I was at first but got the concept later on. That is how an object is stored including arrays, I know it sounds strange but with the time you understand it.

FYI: When declaring a variable it is best practice to use either the let or const keyword to avoid any issue with your code most times use const, you can use let if you intend to change the value of the variable later on.

Happy Reading!!!

I hope you have a good understanding of var, let and const keywords from this article. This is just some of the goodies JavaScript has in store for you.✌

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store