Variables In JavaScript: Var, Let, and Const.

Variable in Javascript is synonymous with a storage container. We can easily understand the concept of a variable using candies in a jar container. Think of a jar container full of candies, with a label Burberry candies written on it. The jar is used to store the Burberry candies, which is the same thing a variable does, store data. This article will cover everything you need to know about variables in Javascript.

What Is a Variable?

A variable is a container for storing data such as numbers or strings. When declaring a variable, it is good practice to use a name describing the data. For example,

let gender = "male";

//another example

let numberOfApples = 20;

Rules For Declaring a Variable

Variables are case-sensitive. Age is not the same as age.
Variables can contain numbers, letters, dollars sign ($), and underscore (_).
Variable name must begin with a letter, dollar sign, and underscore only. the first letter of a variable must not be a number. For example, 1age is not acceptable but rather age1.
When naming a variable, there should be no space in the variable name. age 1 is not acceptable, the space should be replaced with an underscore, age_1.

Variable Declaration

Creating a variable is known as variable declaration. You can declare a variable using var, let, and const keywords.

It is important to know how to declare variables using the three keywords and the difference between them. So let's declare a variable message using the three keywords.

To declare a variable using the var keyword, you have to write var followed by the variable name. Variables declared with var can be reassigned and redeclared.

var message;
message = "welcome";

Declaring a variable using the let keyword is the same process as declaring with var. Write the let keyword followed by the variable name. Variables declared with let cannot be redeclared but can be reassigned with a new value.

let message = "welcome";

Once again, to declare a variable using the const keyword, write const followed by the variable name.

const message ="welcome";

Also you cannot declare a variable with const and not initialize it immediately.

const message;
message ="welcome";
Console.log(message);

Variables declared with const cannot be redeclared. Also, they cannot be reassigned with a new value, they hold a constant value. This simply means you cannot change the value.

Variable Initialization

After declaring a variable, we assign a value to that variable. Storing or assigning a value to a variable is Initialization.

To initialize a variable, you specify the variable name followed by an equal sign(=) and the value.

let sport;                               // variable declaration
sport = "football";                      // variable initialization

You can assign value to a variable immediately or later when the variable is needed. A variable can also be declared and initialized on a single line

let sport = "football";

Undeclared variable and Undefined variable

Knowing the difference between an undefined variable and an undeclared variable is extremely necessary.

An undeclared variable is a variable that has not been declared.

console.log(food);

//output: ReferenceError: food is not defined

In the example above, the variable food was not declared, hence accessing it will throw an error. ReferenceError: food is not defined.

let food;
console.log (food);

output// underfined

In contrast, an undefined variable is a variable that was declared but not initialized with a value. The food variable in the example above was declared, but not assigned any value. Accessing it returns undefined.

Reassigning a Variable.

After declaring a variable and assigning a value to it, you can give it a new value at any point. However, only variables declared with var and let can be reassigned with a new value.

var age = 20;
age = 21;
console.log(age);

//output: 21

let score = 50;
score = 70;
console.log(score);

//output: 70

When you reassigned a new value to a variable, accessing the variable returns the new value. In the code above, the score variable was initially assigned a value of 50 and later reassigned to a value of 70. Accessing the variable score will return 70 as the output.

const score = 50;
score = 70;
console.log(score);

//output: TypeError: assignment to constant variable.

Variables declared with const cannot be reassigned. when you reassigned a value to any variable declared with const, It returns an error message. Take a look at the code above, the score variable was initially assigned a value of 50. Reassigning it with a value of 70 throws an error message. TypeError: assignment to constant variable. This means you are assigning another value to a constant variable.

Local Variable and Global Variable

A local variable is declared inside a block of code or function. It has a local scope, which means it is only accessible within the function or block of code.

function food () {
 let fruit = "pineapple";              // local variable
console.log(fruit);
}
food();                                // calling javascript function

The variable fruit is a local variable because it was declared in the function food. Hence it can only be accessed inside the function. Accessing it anywhere else other than the function food will throw an error message.

A variable declared outside the function or on the window is known as a global variable. A global variable has a global scope, hence you can access it anywhere. For example

 let fruit = "pinapple"                 //global variable

function food() {
console.log(fruit);
}
food();                                 // calling javascript function

The fruit variable was declared on the window outside of the function but was used inside the function.

Conclusion

A variable is a container for storing data. Variables can be declared using the var, let, and const keywords. When you’re sure the value of a variable is not going to change throughout the program, it is best practice to use the const keyword.

If you found this article helpful, pls like and leave feedback in the comment section. Also, share this article, you might be helping someone somewhere just starting in JavaScript. Lastly, follow me for more educative articles.

Zainab Ibrahim