Variables in JavaScript are used to store and manage data. They act as containers that hold values that can be changed or kept constant throughout a program. Understanding how to declare and use variables properly is essential for writing clean and efficient JavaScript code.

What is a Variable in JavaScript?

A variable is a named storage for data. In JavaScript, variables can hold various types of values, including numbers, strings, objects, and more.

Declaring Variables in JavaScript

JavaScript provides three ways to declare variables:

1. var (Old and Avoided)

• Used in older JavaScript versions.

• Has function scope (accessible within the function it is declared in).

• Allows re-declaration of the same variable.

• Can be problematic due to hoisting.

Example:

var message = "Hello";
var message = "Hi"; // Allowed but not recommended
console.log(message); // Output: Hi

2. let (Modern and Preferred)

• Introduced in ES6 (2015).

• Has block scope (only accessible within the block {} it is declared in).

• Cannot be re-declared within the same scope.

Example:

let name = "Alice";
name = "Bob"; // Allowed
console.log(name); // Output: Bob

3. const (For Constants)

• Also introduced in ES6.

• Used for values that should not change.

• Must be assigned a value during declaration.

Example:

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

Variable Naming Rules

JavaScript has specific rules for naming variables:

• Must start with a letter, _, or $.

• Cannot start with a number.

• Cannot be a reserved keyword (e.g., let, return, class).

• Case-sensitive (userName and username are different).

Example:

let userAge = 25; // Valid
let _score = 100; // Valid
let $amount = 500; // Valid
// let 1stName = "John"; // Invalid (cannot start with a number)

Variable Scope in JavaScript

Scope determines where a variable can be accessed.

1. Global Scope

A variable declared outside any function is global and can be accessed anywhere.

let siteName = "Codercrafter";
console.log(siteName); // Accessible globally

2. Function Scope

Variables declared with var inside a function are limited to that function.

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

3. Block Scope

Variables declared with let or const inside {} cannot be accessed outside the block.

{
  let localVar = "Inside block";
  console.log(localVar); // Works
}
// console.log(localVar); // Error: Not accessible outside block

Hoisting in JavaScript

Hoisting is JavaScript’s behavior of moving variable declarations to the top of their scope before code execution.

Example:

console.log(greetMessage); // Output: undefined
var greetMessage = "Hello";

var is hoisted, but its value remains undefined until assigned.

With let and const, hoisting occurs, but accessing them before declaration throws an error:

console.log(name); // ReferenceError
let name = "Alice";

Best Practices for Using Variables

1. Use const by default, only use let when reassignment is needed.

2. Avoid var due to scoping issues.

3. Use meaningful names for readability.

4. Follow camelCase naming convention (userName, totalAmount).

Conclusion

Understanding JavaScript variables is crucial for writing clean and efficient code. Use let for values that change, const for constants, and avoid var whenever possible. Following best practices ensures better readability and maintainability.