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

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.