Ever wondered why JavaScript has three different ways to declare variables? In this guide, we explore the real differences between var, let, and const, with clear examples that make each concept simple to understand. Discover how choosing the right variable can help us write better, safer code and avoid common mistakes.
This tutorial will teach you everything including the process of declaring variables, differences between multiple variables, initializing variables, changing their values, rules of naming variables and more to make you master the concept of JavaScript Variables.
Also Read: JavaScript Strict Mode: What it Does and Doesn’t Allow
JavaScript Declare Variable
In JavaScript the concept of variables is different from other programming languages, you don’t have to define the data type of a variable when declaring it.
A variable can be declared in JavaScript using three keywords, var, let, and const.
Declare Variable using the var keyword
Declare Variable using the var keyword is a traditional way, it is mainly used in older versions of JavaScript, using the var keyword to declare a variable has many cons, the variable declared using the var keyword is not considered as block scope, which means it can be accessed outside of a block in which it is declared, this can cause many security issue and bugs as sometimes we knowingly want that a variable is not accessible outside.
However, many browsers don’t support the let keyword(which we will discuss later), in that case, a var can be a better alternative.
Syntax:
var variableName;
where variableName is the name of the variable used to assign and access value to it.
Declare Variable using the let keyword
The let keyword is introduced in ES6, which is considered modern JavaScript, the let has many advantages over var, as it is block scope and it is usually recommended to use for declaring variables in JavaScript.
Syntax:
let variableName;
where variableName is the name of the variable used to assign and access value to it.
Declare Variable using the const keyword
The const is also introduced in ES6, just like let, the variable declared using the const keyword is also considered as block scope, the only difference is that, once a variable is initialized using the const keyword it is immutable(don’t worry we have discussed this later in this tutorial) and it is considered as a constant.
Syntax:
const variableName = value;
where
- constantName is the name of the constant,
- value is the data that will store in constant
Note: A constant declaration must be initiated.
In the above section, we have discussed block scope, the scope is an essential concept to better understand the variable. We have a separate tutorial on Scope in JavaScript, consider reading it.
Rules of Naming JavaScript Variables
Following are the rules one should keep in mind when naming a variable.
- JavaScript reverse words can’t be used as the variable name.
- It can’t start with a number, a variable name should start with a letter, underscore(_) or a dollar sign($).
- Variables names are case sensitive, i.e., the variables having name num and Num are considered different.
Initialize Variable in JavaScript
A value can be assigned to a variable using the Assignment Operator(=).
Below is an example of assigning value to the variables.
var varVariable;
let letVariable;
varVariable = 1;
letVariable = 1;
console.log(varVariable);
console.log(letVariable);
Here we have assignment 1 to each variable and print its value using the variable name.
Output:
1
1
Change the value of a variable
The value of the variables can be changed later on, however, the value of the variable declared using the const keyword is immutable, which means it can’t be changed as it is considered a constant, and constant value can’t change.
var varVariable;
let letVariable;
varVariable = 1;
letVariable = 1;
varVariable = 2;
letVariable = 2;
console.log(varVariable);
console.log(letVariable);
Output:
2
2
Here you can see the value is updated.
Let’s try changing the value of a constant variable.
const constVariable = 1;
constVariable = 2;
console.log(constVariable);
Output:
constVariable = 2;
^
TypeError: Assignment to constant variable.
at Object.<anonymous> (C:\Users\ag290\OneDrive\Desktop\variable\app.js:12:15)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
at internal/main/run_main_module.js:17:11
See, we got an error, hence it is justified that constant variables are immutable.
Summary
JavaScript Variable is a way to store values, it is considered as a container that can contain data that can be accessed later using its name. Variables can be declared using var, let and const keywords. The value of var, and let can be changed later, but the variable declared using const is immutable, i.e, it can’t be changed. Hope this tutorial helps you to understand the variable in JavaScript.
Frequently Asked Questions
What is a variable in JavaScript?
A variable in JavaScript is a container that holds values like numbers, strings, or booleans, and we can access these values by using the variable’s name.
What are the main ways to declare variables in JavaScript?
JavaScript uses three keywords to declare variables: var, let, and const, each with different rules for scope and reassignment.
How is var different from let and const?
The var keyword creates variables with function or global scope and allows redeclaration, while let and const create block-scoped variables and do not allow redeclaration in the same block.
When should we use let instead of var?
We should use let when we want a variable that can change its value and is only accessible within the block where it is defined, making code more predictable.
What does const do in JavaScript?
The const keyword creates a variable whose value cannot be reassigned after it is set, and the variable is only accessible within the block where it is defined.
Can we change the value of a const variable?
The value assigned to a const variable cannot be changed, but if the value is an object or array, we can still modify its contents.
What does it mean for a variable to be block-scoped?
Block-scoped means the variable exists only within the curly braces where it is declared, such as inside a function, loop, or if statement.
Why is var considered less safe or outdated?
The var keyword can lead to unexpected behavior because it does not have block scope, which can make code harder to understand and maintain.
Can we declare a variable without giving it a value?
With var and let, we can declare a variable without assigning a value, but with const, we must assign a value at the time of declaration.
What are the rules for naming variables in JavaScript?
Variable names must start with a letter, underscore, or dollar sign, and cannot use reserved words or contain spaces.