# JavaScript Variables

## Introduction
Variable is one of the simplest topics in JavaScript. I can assure you that by the time you are done reading this article, you will have a good understanding of JavaScript variables.

This article will explain what a variable means, how to declare a variable, the types of variable scope we have, and some of the rules to abide by when naming variables.

### Table of contents
- What is a JavaScript variable?
- How to declare a variable
- JavaScript variable scope
- Local scope
- Global scope
- JavaScript variable names
- Conclusion
- Further reading

### What is a JavaScript variable?
JavaScript variables are used to store values. Think of a variable as a named container with items, and so to refer to the items, all you have to do is simply call the name of the container.
Here's a better illustration:
- I have two boxes each containing apples and clothes respectively.
- The first box contains apples; The second box contains clothes.
- I named the first box **' fruits'** then the second box **' costume'**.
- **fruits** is the first variable while **costume** is the second variable.

Let's say we want to refer to the box containing clothes, Instead of calling **clothes**, we will just call the variable name(costume).
So the boxes (variable) are used to keep the apples and clothes (Data or value).

Now let's see how a JavaScript variable can be declared.


### How to declare a variable
To use variables in a JavaScript program, you need to declare them. Keywords like **var**, **let**, and **const** are used to declare variables.

This example declares two separate variables using the **let** keyword:

```
let fruits = apples;
let costume = clothes;
```
You can also declare a variable and assign a value to it at a later time. For Instance, you can declare a variable named **food** and assign a value to it later.

```
let food;
let costume = clothes;
food = rice; 
```
In JavaScript, the value of a variable is liable to change which is tended to by JavaScript.

### JavaScript variable scope
Variable scope is the area in which the variable is declared. There are two types of variable scopes in JavaScript
- **Global scope:** A global variable can be declared anywhere in your code, this makes it 
   global scope. 
Here's an example:

```
let a = "john";
function name() {
     console.log(a);
}
name();  
```
Result

```
john

```
In this example, variable **a** was declared at the top of the code but is also accessible within the function.
- **Local scope:** A local variable is declared within a function and can **only** be accessed within that function and if you try to access the variable outside the local scope, you get an error message.

Here's an example:

```
 let a = "good"; 
function greet() {
  let b = "morning";   
     console.log(a + b);
}
greet();  
console.log(a + " " + b); 
```
Result

```
good morning
Uncaught ReferenceError: b is not defined
```
In this example, **a** has been declared at the top as a global variable, that is the reason it can be accessed within the function when it was called. The error message gotten is a result of the fact that **b** was declared inside a local scope and it cannot be accessed outside its scope.

### JavaScript variable names
Rules to abide by while naming variables:
- Do not use any JavaScript keyword that is reserved eg. **var**, **do**, **boolean**, **function**, etc.
- The variable name should not start with a number only letters or underscore eg. 12john is invalid but _12john is valid.
- Variable names in JavaScript are case sensitive. This means that writing your variable name with a particular capitalization must be consistent. 


### Conclusion
This article has explained clearly what a JavaScript variable means with a good illustration and also how to declare a variable.  
 
We also learned what JavaScript variable scope is and became familiar with the two types of variable scope we have with examples.

Finally, we took a look into the rules of naming JavaScript variables.

### Further reading 
- https://www.w3schools.com/js/js_variables.asp
- https://www.tutorialspoint.com/javascript/javascript_variables.htm