In JavaScript, variables are containers that store data values. They allow you to reuse and manipulate data throughout your code. A variable essentially acts as a named placeholder for values in your program.
For example, if you need to store a user’s age, you can declare a variable to hold that value.
Why Are Variables Important?
- Dynamic Programming: Variables allow you to store and manipulate data dynamically.
- Code Reusability: Instead of hardcoding values, you can use variables for better flexibility.
- Data Management: Variables help manage data efficiently, especially in complex applications.
Declaring Variables in JavaScript
JavaScript provides three main keywords for declaring variables: var, let and const. Each serves a specific purpose.
1. Using var
The var keyword was the original way to declare variables in JavaScript. It is now considered outdated and is generally avoided in modern code due to its lack of block scope.
Syntax:
var variableName = value;
Example:
var name = "John"; // Declares a variable named 'name' and assigns it the value "John"
console.log(name); // Output: John
2. Using let
Introduced in ES6 (ECMAScript 2015), let is the preferred way to declare variables that may change their value.
Syntax:
let variableName = value;
Example:
let age = 25; // Declares a variable named 'age'
age = 30; // Updates the value of 'age'
console.log(age); // Output: 30
3. Using const
The const keyword is used to declare variables that cannot be reassigned. Once assigned a value, it remains constant.
Syntax:
const variableName = value;
Example:
const pi = 3.14; // Declares a constant named 'pi'
console.log(pi); // Output: 3.14
// pi = 3.15; // Error: Assignment to constant variable
Rules for Naming Variables
When naming variables, follow these rules to avoid errors:
Start with a Letter or _ or $: Variable names cannot start with a number.
let _score = 100; // Valid
let $price = 50; // Valid
let 9lives = "cat"; // Invalid
Case Sensitive: JavaScript is case-sensitive, so name and Name are different variables.
let name = "Alice";
let Name = "Bob";
console.log(name); // Alice
console.log(Name); // Bob
Avoid Reserved Words: You cannot use JavaScript reserved keywords as variable names, such as class, return or function.
Variable Scope in JavaScript
The scope of a variable defines where it can be accessed in the code. JavaScript has three types of scopes:
1. Global Scope
Variables declared outside of any function are globally scoped. They can be accessed anywhere in the code.
Example:
let globalVariable = "I am global";
function displayGlobal() {
console.log(globalVariable); // Accessible here
}
displayGlobal();
2. Local Scope
Variables declared inside a function are locally scoped. They can only be accessed within that function.
Example:
function localScope() {
let localVariable = "I am local";
console.log(localVariable);
}
// console.log(localVariable); // Error: localVariable is not defined
3. Block Scope
Variables declared with let or const inside a block ({}) are only accessible within that block.
Example:
{
let blockVariable = "I am block-scoped";
console.log(blockVariable);
}
// console.log(blockVariable); // Error: blockVariable is not defined
Hoisting in JavaScript
JavaScript moves variable declarations to the top of their scope during the compilation phase. This is called hoisting. However, only the declaration is hoisted, not the initialization.
Example:
console.log(a); // Output: undefined
var a = 10;
// Using 'let' or 'const' avoids hoisting-related issues
// console.log(b); // Error: Cannot access 'b' before initialization
let b = 20;
Best Practices for Using Variables
Use const by Default
Only use let if the variable needs to change.
Choose Descriptive Names
Use meaningful names that clearly indicate the purpose of the variable.
let priceBeforeTax = 100;
let taxRate = 0.18;
Avoid Using var
Stick to let and const for better scoping and fewer errors.
Declare Variables at the Top of Their Scope
This improves readability and helps avoid hoisting issues.
Examples of Variable Usage
Example 1: Calculating Total Price
const price = 200;
const tax = 0.18;
const totalPrice = price + (price * tax);
console.log("Total Price:", totalPrice); // Output: Total Price: 236
Example 2: Updating a Variable
let score = 50;
score += 10; // Increment score by 10
console.log("Updated Score:", score); // Output: Updated Score: 60
Example 3: Using const for Constants
const gravity = 9.8; // Earth's gravitational constant
console.log("Gravity:", gravity); // Output: Gravity: 9.8