Most Common JavaScript Array Methods
Tags: javascript, tutorial, webdev, beginners
Published: 2024-03-27 11:31:09

There are some common Javascript Array methods we use in JavaScript. In this article, I tried to highlight some of the common array methods I mostly used in JavaScript even in React projects. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s842wdga76i5hmjax09g.jpg)

I have provided the 16 most used JavaScript methods. I have also included code examples for easier understanding.  

Let's Go!!!

##  length()
Returns the number of elements in an array.
```js
const colors = ['red', 'green', 'blue'];
console.log(colors.length); 
```
Output: 
``` 
3 
```


##  toString() 
Converts the elements of an array into a string and returns the result.
```js
const colors = ['red', 'green', 'blue'];
console.log(colors.toString()); 
```
Output: 
``` 
"red,green,blue" 
```


##  indexOf()
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
```js
const colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green')); 
```
Output: 
``` 
1 
```


## pop()
Removes the last element from an array and returns that element.
```js
const colors = ['red', 'green', 'blue'];
const removedColor = colors.pop();
console.log(removedColor); 
```
Output:  
```
"blue"
```


## push()
Adds one or more elements to the end of an array and returns the new length of the array.
```js
const colors = ['red', 'green'];
const newLength = colors.push('blue');
console.log(colors); 
```
Output: 
```
['red', 'green', 'blue']
```


## concat() 
Returns a new array that combines the original array's elements with other arrays or values.
```js
const colors = ['red', 'green'];
const moreColors = colors.concat(['blue', 'yellow']);
console.log(moreColors); 
```
Output: 
```
["red", "green", "blue", "yellow"]
```


## slice()
Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
```js
const colors = ['red', 'green', 'blue', 'yellow'];
const slicedColors = colors.slice(1, 3);
console.log(slicedColors);
```
Output: 
```
["green", "blue"]
```


## splice()
Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
```js
const colors = ['red', 'green', 'blue', 'yellow'];
colors.splice(2, 1, 'orange'); // Removes 1 element starting from index 2 and adds 'orange'
console.log(colors);
```
Output: 
```
["red", "green", "orange", "yellow"] 
```


## filter() 
Creates a new array with all elements that pass the test implemented by the provided function.
```js
const colors = ['red', 'green', 'blue', 'yellow'];
const filteredColors = colors.filter(color => color.length > 4);
console.log(filteredColors); 
```
Output: 
``` 
["green", "yellow"] 
```


## find()
Returns the value of the first element in the array that satisfies the provided testing function, or is undefined if no such element is found.
```js
const colors = ['red', 'green', 'blue', 'yellow'];
const foundColor = colors.find(color => color === 'green');
console.log(foundColor); 
```
Output: 
```
"green"
```


## forEach() 
Executes a provided function once for each array element.
```js
const colors = ['red', 'green', 'blue'];
colors.forEach(color => console.log(color.toUpperCase()));
```
Output:
```
RED
GREEN
BLUE
```


## includes() 
Determines whether an array includes a certain element, returning true or false as appropriate.
```js
const colors = ['red', 'green', 'blue'];
console.log(colors.includes('yellow')); 
```
Output: 
``` 
false 
```


## map()
Creates a new array populated with the results of calling a provided function on every element in the calling array.
```js
const colors = ['red', 'green', 'blue'];
const capitalizedColors = colors.map(color => color.toUpperCase());
console.log(capitalizedColors);
```
Output: 
```
["RED", "GREEN", "BLUE"]
```


## reduce()
Executes a reducer function (that you provide) on each array element, resulting in a single output value.

```js
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); 
```
Output: 
```
15
```


If you found this helpful, please consider giving it a like. It means a lot to me. Thanks for Reading 🩵⭐

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7brffw3mnan4o9qa44r.gif)