JavaScript tutorial series: Variables
Published: 2023-02-09 16:25:12

If you've been following along my CSS tutorial series, then you probably know that we've previously explained what a variable is. If not, don't worry we're going to explain everything in this series and build our knowledge from the ground up.

Before we start explaining what are variables let's take a look at an important thing.

## Internal and external script.
Just like `CSS` JavaScript uses either a tag `<script></script>` placed at the bottom of your `HTML` file or an external script `<script src="path/script.js"></script>` that refers to the separate file that contains your JS script.

## What is a variable?
A variable is a specific place where data is kept. Variables are named then given the value that you want to store. Variable names may consist of letters, numbers, and $ or _, but they cannot begin with a number or contain spaces.

You **declare** a variable like this:

### Types of variables: 

|Types of variables| Description |
|------------------|:-----------:|
| undefined | This means that the variables has not been assigned a value| 
| null | This means that the variable has an empty value|
| boolean| returns either `true` or `false`|
| string | a series of characters |
| symbol| symbols are immutable and unique|
| bigint | BigInt is a special type of number that supports integers of any length.|
| number| Integer or a decimal number also knows as a floating point number|
| object | object is a complex data type|

```JavaScript
var fullName;
```
You assign a value to your declared variable by using the assignment operator `=`. This is called **initializing** a variable.

```JavaScript
var fullName = "John Doe"; 
```

There are Restricted names that cannot be given to a variable such as `class`, `return`, `this`, `function`, `let`, `const`, `var` etc... you can find the full list with a quick google search.

## Var, let and const

### Var
`var` has been used in the previous versions of ECMAScript, and as seen in the example above, it is used to declare a variable. The `var` keyword allows you to re-declare the variable meaning, it will overwrite it.

```JavaScript
var age = 20;
var age = 25;
```
This will not throw an error but will overwrite the `20` and give us `25`. Finding bugs and fixing them becomes more harder because this behavior does not throw an error.

### Let
This problem with the var keyword was resolved by the addition of the let keyword in ES6, (ECMAScript 6) an important update to JavaScript.  There can be only one declaration of a variable with the same name when using let.

```JavaScript
let age = 20;
let age = 25;
```
This code will throw an error, since you cannot re-declare a variable in ES6.

```JavaScript
let age = 20;
 age = 25;
```
This code will not throw an error because you can reassign a variable declared with `let` but not re-declare the variable.

### const 
`const` are only readable (read-only). Since they have a constant value, they cannot be changed after being assigned 


```JavaScript
const SHIRT_COLOR = "red";
SHIRT_COLOR = "green";
```
This will throw an error since, `const` is read-only and cannot reassign it later. 

For variables that you don't want to change, Const should always be used.
You should use camelCase or lowercase for changeable values and uppercase for unchangeable values.