JavaScript: Array Methods in JS

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);

// output
[
  { name: 'Ashish', age: 21, city: 'Bangalore' },
  { name: 'Ravi', age: 18, city: 'Delhi' },
  { name: 'Sandeep', age: 23, city: 'Hyderabad' }
]
// as you can see this is also an array.

(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);
// output: 
/*[
  { 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 }
]
*/
console.log(womenCitizens.map((women) => women.balance += 1000))
// guess the output of above line

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 }
]
// lets say government is interested only in names
let val = womenCitizens.forEach((citizen) => console.log(citizen.name))
/* output: 
Priya
Neha
Sita
Anjali
Rekha
*/
console.log(val)
// guess the output

//output: undefined

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);
/* output:
{ name: 'Priya', region: 'Bangalore', wins: 7 }
*/

console.log(candidates.find((candidate) => candidate.wins > 5));
// can you guess the output of the above line?

// { name: 'Priya', region: 'Bangalore', wins: 7 }

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.

// Numbers in the array is representing seats in particular region by party
const BJP = [3, 4, 5, 2];
const AAP = [6, 3, 4];
const Congress = [1, 2, 7, 3, 5];

const total = BJP.concat(AAP, Congress); 
// or 
const halfhalf = BJP.concat(AAP);
const total = halfhalf.concat(Congress);
console.log(total);
/* output: 
[ 3, 4, 5, 2, 6, 3, 4, 1, 2, 7, 3, 5 ]
*/

console.log(AAP);
console.log(BJP);
console.log(Congress);
// can you guess the output of the above snippet

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.

// Seats from alliance as well
const total = [3, 4, 5, 2, 6, 3, 4, 1, 2, 7, 3, 5]
const willAllianceForm = total.every((seat) => seat >=2)

console.log(willAllianceForm);
// output: false cuz not all elements are greater than or equal to 2

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);
// output: true

const haveShirt = shirts.includes("Black linen Shirt", 3)
console.log(haveShirt);
// output: true

const haveShirt = shirts.includes("Black linen Shirt", 4)
console.log(haveShirt);
// output: false

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"));
// output: 7

// now guess the output of below line: its little bit of trickey💡
console.log(shirts);


/* output:
[
  'Red Shirt',
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt',
  'Black linen Shirt',
  'Black linen Shirt'
]
two times black shirt is added because two times we called push() fn
*/

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);
/* output: 
[
  'Red Shirt',
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt'
] */
console.log(returnShirt);
// output: Black linen Shirt

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);
/* output: 
[
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt',
  'Black linen Shirt'
] */
console.log(returnShirt);
// output: Red Shirt

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"