DEV Community

Habdul Hazeez
Habdul Hazeez

Posted on

JavaScript Variables

Variables in programming are named memory locations that store data. This said data can be retrieved for later user via the name. Some programming languages allow you to assign the same name to another variables and others strictly forbid this.

The programming languages that allow the reassignment of the same variable name to another data are called loosely typed languages others that forbid this are called strongly typed languages.

JavaScript is an example of a loosely typed language.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.

Variables in JavaScript can be declared with three keywords. They are:

  • var
  • let
  • const

They literally do the same thing but with some huge differences.

Variables declared with the var keyword are the "traditional" way of declaring variables in JavaScript and you will still find them in modern code and some developers still use them and some advocate against it.

The var keyword used in ReactJS as seen in Firefox 71.0 Developer Tools
The var keyword used in ReactJS as seen in Firefox 71.0 Developer Tools

Now, you might wonder why i said the var keyword is a "traditional" way, that's because of its behavior. And prior to ES6 (ES2015) the var keyword was the only way to declare variables in JavaScript. The let keyword was introduced in ES6 to solve some of the issues that arise when using variables declared with var. We'll talk about let later.

The question you might ask is: What behavior are you talking about?

The behavior is called hoisting. From a beginners perspective hoisting is an advanced JavaScript concept but, it will be of great help if you know about it when starting out with JavaScript.

Let's talk about it briefly and we'll provide an additional learning resource if you decide to go deep and learn this further.

Hoisting means regardless of where a variable is declared, it is moved to the top of the scope in which it is defined.

That's the basic definition. Let's see some code.

Take a look at the image below. We called variable a before declaring it but due to hoisting the variable still get the value 10 after the code is executed.

Variable hoisting as seen in Firefox 71 Developer Tools

Mind you i have docked the Developer Tools into a separate window. If you've followed this series up to this point i believe you should be able to do this.

This is just a basic example and its enough to get you started.

This particular hoisting behavior also applied to functions as we'll see later in the series.

If you will like to take a deep dive into hoisting, please read the following post by lydia hallie.

The let keyword was introduced in ES6 (ES2015). Any variable declared with the let keyword cannot be called before being created.

We'll revisit our previous example by changing var to let.

Variable declaration in JavaScript

When the code is executed you will get an error stating ReferenceError: can't access lexical declaration 'a' before initialization.

Reference error shown in Firefox developer tools

But, in the source code after the variable is declared with let you can assign another value then the code will execute just fine.

Variable declaration shown in Firefox devtools

const on the other does not allow this.

The const keyword was introduced in ES6 (ES2015) alongside let and unlike let you cannot assign another value to a variable declared with const.

If you try to assign another value to a variable declared with const you will get an invalid assignment Type error.

Type error shown in firefox devtools

There is more to JavaScript variables than what we've discussed here but this is enough to get you started.

Up next, Arrays.

Top comments (0)