🚀 Day 6: JavaScript Arrays - Common Methods & Their Use Cases

Arrays are one of the most fundamental and powerful data structures in JavaScript. They allow you to store multiple values in a single variable and come with built-in methods to manipulate data efficiently.

In this post, we’ll dive deep into some commonly used JavaScript array methods, understand how they work, and explore real-world use cases with examples. Let’s get started! 🔥

***************************************************************************

📌 1️⃣ push() — Add Elements to the End of an Array

🔹 Definition:

push() adds one or more elements to the end of an array and returns the new length of the array.

🔹 How It Works:

let fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Orange"]

🔹 Use Case:

✅ Adding items to a cart in an e-commerce app.

***************************************************************************

📌 2️⃣ pop() — Remove the Last Element from an Array

🔹 Definition:

pop() removes the last element from an array and returns it.

🔹 How It Works:

let numbers = [1, 2, 3, 4];
numbers.pop();
console.log(numbers); // [1, 2, 3]

🔹 Use Case:

✅ Removing the last added product in a shopping cart.

**************************************************************************

📌 3️⃣ shift() — Remove the First Element from an Array

🔹 Definition:

shift() removes the first element from an array and returns it.

🔹 How It Works:

let queue = ["Alice", "Bob", "Charlie"];
queue.shift();
console.log(queue); // ["Bob", "Charlie"]

🔹 Use Case:

✅ Implementing a queue system where the first person in line is served first.

**************************************************************************

📌 4️⃣ unshift() — Add Elements to the Beginning of an Array

🔹 Definition:

unshift() adds one or more elements to the beginning of an array and returns the new length.

🔹 How It Works:

let colors = ["Blue", "Green"];
colors.unshift("Red");
console.log(colors); // ["Red", "Blue", "Green"]

🔹 Use Case:

✅ Adding high-priority tasks to the start of a to-do list.

**************************************************************************

📌 5️⃣ slice() — Extract a Portion of an Array

🔹 Definition:

slice(start, end) returns a shallow copy of a portion of an array without modifying the original array.

🔹 How It Works:

let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // [2, 3, 4]

🔹 Use Case:

✅ Fetching the top 3 trending news articles from an array of news.

**************************************************************************

📌 6️⃣ splice() — Modify an Array by Adding or Removing Elements

🔹 Definition:

splice(start, deleteCount, item1, item2, ...) removes, replaces, or adds elements to an array.

🔹 How It Works:

let languages = ["JavaScript", "Python", "C++"];
languages.splice(1, 1, "Java");
console.log(languages); // ["JavaScript", "Java", "C++"]

🔹 Use Case:

✅ Replacing a discontinued product in an inventory list.

**************************************************************************

📌 7️⃣ forEach() — Iterate Over an Array

🔹 Definition:

forEach(callback) executes a function once for each array element.

🔹 How It Works:

let items = ["Pen", "Notebook", "Eraser"];
items.forEach((item, index) => console.log(`${index + 1}: ${item}`));

🔹 Use Case:

✅ Displaying a list of products on a webpage.

*************************************************************************

📌 8️⃣ map() — Transform an Array

🔹 Definition:

map(callback) creates a new array by applying a function to each element.

🔹 How It Works:

let prices = [100, 200, 300];
let discountedPrices = prices.map(price => price * 0.9);
console.log(discountedPrices); // [90, 180, 270]

🔹 Use Case:

✅ Applying discounts to all products in an e-commerce app.

************************************************************************

📌 9️⃣ filter() — Filter an Array Based on a Condition

🔹 Definition:

filter(callback) returns a new array containing only the elements that satisfy the condition.

🔹 How It Works:

let numbers = [10, 25, 30, 45];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [10, 30]

🔹 Use Case:

✅ Filtering active users from a list of all users.

*************************************************************************

🔟 reduce() — Compute a Single Value from an Array

🔹 Definition:

reduce(callback, initialValue) applies a function to reduce the array to a single value.

🔹 How It Works:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

🔹 Use Case:

✅ Calculating the total price of items in a shopping cart.

************************************************************************

🎯 Conclusion

Mastering these array methods will help you write cleaner, more efficient JavaScript code. Whether you’re manipulating data, filtering results, or transforming arrays, these methods will be your best friends!

💬 Which array method do you use the most? Let me know in the comments! 🚀

*************************************************************************