JavaScript Variables: Everything you need to know
Tags: javascript, tutorial, beginners
Published: 2020-10-11 22:12:03

---
title: JavaScript Variables: Everything you need to know
date: "2020-10-11T22:12:03.284Z"
description: "If you use the same value more than once you should store it into a variable. Variables are boxes that store values. We declare a variable in JavaScript using var, let or const. Each of these keywords makes the variable to behave differently."
---

If you use the same value more than once you should store it into a variable.
Variables are boxes that store values like numbers, words, arrays,  objects, and more.
In Javascript, we can declare a variable using three keywords: var, let, and const. Each keyword gives the variable a different functionality.

```javascript
var number;
let name;
```
These are called variable declarations. Two variables called **number** and **name** exist in our code but no value is assigned to them. Let’s change that.

``` javascript
number = 43;
name = "Kevin Doe";
const currentYear = "2020";
```

When you assign a value to a variable for the first time, it is called initialization.
The **number** variable stores the number 43. The **name** variable stores the string “Kevin Doe”.  And we declare a new variable **currentYear** initialized with the value “2020”.

## var VS let

As I said each of these three keywords can make a variable to work differently. Let’s first discuss the differences between var and let variables.

``` javascript
console.log(city); // undefined
var city = “Lisbon”;
console.log(city); // Lisbon
console.log(lastYear); // error 
let  lastYear = 2019;
console.log(lastYear); // 2019
```
This is the concept of hoisting. When JavaScript executes our code, it moves all variables to the top of the file. Var variables are initialized with undefined while let and const variables remain uninitialized.
 
The variable **city** is hoisted and initialized with undefined. And when we try to print its value for the first time we get undefined. As the code continues to execute to the bottom **city** is assigned with “Lisbon”. And when it is printed for the second time we get “Lisbon”.
 
The variable **lastYear** is hoisted but uninitialized because it is a let variable. So, when we try to print it we get an error because **lastYear** has no value. And the code stops to run because of it. But if that line of code was not there **lastYear** would be assigned to 2019 and printed.

The second major difference is scope. But let’s first invite const to the party too, just to be more clear.

``` javascript
var a = “a”;
let b = “b”;
const c = “c”;

function hey() {
  var a = 1;
  let b = 2;
  const c = 3;
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}
 
hey();
 
console.log(a); // a
console.log(b); // b
console.log(c); // c
```

First, we declare and initialize three variables **a**, **b**, **c** in the global scope. Think of the global scope as the file where we are writing our code.

We create a function called **hey** and we declare three variables. The names are the same as the previous ones but with different values. When we run the function **hey** we print the variables **a**, **b**, and **c**. We get 1, 2, and 3.
 
But why we don’t get “a”, “b”, and “c”?
 
Because the variables declared in the function **hey** are completely different. Those variables in the hey function are declared in the function scope. Every function has its scope. The variables declared in a function are only available inside that same function.
 
When we try to print the variables **a**, **b**, and **c** after running the **hey** function, in the global scope we get “a”, “b” and “c”.

```javascript
var a = “a”;
let b = “b”;
const c = “c”;
 
if(true) {
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}
 
console.log(a); // 1
console.log(b); // b
console.log(c); // c
```

We have three variables **a**, **b**, and **c** with values “a”, “b”, and “c” in the global scope. We run an if statement which condition is always true. There we declare variables with the same names **a**, **b**, and **c** with values of 1,2, and 3. And when we print them, we get 1, 2, and 3.
 
After that, we print them in the global scope. And we get 1, “b”, and  “c”.

But why 1?
 
Because var variables have only function scope while let and const have block scope.
Everything that is enclosed between a pair of curly braces is a block scope. So, for var variables, everything is a global scope except functions.

## const

We saw that const is block-scoped. But the thing why const is special is because its value can’t be reassigned. Also, we can not declare a const variable without initialization.

```javascript
var  a = 2;
a = 4;
 
let x = 5;
x = 1;
 
const  z; // error
 
const y = 10;
y = 33; // error
```

## What keyword should I use?

I always try to use const, and use let when I am sure that the value will need to be reassigned, like in loops for example. Const keeps my code secure and less prone to errors because values cannot be reassigned. I avoid using var because of its weird, error-prone scope.