Variables in JavaScript are containers for storing data values. They are essential for any programming language as they allow you to store, modify, and retrieve data. In JavaScript, you can declare variables using var, let, and const.
Declaring Variables
1. Using var
The var keyword is used to declare a variable. Variables declared with var are function-scoped or globally-scoped if declared outside a function. They are also subject to hoisting, meaning the declaration is moved to the top of the scope, but the assignment is not.
var x = 5;
console.log(x); // Output: 5
2. Using let
The let keyword is used to declare a block-scoped variable, meaning it is only accessible within the block where it is declared. let is also hoisted, but it is not initialized until the code execution reaches the declaration.
let y = 10;
if (true) {
let y = 20;
console.log(y); // Output: 20
}
console.log(y); // Output: 10
3. Using const
The const keyword is used to declare a block-scoped variable whose value cannot be reassigned. However, if the variable is an object or an array, the properties or elements can still be modified.
const z = 15;
console.log(z); // Output: 15
const obj = { name: “Alice” };
obj.name = “Bob”; // This is allowed
console.log(obj.name); // Output: Bob
// z = 20; // This will throw an error
Variable Scope
- Global Scope: Variables declared outside any function are in the global scope. They can be accessed from anywhere in the code.
var globalVar = “I’m global”;
function test() {
console.log(globalVar); // Output: I’m global
}
test();
console.log(globalVar); // Output: I’m global
- Function Scope: Variables declared within a function are in the function scope. They can only be accessed within that function.
function test() {
var functionVar = “I’m local”;
console.log(functionVar); // Output: I’m local
}
test();
// console.log(functionVar); // This will throw an error
- Block Scope: Variables declared with let and const inside a block (e.g., inside an if statement or a loop) are in the block scope.
if (true) {
let blockVar = “I’m in a block”;
console.log(blockVar); // Output: I’m in a block
}
// console.log(blockVar); // This will throw an error
Variable Hoisting
Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope. However, only the declarations are hoisted, not the initializations.
console.log(a); // Output: undefined
var a = 5;
console.log(a); // Output: 5
// Using let or const does not hoist the initialization
// console.log(b); // This will throw an error
let b = 10;
console.log(b); // Output: 10
Variable Naming Rules
- Variables must start with a letter, underscore (_), or dollar sign ($).
- Subsequent characters can include letters, digits, underscores, or dollar signs.
- Variable names are case-sensitive (myVar and myvar are different variables).
- Reserved keywords cannot be used as variable names (let, function, return, etc.).
let _name = “John”;
let $age = 30;
let myVar = “Hello”;
// let let = 5; // This will throw an error
Example: Using Variables
// Using var
var x = 5;
console.log(x); // Output: 5
// Using let
let y = 10;
if (true) {
let y = 20;
console.log(y); // Output: 20
}
console.log(y); // Output: 10
// Using const
const z = 15;
console.log(z); // Output: 15
const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]
In summary, variables in JavaScript are used to store data and come in three types: var, let, and const. Understanding their scope, hoisting behavior, and proper naming conventions is crucial for writing effective and error-free JavaScript code.