JavaScript is a versatile and powerful programming language that has become an essential tool for web developers. In this comprehensive guide, we'll explore a wide range of practical JavaScript examples and use cases, demonstrating how to leverage the language's features to solve real-world problems and create dynamic, interactive web applications.
Basic JavaScript Examples
Let's start with some fundamental JavaScript examples to lay the groundwork for more complex concepts.
1. Variable Declaration and Assignment
JavaScript offers multiple ways to declare variables. Here's an example showcasing the differences:
// Using 'var' (function-scoped)
var name = "John Doe";
// Using 'let' (block-scoped)
let age = 30;
// Using 'const' (block-scoped, cannot be reassigned)
const PI = 3.14159;
console.log(name); // Output: John Doe
console.log(age); // Output: 30
console.log(PI); // Output: 3.14159
In this example, we've demonstrated three ways to declare variables in JavaScript. The var keyword is function-scoped and can be redeclared, while let and const are block-scoped. const variables cannot be reassigned after initialization.
2. Working with Strings
Strings are fundamental in JavaScript. Let's look at some common string operations:
let firstName = "Alice";
let lastName = "Johnson";
// String concatenation
let fullName = firstName + " " + lastName;
console.log(fullName); // Output: Alice Johnson
// Template literals
let greeting = `Hello, ${firstName}!`;
console.log(greeting); // Output: Hello, Alice!
// String methods
console.log(fullName.toUpperCase()); // Output: ALICE JOHNSON
console.log(fullName.length); // Output: 13
console.log(fullName.split(" ")); // Output: ["Alice", "Johnson"]
This example showcases string concatenation, template literals (which allow for easy variable interpolation), and some common string methods like toUpperCase(), length, and split().
Control Flow Examples
Control flow is crucial in programming. Let's explore some JavaScript examples that demonstrate different control flow structures.
3. If-Else Statements
If-else statements allow for conditional execution of code:
function checkAge(age) {
if (age < 18) {
console.log("You are a minor.");
} else if (age >= 18 && age < 65) {
console.log("You are an adult.");
} else {
console.log("You are a senior citizen.");
}
}
checkAge(25); // Output: You are an adult.
checkAge(70); // Output: You are a senior citizen.
This function uses if-else statements to categorize a person based on their age. It demonstrates how to use multiple conditions to create different execution paths.
4. Switch Statements
Switch statements are useful when you have multiple conditions to check against a single value:
function getDayName(dayNumber) {
let dayName;
switch (dayNumber) {
case 0:
dayName = "Sunday";
break;
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
dayName = "Saturday";
break;
default:
dayName = "Invalid day number";
}
return dayName;
}
console.log(getDayName(3)); // Output: Wednesday
console.log(getDayName(7)); // Output: Invalid day number
This example uses a switch statement to convert a day number (0-6) to its corresponding day name. The default case handles any input outside the valid range.
Loop Examples
Loops are essential for iterating over data structures and performing repetitive tasks. Let's explore some common loop structures in JavaScript.
5. For Loop
The for loop is one of the most commonly used loop structures:
function sumArray(numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // Output: 15
This example demonstrates a for loop that iterates over an array of numbers and calculates their sum. The loop initializes i to 0, continues while i is less than the array length, and increments i after each iteration.
6. While Loop
While loops are useful when you don't know in advance how many times you need to iterate:
function countdownTimer(seconds) {
while (seconds > 0) {
console.log(seconds);
seconds--;
}
console.log("Time's up!");
}
countdownTimer(5);
// Output:
// 5
// 4
// 3
// 2
// 1
// Time's up!
This function uses a while loop to create a simple countdown timer. The loop continues as long as the seconds variable is greater than 0, decrementing it each time.
7. For…of Loop
The for…of loop is a convenient way to iterate over iterable objects like arrays:
function findLongestWord(sentence) {
const words = sentence.split(" ");
let longestWord = "";
for (const word of words) {
if (word.length > longestWord.length) {
longestWord = word;
}
}
return longestWord;
}
const sentence = "The quick brown fox jumps over the lazy dog";
console.log(findLongestWord(sentence)); // Output: quick
This example uses a for…of loop to iterate over the words in a sentence and find the longest word. It demonstrates how this loop type can simplify array iteration compared to traditional for loops.
Function Examples
Functions are a cornerstone of JavaScript programming. Let's explore various types of functions and their use cases.
8. Function Declaration vs. Function Expression
JavaScript allows you to create functions in multiple ways:
// Function Declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Function Expression
const farewell = function(name) {
return `Goodbye, ${name}!`;
};
// Arrow Function (ES6+)
const introduce = (name) => `Nice to meet you, ${name}!`;
console.log(greet("Alice")); // Output: Hello, Alice!
console.log(farewell("Bob")); // Output: Goodbye, Bob!
console.log(introduce("Charlie")); // Output: Nice to meet you, Charlie!
This example showcases three ways to define functions in JavaScript: function declarations, function expressions, and arrow functions. Each has its own use cases and syntax nuances.
9. Higher-Order Functions
Higher-order functions are functions that take other functions as arguments or return functions. They're a powerful feature in JavaScript:
function multiplyBy(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplyBy(2);
const triple = multiplyBy(3);
console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15
In this example, multiplyBy is a higher-order function that returns a new function. This new function multiplies its argument by the factor specified when multiplyBy was called. This demonstrates the concept of closures in JavaScript.
10. Callback Functions
Callback functions are functions passed as arguments to other functions, often used in asynchronous operations:
function fetchData(callback) {
setTimeout(() => {
const data = { id: 1, name: "John Doe" };
callback(data);
}, 2000);
}
function processData(data) {
console.log(`Received data for ${data.name} with ID ${data.id}`);
}
console.log("Fetching data...");
fetchData(processData);
console.log("Continuing execution...");
// Output:
// Fetching data...
// Continuing execution...
// (After 2 seconds) Received data for John Doe with ID 1
This example simulates an asynchronous operation using setTimeout. The fetchData function takes a callback function as an argument and calls it with the fetched data after a 2-second delay. This pattern is common in JavaScript for handling asynchronous operations.
Object-Oriented Programming Examples
JavaScript supports object-oriented programming (OOP) concepts. Let's explore some examples of how to work with objects and classes in JavaScript.
11. Object Literals
Object literals are a simple way to create objects in JavaScript:
const person = {
firstName: "Jane",
lastName: "Doe",
age: 30,
fullName: function() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.firstName); // Output: Jane
console.log(person.fullName()); // Output: Jane Doe
This example creates an object literal with properties and a method. The fullName method demonstrates how to use the this keyword to access object properties within a method.
12. Constructor Functions
Constructor functions can be used to create multiple objects with the same structure:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.getDescription = function() {
return `${this.year} ${this.make} ${this.model}`;
};
}
const car1 = new Car("Toyota", "Corolla", 2020);
const car2 = new Car("Honda", "Civic", 2019);
console.log(car1.getDescription()); // Output: 2020 Toyota Corolla
console.log(car2.getDescription()); // Output: 2019 Honda Civic
This example uses a constructor function to create Car objects. The new keyword is used to instantiate new objects from this constructor.
13. ES6 Classes
ES6 introduced a more familiar class syntax for creating objects:
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
return this.width * this.height;
}
set dimensions(dims) {
[this.width, this.height] = dims;
}
static createSquare(side) {
return new Rectangle(side, side);
}
}
const rect = new Rectangle(5, 3);
console.log(rect.area); // Output: 15
rect.dimensions = [4, 6];
console.log(rect.area); // Output: 24
const square = Rectangle.createSquare(4);
console.log(square.area); // Output: 16
This example demonstrates ES6 class syntax, including constructor, getter, setter, and static methods. The Rectangle class showcases how to create more complex object structures with built-in functionality.
Array Manipulation Examples
Arrays are a fundamental data structure in JavaScript. Let's explore some common array manipulation techniques.
14. Array Methods: map, filter, and reduce
These powerful array methods allow for efficient data transformation and aggregation:
const numbers = [1, 2, 3, 4, 5];
// map: Transform each element
const squared = numbers.map(num => num ** 2);
console.log(squared); // Output: [1, 4, 9, 16, 25]
// filter: Select elements based on a condition
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
// reduce: Aggregate elements into a single value
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15
This example demonstrates three powerful array methods:
maptransforms each element of the array.filtercreates a new array with elements that pass a test.reduceaccumulates array elements into a single value.
15. Sorting Arrays
JavaScript provides methods for sorting arrays:
// Sorting numbers
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
// Sorting strings
const fruits = ["banana", "apple", "cherry", "date"];
fruits.sort();
console.log(fruits); // Output: ["apple", "banana", "cherry", "date"]
// Sorting objects
const people = [
{ name: "John", age: 30 },
{ name: "Alice", age: 25 },
{ name: "Bob", age: 35 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
// Output: [
// { name: "Alice", age: 25 },
// { name: "John", age: 30 },
// { name: "Bob", age: 35 }
// ]
This example shows how to sort arrays of numbers, strings, and objects. The sort method can take a comparison function to define custom sorting logic.
Asynchronous JavaScript Examples
Asynchronous programming is crucial for handling time-consuming operations without blocking the main thread. Let's explore some asynchronous JavaScript patterns.
16. Promises
Promises provide a way to handle asynchronous operations:
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId === 123) {
resolve({ id: 123, name: "John Doe", email: "[email protected]" });
} else {
reject(new Error("User not found"));
}
}, 1000);
});
}
fetchUserData(123)
.then(user => console.log(`User found: ${user.name}`))
.catch(error => console.error(error.message));
fetchUserData(456)
.then(user => console.log(`User found: ${user.name}`))
.catch(error => console.error(error.message));
// Output:
// User found: John Doe
// User not found
This example demonstrates creating and using Promises. The fetchUserData function returns a Promise that resolves with user data if the user is found, or rejects with an error if not. The then and catch methods are used to handle the Promise's resolution or rejection.
17. Async/Await
Async/await is a more recent syntax for working with Promises, making asynchronous code look and behave more like synchronous code:
async function getUserDetails(userId) {
try {
const user = await fetchUserData(userId);
const posts = await fetchUserPosts(user.id);
return { user, posts };
} catch (error) {
console.error("Error fetching user details:", error);
return null;
}
}
function fetchUserPosts(userId) {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ id: 1, title: "First Post" },
{ id: 2, title: "Second Post" }
]);
}, 1000);
});
}
getUserDetails(123).then(result => {
if (result) {
console.log("User:", result.user);
console.log("Posts:", result.posts);
}
});
// Output:
// User: { id: 123, name: "John Doe", email: "[email protected]" }
// Posts: [ { id: 1, title: "First Post" }, { id: 2, title: "Second Post" } ]
This example uses async/await to handle multiple asynchronous operations in a more readable, synchronous-looking manner. The getUserDetails function fetches both user data and user posts, demonstrating how to chain asynchronous operations using await.
DOM Manipulation Examples
JavaScript is often used to manipulate the Document Object Model (DOM) in web browsers. Let's look at some common DOM manipulation techniques.
18. Selecting and Modifying Elements
// Selecting elements
const heading = document.getElementById("main-heading");
const paragraphs = document.getElementsByTagName("p");
const buttons = document.querySelectorAll(".btn");
// Modifying elements
heading.textContent = "Welcome to My Website";
paragraphs[0].innerHTML = "This is the <strong>first</strong> paragraph.";
buttons.forEach(button => {
button.style.backgroundColor = "blue";
button.style.color = "white";
});
// Creating and appending elements
const newDiv = document.createElement("div");
newDiv.className = "info-box";
newDiv.textContent = "This is a new div element.";
document.body.appendChild(newDiv);
This example demonstrates various ways to select DOM elements (getElementById, getElementsByTagName, querySelectorAll), modify their content and styles, and create and append new elements to the document.
19. Event Handling
const button = document.querySelector("#myButton");
const output = document.querySelector("#output");
button.addEventListener("click", function(event) {
output.textContent = "Button clicked!";
event.target.disabled = true;
});
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
output.textContent = "Enter key pressed!";
}
});
output.addEventListener("mouseover", function() {
this.style.color = "red";
});
output.addEventListener("mouseout", function() {
this.style.color = "black";
});
This example shows how to handle various events in JavaScript. It demonstrates click events on a button, keydown events on the document, and mouseover/mouseout events on an element. The addEventListener method is used to attach event handlers to elements.
Error Handling Examples
Proper error handling is crucial for writing robust JavaScript code. Let's explore some error handling techniques.
20. Try-Catch Blocks
function divide(a, b) {
if (b === 0) {
throw new Error("Division by zero is not allowed");
}
return a / b;
}
function performDivision(a, b) {
try {
const result = divide(a, b);
console.log(`Result: ${result}`);
} catch (error) {
console.error(`An error occurred: ${error.message}`);
} finally {
console.log("Division operation attempted");
}
}
performDivision(10, 2); // Output: Result: 5
// Division operation attempted
performDivision(10, 0); // Output: An error occurred: Division by zero is not allowed
// Division operation attempted
This example demonstrates the use of try-catch blocks for error handling. The divide function throws an error if division by zero is attempted. The performDivision function uses a try-catch block to handle this error gracefully. The finally block is executed regardless of whether an error occurred or not.
Conclusion
These JavaScript examples cover a wide range of concepts and use cases, from basic syntax to advanced topics like asynchronous programming and DOM manipulation. By understanding and applying these examples, you'll be well-equipped to tackle various programming challenges and build robust web applications.
Remember, the key to mastering JavaScript is practice. Experiment with these examples, modify them, and create your own variations to deepen your understanding of the language. Happy coding!
