DEV Community

Diwakar Verma
Diwakar Verma

Posted on

How to Declare Variables in JavaScript?

While coding in JavaScript, variables are essential for storing data values that can be used and manipulated throughout your program and can be used several times in the program. JavaScript provides three main ways to declare variables: var, let, and const. Each has its own use , and understanding their differences will help you write more efficient and bug-free code.

1.Declaring Variables with var.
var was the original way to declare variables in JavaScript, but it's less commonly used today due to its quirks. When you declare a variable with var, it is function-scoped or globally scoped (if declared outside of a function). This can lead to unexpected behavior because var variables are also hoisted.
Image description
Key Characteristics of var:
1.Function-scoped: If declared inside a function, it can only be accessed within that function.
2.Global if outside functions: If declared outside any function, it becomes a global variable.
3.Hoisting: Variables declared with var are "hoisted" to the top of their scope, meaning they can be used before they’re actually declared. However, the value will be undefined until the assignment line is executed.
Image description
In the example above, var name is hoisted to the top, but the value is not assigned until the code reaches the assignment line.

2. Declaring Variables with let
In JavaScript, you can use let to declare a variable when you think the value might change later on. The important thing to know is that let keeps the variable limited to the block (set of curly braces {}) where it’s defined, so it doesn’t affect code outside that block.
Image description

Key Characteristics of let:
1.Block-scoped: Variables declared with let are only accessible within the block where they’re defined.
2.No hoisting confusion: Although let is hoisted, it remains in a temporal dead zone until the declaration line is reached, preventing the confusing behavior seen with var.
(Temporal dead zone) will discuss about this in futher articles.
Image description

3.Declaring Constants with const
When you declare a variable with const, it means that the value cannot be reassigned. This is useful for variables that should remain constant throughout your code, such as configuration settings or values that should not change.
Image description
Key Characteristics of const:
1.Block-scoped: Like let, const variables are only accessible within the block where they’re defined.
2.Cannot be reassigned: Once a variable is declared with const, you cannot reassign a new value to it.
3.Must be initialized: You must provide an initial value when declaring a const. If not, you’ll get a syntax error.

Image description
While you cannot reassign a const variable, if the value is an object or an array, you can still modify the contents of the object or array itself.
Image description
Choosing Between var, let, and const
-Use let when you need to reassign a variable and want to limit its scope to a block (such as in loops or conditionals).
-Use const for variables that shouldn’t change after being assigned.
-Avoid using var in modern JavaScript unless working with legacy code.

Conclusion:
Declaring variables correctly is essential for writing clean and bug-free JavaScript. While var is still around, let and const are now the go-to options due to their block scoping and better error prevention.

Top comments (0)