Nerd For Tech
Published in

Nerd For Tech

Declarations in JavaScript

A beginner’s guide to declaring variables

In JavaScript, we have three options available to us when we want to declare a new variable. For a quick refresher, we use variables as a container for storing values or data. This could range from a number to a string, or an array to even a whole function. We are going to start small so we can learn the differences, and similarities, our declaration statements have. Let’s jump right into it.

Var

This may seem somewhat obvious to some of you, but var actually stands for variable. This was one of the original ways to declare a variable when JavaScript was first created and is still used today. When declaring any new variable, we will always want to follow the same format. Declaration, name, equals value. Let’s take a look at the var example below to get a better picture of what this format looks like.

As you can see, we follow just that format. Our declaration is var and we have named our variable a. We always include the equals, as this is what our variable a is equaling. And last we have our value which has been set to 10. We have just declared our first variable! What were to happen if we wanted to increase a’s value by 10 using an if statement? Well, we have four options available to us so let’s take a look at all of them.

All return

Okay, so I may have stretched two into four but with good reason as you will see later. In the first two examples we are simply reassigning a to a plus 10 and in the second two we are reassigning a to be 20 outright. As you might expect, in all instances, if we were to console log outside of the if statement a should still equal 20. Right?

Returns

Yes, you would be correct! After reassigning our variable of a our result will always be a having increased by 10. This is because var is globally as well as function scoped. As I stated earlier this was traditionally the way one would create a variable in JavaScript, but ES6 has given us var’s long lost twin.

Let

Let was introduced in 2015 with the release of ES6 for JavaScript. This gave us a new way to declare a variable as well as some different functionality versus var. But before we get into that let’s take a look at three examples showing how we can change the value of our variable b.

All return

As you can see, we have reassigned the value of b to 20 but have achieved it two different ways. Haven’t I left out an example? Well yes, but to help you better understand the difference. Let’s take a look at it now.

What do you think it will return?

We got an error, but what is that error telling us? Well clearly it is telling us that we cannot access our variable of b before it is initialized. Our error picture also gives us a visual of where our code is stopping. After we have declared our variable of b it should equal b, and then stops. This is because b is being initialized right then and there. We are not actually calling on our initial value of b, we are making an entirely new variable of b within our if statement. For a visual let’s see what b would be outside of the if statement.

Returns

As you can see our variable of b is still equal to its initial value of 10. This is because let is a block scoped variable. When we declared b equal to the value of 20 within our if statement, we created a new variable named b within that block. Once we exit the if statement, we exit that block and return to the outer most block where our variable of b is equal to 10. But what would happen if we just reassigned the values like in the other two examples?

Both return

In both cases, because we are not initializing a new instance of b within our if statement, i.e. creating a new block so to speak. We are simply just reassigning it’s value on the block that it is first being initialized on. But we’ve still got one more member of the family to cover so hold on.

Const

Up last but certainly not to be overlooked is const, which as you could probably guess stands for constant variable. It sounds kind of scary, what does that mean exactly? Well to put it very simply and a matter of fact, a constant variable cannot be changed once it has been declared. So, in a sense it could be scary, should you need to change that variables value. Let’s take a look at an example below.

Returns

Wait I was able to do this though? Well that is because similar to let, const is a block scoped variable. Meaning that we have in actuality just created a new constant of c equal to 20, but only within our if statement. Should we try to make the value c plus 10 of our const variable of c, we will be hit with the same error of not being able to access our variable of c before it is initialized. But what if we tried to try to reassign it?

Returns

No surprise there, JavaScript will not even let us by throwing a much more serious type error. Simply cannot reassign or change the value of a constant variable once you have declared it.

I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.

--

--

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
Kevin Glasgow

Kevin Glasgow

20 Followers

Full Stack Software Engineer | Passion for Frontend and Design | Dirt Rider & Snow Glider | www.linkedin.com/in/kevin-glasgow/