Scribd
Upload
0 views6 pages

Core Array Methods

The document outlines core array methods in JavaScript, categorized into iteration, searching, modification, copy/extract, and ES6+ features. It also provides real-time usage examples of these methods in React applications, demonstrating how they can be applied to manage and manipulate data effectively. Additionally, it includes syntax and examples for key methods like map, filter, reduce, and find.

Uploaded by

Surya prakash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views6 pages

Core Array Methods

The document outlines core array methods in JavaScript, categorized into iteration, searching, modification, copy/extract, and ES6+ features. It also provides real-time usage examples of these methods in React applications, demonstrating how they can be applied to manage and manipulate data effectively. Additionally, it includes syntax and examples for key methods like map, filter, reduce, and find.

Uploaded by

Surya prakash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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]

You might also like