Core Array Methods:
Category Methods to Teach
Iteration forEach(), map(), filter(), reduce()
Searching find(), findIndex(), includes(), some(), every()
Modification push(), pop(), shift(), unshift(), splice()
Copy/Extract slice(), concat(), join(), flat(), flatMap()
ES6+ Spread (...), Destructuring, Array.from(),
Array.of()
🧠 Real-Time Usage in React:
Array Method React Use Case Example
map() Rendering UI lists (.map(item => <div>
{item}</div>))
filter() Filter search results, e.g., live search bar
find() Find user by ID or email from state
reduce() Summing cart total, generating statistics
some() / every() Form validation logic
push() / splice() Managing array state updates (with care!)
flat() Flattening nested API data
Array.from() Convert NodeList or Set to Array
🏁 Start with Simple Example Arrays:
const students = [
{ id: 1, name: "Arun", marks: 85 },
{ id: 2, name: "Kavi", marks: 55 },
{ id: 3, name: "Sara", marks: 96 },
{ id: 4, name: "Mohan", marks: 45 },
];
map()
map() is a JavaScript array method used to transform each item in an array and return a new
array with the same length.
Syntax:
array.map((currentValue, index, array) => {
// return new value for each element
});
const names = students.map(s => s.name);
console.log(names);
📍In React:
{students.map(s => <p key={s.id}>{s.name}</p>)}
forEach() is a method used to run a function for each item in an array. It is mainly used to loop
through arrays and perform some action (like console.log, update, etc.).
array.forEach((value, index, array) => {
// do something
});
const numbers = [1, 2, 3, 4];
numbers.forEach((num) => {
console.log(num * 2);
});
const arr = [10, 20, 30];
// ❌ Wrong: Trying to assign forEach output
const result1 = arr.forEach(num => num * 2);
console.log(result1); // undefined
// ✅ Correct: Use map to get return values
const result2 = arr.map(num => num * 2);
console.log(result2); // [20, 40, 60]
What is filter()?
filter() is a method that lets you pick specific items from an array based on a condition.
It returns a new array containing only the items that satisfy the condition.
Syntax:
array.filter((item, index, array) => {
return condition;
});
const numbers = [10, 25, 30, 40, 50];
const filtered = numbers.filter(n => n >= 30);
console.log(filtered); // [30, 40, 50]
const filteredStudents = students.filter(s =>
s.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<ul>
{filteredStudents.map(s => <li key={s.name}>{s.name}</li>)}
</ul>
);
In React:
const selectedFruits = fruits.filter(f => f.selected === true);
return (
<ul>
{selectedFruits.map(fruit => <li>{fruit.name}</li>)}
</ul>
);
What is reduce()?
reduce() is used to take all the items in an array and combine them into a single value (like
total, sum, or object).
Syntax:
array.reduce((accumulator, currentValue) => {
return updatedAccumulator;
}, initialValue);
const arr = [10, 20, 30];
const total = arr.reduce((acc, val) => {
return acc + val;
}, 0);
console.log(total); // 60
First cycle: acc = 0, val = 10 → return 10
Second: acc = 10, val = 20 → return 30
Third: acc = 30, val = 30 → return 60
👉 Final answer = 60
const users = [
{ id: 1, name: "Arun" },
{ id: 2, name: "Bala" }
];
const userMap = users.reduce((acc, user) => {
acc[user.id] = user.name;
return acc;
}, {});
console.log(userMap);
// { 1: "Arun", 2: "Bala" }
find() – Get the first item that matches a condition:
find() is used to get the first element in the array that satisfies a condition.
Syntax:
array.find((item) => condition)
const students = [
{ name: "Arun", marks: 65 },
{ name: "Kavi", marks: 85 },
{ name: "Meena", marks: 90 }
];
const topper = students.find(s => s.marks > 80);
console.log(topper);
// { name: "Kavi", marks: 85 } – Only first match
const arr = [10, 20, 30, 40];
// ✅ find
const val1 = arr.find(num => num > 25); // 30
// ✅ filter
const val2 = arr.filter(num => num > 25); // [30, 40]
