This content originally appeared on DEV Community and was authored by Aman kumar
When you're working with JavaScript, one of the first things you'll learn is how to declare variables. Variables are like containers that store information, such as numbers, text, or even complex data. In JavaScript, there are three ways to declare variables: const, let, and var. Each of these has its own rules and best practices, which can be a bit confusing at first. In this post, we'll break it down with simple examples to help you understand when and how to use each one.
Example Code
Let's start by looking at a simple piece of code:
`javascript
const accountId = 14423;
var accountEmail = "aman@google.com";
let accountPassword = "12345";
accountCity = "jamshedpur";
let accountRoll;
// accountId = 13242; // Not allowed - will throw an error
console.table([accountEmail, accountId, accountRoll, accountPassword]);
`
Understanding const
The first variable we declared is accountId using const. The const keyword is used when you want to declare a variable whose value should never change. Once you assign a value to a const variable, you cannot reassign it to something else. For example:
const accountId = 14423;
accountId = 13242; // This will throw an error!
In the example above, trying to reassign accountId will cause an error because const variables are immutable after their initial assignment.
Key Points about const:
-
Cannot be reassigned: Once a value is assigned to a
constvariable, it can't be changed. -
Block scope: The variable is only accessible within the block it is declared in (e.g., within
{}).
Understanding let
Next, we have accountPassword declared using let. The let keyword is used when you want to declare a variable whose value might change later on. Unlike const, you can reassign a let variable:
let accountPassword = "12345";
accountPassword = "67890"; // This is perfectly fine!
However, like const, let is also block-scoped, meaning it can only be accessed within the block it was declared in.
Key Points about let:
-
Can be reassigned: You can change the value of a
letvariable after it's been assigned. - Block scope: The variable is only accessible within the block it is declared in.
Understanding var
Finally, let's talk about var, which is how we declared accountEmail. var is the old way of declaring variables in JavaScript. It has some key differences compared to let and const:
var accountEmail = "aman@google.com";
var accountEmail = "john@google.com"; // This is allowed!
As you can see, unlike let and const, you can redeclare a var variable in the same scope without any errors. This can sometimes lead to bugs and unexpected behavior, which is why many developers prefer let and const.
Key Points about var:
-
Can be reassigned and redeclared: You can change the value and even redeclare a
varvariable. -
Function scope: Unlike
letandconst, which are block-scoped,varis function-scoped. This means it is accessible within the function it was declared in, but not limited to the block.
A Quick Comparison
Here’s a quick comparison to summarize the differences:
{
var x = 10;
var x = 20; // Allowed, no error
let y = 10;
let y = 20; // Not allowed, will throw a syntax error
}
Practical Example: Using console.table
At the end of our code, we use console.table to display the values of our variables in a neat table format:
console.table([accountEmail, accountId, accountRoll, accountPassword]);
This outputs a table with the current values of accountEmail, accountId, accountRoll, and accountPassword. It’s a handy way to visualize your variables when debugging or just checking your work.
Conclusion
Understanding the differences between const, let, and var is crucial for writing clean, bug-free JavaScript code. Here’s a quick recap:
- Use
constwhen you want a variable to remain constant. - Use
letwhen you expect the variable’s value to change. - Avoid
varunless you have a specific reason to use it (due to its function-scoped behavior).
By mastering these three keywords, you’ll be on your way to writing more reliable and maintainable JavaScript code. For more detailed information, you can always refer to the MDN documentation.
Happy coding and See you in the next one!!
This content originally appeared on DEV Community and was authored by Aman kumar
Aman kumar | Sciencx (2024-08-30T18:07:06+00:00) Day 1-Mastering Variables in JavaScript: Understanding `const`, `let`, and `var` with Real-World Examples.. Retrieved from https://www.scien.cx/2024/08/30/day-1-mastering-variables-in-javascript-understanding-const-let-and-var-with-real-world-examples/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.