Understanding JavaScript Variables

Introduction

Variables in JavaScript are like containers that store data. Think of them as labeled jars in your kitchen – some hold sugar, some hold flour, and some even hold cookies!? They make your code dynamic and enable you to store and manipulate information.

⭐ Variable Declaration, Initialization, and Naming Conventions
1️⃣ Declaration
Declaring a variable means creating it without assigning a value.
? Example:

let name; // Declaration

2️⃣ Initialization
Initializing a variable means assigning it a value for the first time.
? Example:

let name = "Richa"; // Declaration + Initialization

You can also declare first and initialize later:
? Example:

let age; // Declaration
age = 25; // Initialization
console.log(age); // Outputs: 25

3️⃣ Naming Conventions
Follow these rules to name variables effectively:

• Start with a letter, $, or _. Valid: userName, _temp, $amountInvalid: 123name, @value
• Avoid reserved keywords: Invalid: let var = 10; (cannot use var as a name)
• Use camelCase for readability: Example: firstName, totalCost
• Be descriptive: Instead of x, use userAge or productName.

? Example:

let userName = "John"; // Descriptive and camelCase
const MAX_USERS = 100; // Use uppercase for constants
let _tempValue = 42; // Valid use of underscore
let $price = 99.99; // Valid use of $

⭐Types of Variables
JavaScript offers three ways to declare variables: var, let, and const.

1️⃣ var (Old-School)
Scope: Function-scoped or globally scoped.
Usage: Best avoided in modern JavaScript due to its quirks.
The var keyword was prevalent in JavaScript before 2015. However, it is less recommended now because of its global scope and hoisting behavior.
? Example:

var stuff = "Toy";
var stuff = "Book"; // Re-declaration allowed (confusing behavior).
console.log(stuff); // Outputs: Book

With var, you can declare the same variable multiple times. However, this often leads to bugs and confusing code.
⁉️Hoisting Behavior:
Variables declared with var are "hoisted", meaning you can use them before declaring them.
? Example:

console.log(stuff); // Outputs: undefined
var stuff = "Toy";

This behavior can result in unexpected issues, so avoid relying on var for variable declarations.
?A Real-World Example

2️⃣ let (Flexible)
Scope: Block-scoped (limited to the block it’s declared in).
Usage: Use let when the variable value needs to change.
? Example:

let jar = "Tomatos";
jar = "Spices"; // Allowed
console.log(jar); // Outputs: Spices

Attempting to re-declare a let variable will throw an error:
? Example:

let jar = "Tomatos";
let jar = "Spices"; // Error: Identifier 'jar' has already been declared

Unlike var, variables declared with let are not hoisted in the same way:
? Example:

let name; // Declaration

?A Real-World Example

3️⃣ const (Immutable)
Scope: Block-scoped, like let
Usage: Use const for values that should not change after being initialized.
const is perfect for declaring constants or variables that shouldn’t be reassigned.
? Example:

let name = "Richa"; // Declaration + Initialization

You must initialize a const variable when declaring it:
? Example:

let age; // Declaration
age = 25; // Initialization
console.log(age); // Outputs: 25

?A Real-World Example

Tasks to Explore Variables

Here are some examples to test your understanding of variables:

let userName = "John"; // Descriptive and camelCase
const MAX_USERS = 100; // Use uppercase for constants
let _tempValue = 42; // Valid use of underscore
let $price = 99.99; // Valid use of $

Conclusion

Mastering variables is the first step toward writing clean and efficient JavaScript code.

• Use const whenever possible for stability.
• Use let only when the value needs to change.
• Avoid var to prevent hard-to-debug issues.

Happy coding! ?

The above is the detailed content of Understanding JavaScript Variables. For more information, please follow other related articles on the PHP Chinese website!