Understanding map(), filter(), Set, and the Spread Operator in JavaScript

#programming #javascript #webdev #beginners

When working with JavaScript (ES6+) (especially in frameworks like React), we often use four powerful features: map(), filter(), Set, and the spread operator (...).
Let's break these features with some simple examples and finally a practical example of combining all of these together.

1. The `map()` Method

The .map() method is used to transform each element of an array.
It returns a new array of the same length.
.map() does not change the original array.

Syntax:

array.map(function(element, index, array) {
  // return the new value for this element
});

Explanation of parameters:

element → the current item in the array
index (optional) → the position of the element (0, 1, 2, …)
array (optional) → the whole array being mapped

Example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

Explanation:

The condition is given inside the function (num => num * 2).
So .map() will go through each element in the array numbers and multiply it by 2. Then it will create a new array with the result value.

👉 In React, map() is often used to render lists:

const fruits = ['Apple', 'Banana', 'Mango'];

<ul>
  {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
</ul>

2. The `filter()` Method

The .filter() method is used to keep only the elements that match a condition.
It also returns a new array, without modifying the original.
It does not execute the function for empty elements.

Syntax:

array.filter(function(element, index, array) {
  // return true to keep the element
  // return false to remove it
});

Explanation of parameters:

Same as .map() method.

Example:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

Explanation:

The condition given inside the function (num => num % 2 === 0) simply means that only even numbers should be returned.
So .filter() will go through each element in the array numbers and return a new array keeping only the even number elements.

3. The Set Object

A Set stores unique values only (no duplicates).
It’s useful when you want to remove repeated items.

Example:

const categories = ['Fast Food', 'Healthy', 'Fast Food', 'Dessert'];
const uniqueCategories = new Set(categories);

console.log(uniqueCategories); 
// Set { 'Fast Food', 'Healthy', 'Dessert' }

If you need it back as an array:
const uniqueArray = [...uniqueCategories];

4. The Spread Operator (...)

The spread operator unpacks values from arrays, objects, or iterables.
It’s useful for copying, merging, or expanding data.

Example with Arrays:

const nums1 = [1, 2, 3];
const nums2 = [4, 5];
const combined = [...nums1, ...nums2];

console.log(combined); // [1, 2, 3, 4, 5]

Example with Objects:

const user = { name: 'Alice', age: 25 };
const updated = { ...user, age: 26 };

console.log(updated); // { name: 'Alice', age: 26 }

Explanation:

The spread operator copies all the properties from the user object into the new object.
After spreading, we also specify age: 26, which overrides the old age value (25) with the new one (26).
As a result, the updated object contains the same name as before ("Alice") but with the updated age.
Importantly, the original user object remains unchanged — we just created a new object with modified data.

Combining It All Together

const availableCategories = [
  'All',
  ...new Set(
    data.foods
      .filter(food => food.isAvailable)
      .map(food => food.category)
  )
];

//Output : ['All', 'Fast Food', 'Healthy', 'Dessert']

Step-by-step explanation:

Assume this is an array of food objects, e.g.

[
  { name: 'Pizza', category: 'Fast Food', isAvailable: true },
  { name: 'Salad', category: 'Healthy', isAvailable: false },
  { name: 'Burger', category: 'Fast Food', isAvailable: true }
]

filter(food => food.isAvailable) → keep only foods that are available.

[
  { name: 'Pizza', category: 'Fast Food', isAvailable: true },
  { name: 'Burger', category: 'Fast Food', isAvailable: true }
]

map(food => food.category) → get their categories: ['Fast Food', 'Fast Food']
new Set(...) → remove duplicates : Set { 'Fast Food' }
... spread operator → convert back into an array: ['Fast Food']
Add 'All' at the beginning for a universal option: ['All', 'Fast Food']

Together, these features make code cleaner, shorter, and easier to understand. Whether you’re building simple scripts or working in frameworks like React, mastering these concepts will give you a strong foundation for handling data in JavaScript.