# JavaScript: Array Methods in JS

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">TL;DR:</div>
</div>

## 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](https://open.spotify.com/track/14GUcf9gXjZpvEVDs4Zztv?si=d80e921899834003)

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/14GUcf9gXjZpvEVDs4Zztv?utm_source=generator" width="100%" height="152"></iframe>

### 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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), 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](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).

### 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.)

```javascript
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`

```javascript
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](https://www.google.com/search?q=electorate&sca_esv=88727e9b8f42f71d&rlz=1C1ONGR_enIN1080IN1080&ei=s6ajZ5TzFrKW4-EP-J7joAU&ved=0ahUKEwjUmJrzja2LAxUyyzgGHXjPGFQQ4dUDCBA&uact=5&oq=electorate&gs_lp=Egxnd3Mtd2l6LXNlcnAiCmVsZWN0b3JhdGUyDhAAGIAEGJECGLEDGIoFMhEQABiABBiRAhixAxiDARiKBTILEAAYgAQYkQIYigUyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAESNEGUNMDWPMEcAF4AZABAJgBkgGgAY0CqgEDMC4yuAEDyAEA-AEBmAICoAKXApgDAIgGAZIHAzAuMqAH3ws&sclient=gws-wiz-serp) and now needs to decide which candidate should represent their side in the [Bangalore](https://www.google.com/search?q=bangalore&rlz=1C1ONGR_enIN1080IN1080&oq=bangalore&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDE4MTNqMGo5qAIAsAIA&sourceid=chrome&ie=UTF-8) 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 &gt; 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.

```javascript
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.

```javascript
// 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`.

```javascript
// 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`.

```javascript
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.

```javascript
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`

```javascript
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`.

```javascript
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.

```javascript
if(you read all) return “you’re gonna be a good developer”
else return "au revoir"
```