Variables-in-JS.md

What are Variables in JavaScript, and How Do You Declare Them ?

---

What are Variables in JavaScript?

In JavaScript, a variable is a named container for storing data values. Variables allow you to store, manipulate, and reuse data throughout your program. Think of them as labels that point to specific data in memory.

Why Use Variables?

• To store values that can be reused or manipulated.
• To make code dynamic and interactive.
• To make programs easier to read and maintain.

---

Declaring Variables in JavaScript

Variables in JavaScript can be declared using three keywords:

1. var (older, less commonly used in modern JavaScript).
2. let (block-scoped, introduced in ES6).
3. const (block-scoped, used for constant values, introduced in ES6).

1. var Declaration

• Scope: Function-scoped.
• Redeclaration: Allowed within the same scope.
• Hoisting: Variables declared with var are hoisted and initialized with undefined.

Example:

var name = "John";
console.log(name); // Output: John
name = "Doe";
console.log(name); // Output: Doe

2. let Declaration

• Scope: Block-scoped.
• Redeclaration: Not allowed within the same scope.
• Hoisting: Hoisted but not initialized; accessing before declaration throws an error.

Example:

let age = 25;
console.log(age); // Output: 25
age = 30; 
console.log(age); // Output: 30

3. const Declaration

• Scope: Block-scoped.
• Redeclaration: Not allowed.
• Reassignment: Not allowed (must be initialized at the time of declaration).

Example:

const pi = 3.14;
console.log(pi); // Output: 3.14
// pi = 3.14159; // Error: Assignment to constant variable

---

Rules for Variable Naming

1. Must begin with a letter, _, or $.
2. Cannot start with a number.
3. Case-sensitive (myVar and myvar are different).
4. Reserved keywords (e.g., class, return) cannot be used as variable names.

Valid Examples:

let firstName = "Alice";
let $amount = 1000;
let _index = 10;

Invalid Examples:

// let 1stName = "Alice"; // Error: Invalid variable name
// let return = 5;        // Error: Reserved keyword

---

Variable Initialization

Variables can be initialized at the time of declaration or later:

let color; // Declaration
color = "blue"; // Initialization
console.log(color); // Output: blue

---

Scope of Variables

1. Global Scope:

   • Variables declared outside any function are global.
   • Accessible from anywhere in the program.

   var globalVar = "I am global";
   console.log(globalVar); // Output: I am global

2. Function Scope:

   • Variables declared with var inside a function are local to that function.

   function greet() {
       var message = "Hello!";
       console.log(message); // Output: Hello!
   }
   // console.log(message); // Error: message is not defined

3. Block Scope:

   • Variables declared with let or const are restricted to the block they are defined in.

   {
       let blockVar = "I am block-scoped";
       console.log(blockVar); // Output: I am block-scoped
   }
   // console.log(blockVar); // Error: blockVar is not defined

---

Hoisting

Hoisting is JavaScript's behavior of moving variable declarations to the top of their scope during execution. Only declarations are hoisted, not initializations.

Example with var:

console.log(a); // Output: undefined
var a = 5;

Example with let or const:

// console.log(b); // Error: Cannot access 'b' before initialization
let b = 10;

---

Best Practices for Declaring Variables

1. Use let and const instead of var in modern JavaScript.
2. Use const by default for values that won’t change.
3. Use let when reassignment is required.
4. Use meaningful variable names to improve code readability.

---

Examples

Example 1: Using let for Dynamic Values

let count = 0;
for (let i = 0; i < 5; i++) {
    count += i;
}
console.log(count); // Output: 10

Example 2: Using const for Constants

const TAX_RATE = 0.1;
let price = 100;
let tax = price * TAX_RATE;
console.log(tax); // Output: 10

---

Conclusion

Variables are a fundamental concept in JavaScript that enable developers to store and manipulate data dynamically. Choosing the right keyword (var, let, const) and understanding their scopes and behaviors ensures better, more maintainable, and bug-free code.