The Goal is to Share: Some important methods of array that are most used in Full Stack Development.
Iām Ashish Shah, writing this blog on āWed 05 Fab 2025 at 21:42:59 PM ISTā, because I think these methods should be known by each developer. Iām listening to the song Synergy by Tash Sultana
1. Array.filter():
Suppose, youāve database of Aadhar Card of Indian citizens, and Modi Government ask you to filter out those people who are Eligible for voting so that they can give freebies, How can you do that? using arrayās filter() because database (might) contain peopleās details in the form of array like this: citizens = [ { name: āAshishā, age: 21, city: āBangaloreā}, ā¦ ]
Syntax: arrayName.filter(callbackfun, argThis(optional)) and it will return an array that passes the certain condition implemented by callbackfun. Letās see example and youāll understand better:
const citizens = [
{ name: "Ashish", age: 21, city: "Bangalore" },
{ name: "Priya", age: 9, city: "Mumbai" },
{ name: "Ravi", age: 18, city: "Delhi" },
{ name: "Neha", age: 16, city: "Chennai" },
{ name: "Sandeep", age: 23, city: "Hyderabad" }
];
let electorate = citizens.filter((citizen) => citizen.age >= 18)
console.log(electorate);
[
{ name: 'Ashish', age: 21, city: 'Bangalore' },
{ name: 'Ravi', age: 18, city: 'Delhi' },
{ name: 'Sandeep', age: 23, city: 'Hyderabad' }
]
(citizen) => citizen.age >= 18 this part is function (to be precise arrow function, you can directly pass name of the function there as well.
In brief: you can filter out elements based on certain conditions, and it will give you array itself that passes the condition or gives Truthy values.
2. Array.map() :
Lets say Modi Government wants to give ā¹1000 to each woman as freebies in order to win 2029 election. How can they do it? They can use map() function on the array of citizen data, do some manipulation to the data, and returns the array of details of Indian Citizens with updated bank balance and win hell the election.
Syntax: array.map(callbackFun, thisArg(optional)); and it will return new created array, that will hold the updated value only not all elements. (Hintš”: if you want to hold all value use spread operator first.)
const womenCitizens = [
{ name: "Priya", state: "Maharashtra", balance: 500, age: 30 },
{ name: "Neha", state: "Tamil Nadu", balance: 1200, age: 25 },
{ name: "Sita", state: "Uttar Pradesh", balance: 700, age: 35 },
{ name: "Anjali", state: "Karnataka", balance: 800, age: 28 },
{ name: "Rekha", state: "West Bengal", balance: 600, age: 40 }
];
womenCitizens.map((women) => women.balance += 1000)
console.log(womenCitizens);
console.log(womenCitizens.map((women) => women.balance += 1000))
In brief: want to do some manipulation on the existing array, use map() function of array.
3. Array.forEach():
Now, Modi Government decides to meet each one of them who they gave ā¹1000 (in programming print or visit each element of array) so that they can whisper āVote for Modiā nahi to mai paisa wapas le lunga. (otherwise Iāll get back ā¹1000 if you donāt vote for Modi).
Syntax: array.forEach(callbackFun, thisArg(optional)) callback function executes for each element of array once, and inside the callback function you can do whatever you want to do with the element of array. And it returns nothing or undefined
const womenCitizens = [
{ name: 'Priya', state: 'Maharashtra', balance: 1500, age: 30 },
{ name: 'Neha', state: 'Tamil Nadu', balance: 2200, age: 25 },
{ name: 'Sita', state: 'Uttar Pradesh', balance: 1700, age: 35 },
{ name: 'Anjali', state: 'Karnataka', balance: 1800, age: 28 },
{ name: 'Rekha', state: 'West Bengal', balance: 1600, age: 40 }
]
let val = womenCitizens.forEach((citizen) => console.log(citizen.name))
console.log(val)
In brief: If you want to visit each element of an array use forEach() function.
4. Array.find():
The government has identified their target electorate and now needs to decide which candidate should represent their side in the Bangalore region, and they have 5 members for the Bangalore region. They can decide by getting to know who won the most number of times in Bangalore region, and the catch over here is First Come, First Serve, meaning who get first in the array will be selected (if their criterion is lets say wins > 5).
Syntax: array.find(callbackFun, thisArg(optional)) It returns the first element of the array which satisfy the condition, and in the case of no-one, undefined will be returned.
const candidates = [
{ name: "Ashish", region: "Bangalore", wins: 3 },
{ name: "Priya", region: "Bangalore", wins: 7 },
{ name: "Ravi", region: "Bangalore", wins: 5 },
{ name: "Neha", region: "Bangalore", wins: 6 },
{ name: "Sandeep", region: "Bangalore", wins: 8 }
];
const candidate = candidates.find((candidate) => candidate.wins > 5)
console.log(candidate);
console.log(candidates.find((candidate) => candidate.wins > 5));
Although, there is sandeep who won 8 times but didnāt get select because he comes last in the array, and the find() function works on first-come, first serve.
In brief: Want to find the first element from L-To-R in the array who satisfies conditions, use find() function.
5. Array.concat():
lets say priya didnāt get the winning number of seats in Karnataka but got majority of seats and Modi Government wants to build their Government in Karnataka, they can do alliance with other party, lets say with AAP and Congress as well (that aināt gonna happen in real life for sure). So they will combine the seats of BJP, AAP and Congress and will get the total seats.
Syntax: array.concat(value1, value2, /* ā¦, */ valueN) It returns a new array with the combined values or populated values of all arrays without modifying their individualās actual values.
const BJP = [3, 4, 5, 2];
const AAP = [6, 3, 4];
const Congress = [1, 2, 7, 3, 5];
const total = BJP.concat(AAP, Congress);
const halfhalf = BJP.concat(AAP);
const total = halfhalf.concat(Congress);
console.log(total);
console.log(AAP);
console.log(BJP);
console.log(Congress);
In brief: All the elements of arrays will be populated into a new array without modifying the original one when you use concat() function.
6. Array.every():
Now they want to check whether the number of seats from the alliance of a particular region is greater than 2 or not? if the seats in particular region is greater than 2 then they will form the alliance otherwise not. To check this they will use every() function of array because if each element I said eachhhhh passes the condition then it will return true only otherwise false .
Syntax: array.every(callbackFun, thisArg) It returns boolean value and it will return true if and only if all the elements pass the condition or else false.
const total = [3, 4, 5, 2, 6, 3, 4, 1, 2, 7, 3, 5]
const willAllianceForm = total.every((seat) => seat >=2)
console.log(willAllianceForm);
In brief: To check condition on all the elements of an array use every() function.
7. Array.includes():
Now enough about Politics and Government for today, lets talk about our most favorite place our wardrobe. You want to check if you have black color shirt or not, and you can represent your shirts in an array (you can right? canāt youš¤). We can check if we have black color shirt or not (I do, wau? you have let me know in comment or mail) using includes() function or array.
Syntax: array.includes(toBeSearchElement, fromIndex): It returns boolean value and it will return true if the element is found from the specified index of the array otherwise it will return false.
const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt",
"Black linen Shirt", "White Linen Shirt",
"Gray Checkered Shirt"]
const haveShirt = shirts.includes("Black linen Shirt", 1)
console.log(haveShirt);
const haveShirt = shirts.includes("Black linen Shirt", 3)
console.log(haveShirt);
const haveShirt = shirts.includes("Black linen Shirt", 4)
console.log(haveShirt);
In brief: It checks from the specified searchIndex if mentioned otherwise from 0, and if finds out then returns true or else false.
8. Array.push():
Now lets suppose you donāt have Black linen Shirt in your wardrobe and you saw me wearing it, and wants to add it because its fucking cool. You can do by using push() function of array(wardrobe).
Syntax: array.push(element1, element2, /* ā¦, */ elementN) It returns the length of the new array, and the array will be updated with the values of element1, element2 ā¦ (in the case of multiple push elements at the same time) at the end of the array.
const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt",
"White Linen Shirt", "Gray Checkered Shirt"]
shirts.push("Black linen Shirt")
console.log(shirts.push("Black linen Shirt"));
console.log(shirts);
In brief: If you want to add any elements in the last of the array use push() fn.
9. Array.pop():
Now, your mom doesnāt like black color (Note: in your case not mineš), youāve to remove it from your wardrobe and return back to zara. You can do this by pop() fn.
Syntax: array.pop() It returns the last element from the array and in the case of no element in array, returns undefined
const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt",
"White Linen Shirt", "Gray Checkered Shirt",
"Black linen Shirt"]
const returnShirt = shirts.pop()
console.log(shirts);
console.log(returnShirt);
10. Array.shift():
Ok you removed your shirt from the last but what if you want to remove your shirt from the first or left side. Oh! here we are JS developer provided you a method knows as shift() .
Syntax: array.shift() It removes the element of the array from the left side or beginning side (index 0) and returns removed element, and in the case of no element in array, it returns undefined.
const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt",
"White Linen Shirt", "Gray Checkered Shirt",
"Black linen Shirt"]
const returnShirt = shirts.shift()
console.log(shirts);
console.log(returnShirt);
In brief: Okay want to remove element from the beginning of the array use shift() fn.
Thank you for reading.
if(you read all) return āyouāre gonna be a good developerā
else return "au revoir"
