What are 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.

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.

JavaScript Variables

A simple and clear explanation