JavaScript Variables and Constants are containers that are used to store data. The purpose of doing so is that we can reuse the value that we stored over and over again across our program by just accessing the variable name.
Another purpose of variables and constants in JavaScript is that we can label values with their own specific descriptive name so that our code becomes much more readable.
JavaScript Variables
There are two ways of creating variables in JavaScript. They are as follows:
Note: Make sure to check out our 👉 JavaScript Comments and 👉 JavaScript Console lesson.
Creating a variable using var 🤓
We can create a variable in JavaScript by using the var keyword. Creating a variable is also called declaring a variable. We can declare a variable in the following way:
var message;
message = "Hello, I am learning JavaScript";
The name “message” is called an identifier. Identifiers are unique names that define a variable. Each JavaScript variable must have a unique name. There should not be two variables with the same name.
In the first line, we declared a variable. In the second line, we initialized a variable. Initializing means giving the variable a value.
Here, message is a variable whose value is “Hello, I am learning JavaScript”.
We can then display the value by just using the variable name.
Example
var message;
message = "Hello, I am learning JavaScript";
console.log(message);
Output
Hello, I am learning JavaScript
Example: We can also declare and assign value to a variable in the same line.
var message = "Hello, I am learning JavaScript";
console.log(message);
Output
Hello, I am learning JavaScript
Example: We can also declare more than one variables in a single statement.
var name = "John Doe", age = 24;
console.log(name);
console.log(age);
Output
John Doe
24
Creating a variable using let 😎
Creating a variable using let is similar to that of var. The only difference is that we use the let keyword instead.
let message = "Learning variables in JavaScript";
console.log(message);
Output
Learning variables in JavaScript
Differences between var and let 🤔
The differences between var and let are as follows:
Redeclaration of variables
Variables created by let cannot be redeclared in JavaScript.
Example
//Redeclaring a variable is allowed using "var"
var number = 10;
var number = 11;
console.log(number);
Output
11
Example
//Redeclaring a variable is not allowed using "let"
var number = 10;
var number = 11;
console.log(number);
Output
Displays ErrorBlock scope
Variables created using let have block scope.
Example
//Variable created using "var" do not have block scope
{
var number = 10;
}
//number can be accessed outside the block { }
console.log(number);
Output
10
Example
//Variable created using "let" have block scope
{
let number = 10;
}
//number cannot be accessed outside the block { }
console.log(number);
Output
Displays ErrorUpdating Variables ✏
Variables can be updated once they are declared and assigned values. That means we can change the values we assign to them, anytime. This is true for both var and let.
Example
let new_number = 99;
console.log(new_number);
//Updating the value
new_number = 100;
console.log(new_number);
Output
99
100
Rules for naming a variable in JavaScript 📐
The following are the rules that must be followed when naming a variable in JavaScript:
- Variable names (Identifiers) must always begin with either a letter (a-z OR A-Z) or an underscore (_) or a dollar sign ($).
- Variable names must only contain letters (a-z OR A-Z), numbers, underscores and dollar signs.
- Variable names are case-sensitive. Eg: If there are two variables firstname & firstName, both will be treated as two distinct variables even if both have the same spelling.
- Variable names must not contain spaces. Eg: The variable my name is not valid. But the variable name myName is valid.
- There are some names in JavaScript that cannot be used as a variable name. These names are called keywords, which do a certain specific task. View some of the reserved keywords here.
JavaScript Constants
JavaScript Constants are also containers that store data. They are almost similar to variables and differ in only some ways. The difference between constants and variables are as follows:
- We use the const keyword to create constants
- Constants must be assigned values on creation
- Constants cannot be updated nor redeclared
Using the const keyword
We can declare a constant using the const keyword. Here, gravityOfEarth is a constant whose value is 9.8.
Example
const gravityOfEarth = 9.8;
console.log(gravityOfEarth);
Output
9.8
Constants must be assigned values on creation
We have to assign value to the constant in the same line we created it. Assigning value to a constant after creating it, will give us an error.
Example
//Creating a constant
const gravityOfEarth;
//Assigning the value 9.8 to gravityOfEarth after creating it
gravityOfEarth = 9.8;
console.log(gravityOfEarth);
Output
Displays ErrorConstants cannot be updated nor redeclared
Updating the constant after creating it, will give us an error.
Example
//Creating a constant
const gravityOfEarth = 9.8;
//Updating the value
gravityOfEarth = 10;
console.log(gravityOfEarth);
Output
Displays ErrorExample: Redeclaring a constant again, will also give us an error
//Creating or Declaring a constant
const gravityOfEarth = 9.8;
//Redeclaring the constant
const gravityOfEarth = 10;
console.log(gravityOfEarth);
Output
Displays ErrorRules for naming a constant in JavaScript 📐
The rules for naming a constant are exactly the same as that for naming a variable. You can check out the rules above.
When to use JavaScript constants? 🤔
Generally, we always use a constant to store data unless we know for sure that the value will change later on. If so, then we will use variables instead.
In this way, variables and constants in JavaScript help us in storing & labelling data and providing access to it throughout our program by just using the variable (or constant) name that holds the data.