Variables in Javascript
7 min read
Variables are like containers. Variables hold related data in memory. Javascript has three ways to define variables:
By using Let
By using Var
By using Const
Let's discuss each of them quickly.
Using Let
let is the latest way of declaring variables in Javascript. let the keyword was added in 2015 in Javascript. All modern browser supports let and it is the recommended way by the community. While seeing its syntax we will also see its benefits and working style.
Syntax of Variable Declaration using Let
let variableName = value;
let is blocked scope
let is blocked scope variable. This means you can not use variables declared using let outside of its scope. Anything inside curly braces {} is a block. If you want to read more about the scope please refer to my below article.
let value = 5
if(value < 5) {
let greet = "Hello"
console.log(greet) // Will Print Hello
}
console.log(greet) // Will throw Uncaught Reference Error
let cannot be re-declared
You can update variables declared using let but you cannot re-declare them in the same scope. Which is good practice and prevents a lot of bugs.
let greet = "Hello"
let greet = "New Declaration" // will throw error. due to redeclaration
greet = "Hey" // Will Work because we are updating
Re-declaration in the same scope is not allowed. But Re-declaration in other scopes is totally valid. Because in other scopes Javascript will treat them as different variables.
let greet = "Hello"
if(true) {
let greet = "Re-declation in different scope" // Allowed
console.log(greet) // Will work fine
}
console.log(greet) // Will Print Hello
Hoisting of let
Hoisting in JavaScript is a behaviour in which a function or a variable can be used before declaration. Variables declared using let will be hoisted at the top. However let declaration will not be initialized during hoisting. So when you try to access that variable it will throw an error.
console.log(value); // throws error
let value
Using Const
To declare constant values in Javascript, we use const. Values declared using const will not change its values means you cannot update const variables. They are immutable.
Syntax of Variable Declaration using Let
const variableName = value;
const is blocked scope
Just like letconst is also blocked scope variable. This means you can not use variables declared using const outside of its scope.
const value = 5
if(value < 5) {
const greet = "Hello"
console.log(greet) // Will Print Hello
}
console.log(greet) // Will throw Uncaught Reference Error
const cannot be re-declared
You cannot re-declare const variables in the same scope, which is good practice and prevents a lot of bugs.
const greet = "Hello"
const greet = "New Declaration" // will throw error. due to redeclaration
greet = "Hey" // Will Work because we are updating
Re-declaration in the same scope is not allowed. But Re-declaration in other scopes is totally valid. Because in other scopes Javascript will treat them as different variables.
const greet = "Hello"
if(true) {
const greet = "Re-declation in different scope" // Allowed
console.log(greet) // Will work fine
}
console.log(greet) // Will Print Hello
Hoisting of const
Hoisting in JavaScript is a behaviour in which a function or a variable can be used before declaration. Variables declared using const will be hoisted at the top. However, const declaration will not be initialized during hoisting. So when you try to access that variable it will throw an error.
console.log(value); // Using before declaration. So throws error
const value = 4
Using var
var is the traditional way to declare variables in Javascript. So you will find a lot of old tutorials have used it. var causes a lot of issues like hoisting issues and redeclaration is possible. But After ES6, let is the recommended way to declare variables. So you should not use var. I want to make this tutorial up-to-date and future-proof. So I won't showcase var here. As it is not used anymore. But to understand the limitations of var let's discuss the difference between var and let
The difference between var and let
| var | let |
var is global scoped variables. This means you can access them anywhere in the code. | let is blocked scope variable. This means you can only access them in the current block. |
| Redeclaration is allowed. | Redeclaration is not allowed. |
Hoisting is allowed. You can use var variables before the declaration. | Technically Hoisting is not allowed. As you can not access let variables before the declaration. |
Guidelines for naming Variables in Javascript
Variables cannot start with numbers. They must start with letters (A-Z or a-z), $ sign or underscores (_).
Avoid using reserved words while naming a variable like (let, var, const, if, for, etc)
Using Camel-Case is the preferred way of naming variables. Ex
firstName,totalPrice.Use descriptive names. Choose a variable name that describes the purpose.
Be consistent with the naming style. This will improve code readability and maintainability. Choose a convention like CamelCasing and follow it consistently.
Avoid using single-letter names. Unless they are common programming conventions. (Like
ifor index inforloop)Be cautious while naming the variables that might conflict with higher-scope variables or external-library's variables.
Conclusion
So to summarize, there are three ways to define variables in JavaScript: let, var, and const.
letis the recommended way to declare variables in modern JavaScript. It was introduced in 2015 and is supported by all modern browsers. Variables declared withlethave block scope, meaning they are limited to the block (within curly braces {}) in which they are defined. They cannot be re-declared within the same scope, but they can be updated. Variables declared withletare hoisted to the top but not initialized during hoisting.constis used to declare constant values that cannot be updated. It also has a block scope, similar tolet. Re-declaration ofconstvariables within the same scope are not allowed, but it can be done in different scopes. Variables declared withconstare hoisted to the top but not initialized during hoisting.varis the traditional way to declare variables in JavaScript but is not recommended after the introduction oflet. It has hoisting and redeclaration issues andletis now the preferred option.
The blog focuses on explaining the usage, scope, re-declaration rules, and hoisting behaviour of let and const while omitting the discussion of var providing an up-to-date and future-proof tutorial.
So, guys, That’s all you need to know about Variables. Please let me know if I miss something. I’ll be happy to learn from you. Till Then Keep Loving, Keep Coding. I’ll surely catch you up in the next article. Jai Hind, Vande Mataram 🇮🇳
Remember no teacher, no book, no video tutorial, or no blog can teach you everything. As one said Learning is Journey and Journey never ends. Just collect some data from here and there, read it, learn it, practice it, and try to apply it. Don’t feel hesitant that you can’t do that or you don’t know this concept or that concept. Remember every programmer was passed from the path on which you are walking right now. Remember Every Master was Once a Beginner. Work hard and Give your best.