Day 1:Mastering Variables in JavaScript: Understanding `const`, `let`, and `var` with Real-World Examples.

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 = "[e-mail]";
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 const variable, 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 let variable 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 = "[e-mail]";
var accountEmail = "[e-mail]"; // 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 var variable.
• Function scope: Unlike let and const, which are block-scoped, var is 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 const when you want a variable to remain constant.
• Use let when you expect the variable’s value to change.
• Avoid var unless 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!!