# 🔍 From `forEach` to `filter`: Extracting Meaning from JavaScript Arrays

When working with arrays in JavaScript, you're often filtering, looping, or performing operations on each element. But when should you use forEach() and when should you use filter()?

Let’s walk through practical examples to understand their differences, how they behave, and what they're best at.

---

🔁 Looping with forEach()

const coding = ["js", "ruby", "java", "python", "cpp"];

coding.forEach((item) => {
    console.log(item);
});

🧾 Output:

js
ruby
java
python
cpp

forEach() simply loops through each element in the array and executes a function.
But here's a catch: It doesn't return anything.

---

🤔 What if you try to return a value?

const values = coding.forEach((item) => {
    return item;
});
console.log(values); // Output: undefined

❌ Even with a return inside, forEach() does not return a new array.
It's useful only for side effects, like printing, updating UI, or pushing into another array.

---

🔎 Enter filter() – the Selector

What if you want to extract a subset of an array? That’s where filter() shines.

const myNums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numbersGreaterThanFour = myNums.filter((num) => num > 4);
console.log(numbersGreaterThanFour);

🧾 Output:

[5, 6, 7, 8, 9, 10]

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

---

⛓️ Block Syntax (with return)

const numbers = myNums.filter((val) => {
    return val > 4;
});
console.log(numbers);

Same output, just written with explicit return.

---

🆚 forEach vs filter in Practice

Let’s try doing what filter does, but using forEach:

const newNums = [];

myNums.forEach((num) => {
    if (num > 4) {
        newNums.push(num);
    }
});
console.log(newNums);

🧾 Output:

[5, 6, 7, 8, 9, 10]

🔧 Works fine, but notice how you have to manually manage the new array.
filter() makes this cleaner and declarative.

---

📚 Real World Example: Filtering Books by Genre

const books = [
    { title: 'Book One', genre: 'Fiction', publish: 1981, edition: 2004 },
    { title: 'Book Two', genre: 'Non-Fiction', publish: 1992, edition: 2008 },
    { title: 'Book Three', genre: 'History', publish: 1999, edition: 2007 },
    { title: 'Book Four', genre: 'Non-Fiction', publish: 1989, edition: 2010 },
    { title: 'Book Five', genre: 'Science', publish: 2009, edition: 2014 },
    { title: 'Book Six', genre: 'Fiction', publish: 1987, edition: 2010 },
    { title: 'Book Seven', genre: 'History', publish: 1986, edition: 1996 },
    { title: 'Book Eight', genre: 'Science', publish: 2011, edition: 2016 },
    { title: 'Book Nine', genre: 'Non-Fiction', publish: 1981, edition: 1989 },
];

🔍 Filter Fiction Books Only

const fictionBooks = books.filter((book) => book.genre === "Fiction");

fictionBooks.forEach(book => console.log(book));

🧾 Output:

{ title: 'Book One', genre: 'Fiction', ... }
{ title: 'Book Six', genre: 'Fiction', ... }

📚 filter() is amazing when you're querying data – like filtering by genre, year, or other criteria.

---

🧠 Final Thoughts

Function	Purpose	Returns a New Array?	Use When...
forEach()	Executes a function for each item	❌ No	You're just doing something with each item
filter()	Filters items based on a condition	✅ Yes	You need to extract a subset of data