JavaScript Variables
Tags: beginners, javascript
Published: 2019-12-23 20:03:40

---
title: JavaScript Variables
published: true
description: A beginners introduction to JavaScript variables
tags: beginners,javascript
series: FrontEnd Development Zero to Hero
---
__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 <b>Firefox 71.0</b> and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the <b>multi-line code editor</b> in the console._

<hr>

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](https://thepracticaldev.s3.amazonaws.com/i/qborza16tv9um7miqi5q.PNG)<figcaption>The var keyword used in ReactJS as seen in Firefox 71.0 Developer Tools</figcaption>

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](https://thepracticaldev.s3.amazonaws.com/i/rj4ntgte9inetddw82lk.PNG)

<center><small>
__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.__ 
</small></center>

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](https://dev.to/lydiahallie).

{% link https://dev.to/lydiahallie/javascript-visualized-hoisting-478h %}

<hr>

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](https://thepracticaldev.s3.amazonaws.com/i/p6kpk55i4ietr58jped6.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/r5wtey1poxwasvn9wp7u.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/ep12ejdzod5oe683emjo.PNG)

`const` on the other does not allow this.

<hr>

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](https://thepracticaldev.s3.amazonaws.com/i/i2bcw4mf8j46lna9hzoz.PNG)

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

Up next, Arrays.