JavaScript Array Methods You Should Know
Tags: javascript, webdev, programming, react
Published: 2022-04-07 11:01:50

When we are using JavaScript arrays we need to modify the array, find items in the array, insert new items into the array, remove items from the array, and many more. So we can use JavaScript built-in array methods to do the modifications to the arrays according to our requirements.

In this article, I'm discussing about 24 JavaScript Array Methods. To demonstrate the 1 to 6 methods as an example I'll use the below array. In each method, I'll show the code snippet and output result.
```javascript
const items = [
 { name: "Apple", emoji: "🍎", price: 50 },
 { name: "Grapes", emoji: "🍇", price: 30 },
 { name: "Lemon", emoji: "🍋", price: 40 },
 { name: "Strawberry", emoji: "🍓", price: 80 },
 { name: "Banana", emoji: "🍌", price: 10 },
 { name: "Watermelon", emoji: "🍉", price: 100 },
 { name: "Mango", emoji: "🥭", price: 20 },
 { name: "Pineapple", emoji: "🍍", price: 150 },
];
```
<br>

**1. find() Method**
This method is used to get the value of the **first element in the array that satisfies the provided condition**.

```javascript
const findItem = items.find((item) => {
  return item.name === "Strawberry"
})
console.log(findItem)

//RESULT
//{ name: "Strawberry", emoji: "🍓", price: 80 }
```
<br>

**2. filter() Method**
By using the filter method it returns an array with the values that pass the filter.
```javascript
const filterItem = items.filter((item) => {
  return item.price > 120
})
console.log(filterItem)

//RESULT
//[{ name: "Pineapple", emoji: "🍍", price: 150 }]
```
<br>


**3. map() Method**
This method is used to iterate over an array and calling function on every element of array.
```javascript
const mapItems = items.map((item) => {
  return item.emoji
})
console.log(mapItems)

//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍌", "🍉", "🥭", "🍍"]
```
<br>


**4. forEach() Method**
The forEach method is also used to loop through arrays, but it uses a function differently than the classic “for loop”. It passes a callback function for each element of an array together with the  current value (required), index (optional) & array (optional).

```javascript
//Method - 01
items.forEach(demostrateforEach)

function demostrateforEach(item, index, arr){
  console.log(item)
  console.log(index)
  console.log(arr)
}

//Method - 02
items.forEach((item, index, array) => {
  console.log(item, index, array)
})

//RESULT FOR BOTH METHODS
/*
{name:"Apple", emoji:"🍎", price:50} 
0
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]

{name:"Grapes" ,emoji:"🍇", price:30}
1
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]

{name:"Lemon", emoji:"🍋", price:40}
2
(8) [{...},{...},{...},{...},{...},{...},{...},{...}]
etc...*/
```
<br>


**5. some() Method**
The some() method checks if any array elements pass a test (provided as a function). This method returns true if the function returns true for minimum one element. The method returns false if the function returns false for all elements.

- Function returns **true for minimum one element** -> Method returns **true**

- Function returns **false for all elements** -> Method returns **false**

```javascript
const hasItemsPriceUpto80 = items.some((item) => {
  return item.price > 80
})
console.log(hasItemsPriceUpto80)

//RESULT
//true
```
<br>


**6. every() Method**
This method executes a function for each array element. This method returns true if the function returns true for all elements. The method returns false if the function returns false for one element.

- Function returns **true for all elements** -> Method returns **true**

- Function returns **false for one element** -> Method returns **false**

```javascript
const hasItemsPriceUpto80 = items.every((item) => {
  return item.price > 80
})
console.log(hasItemsPriceUpto80)

//RESULT
//false
```
<br>


**7. reduce() Method**
This method apply a function simultaneously against two values of the array (from **left-to-right**) as to reduce it to a single value.
```javascript
const items = [2, 8, 1, 3, 5, 1, 10]

const itemSum = items.reduce((result, currentValue) => {
	return result + currentValue ;
});

console.log(itemSum);

//RESULT
//30
```
<br>

**8. includes() Method**
The includes() method determines whether a string contains the given characters within it or not. This method **returns true if the string contains the characters**, otherwise, it returns false. This method is **case sensitive**.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const checkIncludes = items.includes("🍓")
console.log(checkIncludes)

//RESULT
//true
```
<br>


**9. reverse() Method**
This method reverse the order of the array. The first array element becomes the last, and the last array element becomes the first.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const reverseItems = items.reverse()
console.log(reverseItems)

//RESULT
//["🍍", "🥭", "🍉", "🍓", "🍋", "🍇", "🍎"]
```
<br>



**10. toString() Method**
This method returns a string representing the array and its elements.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const stringItems = items.toString()
console.log(stringItems)

//RESULT
//"🍎,🍇,🍋,🍓,🍉,🥭,🍍"
```
<br>


**11. join() Method**
This method is allowed joins all elements of an array into a string.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsJoinCommas = items.join()
console.log(itemsJoinCommas)
//RESULT
//"🍎,🍇,🍋,🍓,🍉,🥭,🍍"

const itemsJoinDash = items.join('-')
console.log(itemsJoinDash)
//RESULT
//"🍎-🍇-🍋-🍓-🍉-🥭-🍍"

const itemsJoinAll = items.join('')
console.log(itemsJoinAll)
//RESULT
//"🍎🍇🍋🍓🍉🥭🍍"

```
<br>


**12. splice() Method**
This method allows adds and/or removes elements from an array. When we use splice(4) will start removing elements from index 4. We can also define how many elements we want to remove from the array by passing a second number argument. In a example when we use splice(4, 2) will start removing only two elements from index 4.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsSplice = items.splice(4);
console.log(itemsSplice )
//RESULT
//["🍉", "🥭", "🍍"]

const itemsSpliceSpecificNumber = items.splice(4, 2);
console.log(itemsSpliceSpecificNumber)
//RESULT
//["🍉", "🥭"]
```
<br>


**13. slice() Method**
This method allows extracts a section of an array and returns a new array. 
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

// slicing the array from start to end
const itemSliceAll = items.slice();
console.log(itemSliceAll)
//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

// slicing from the fourth element
const itemSlice = items.slice(3);
console.log(itemSlice)
//RESULT
//["🍓", "🍉", "🥭", "🍍"]

// slicing from the fourth element to fifth element
const itemSliceSpecificNumber = items.slice(3, 5);
console.log(itemSliceSpecificNumber)
//RESULT
//["🍓", "🍉"]
```
<br>


**14. indexOf() Method**
This method returns the first (least) index of an element within the array equal to the specified value, or **-1 if none is found**.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const indexItem = items.indexOf("🍓")
console.log(indexItem)

const newItem = items.indexOf("🔴")
console.log(newItem)

//RESULT
//3
//-1
```
<br>


**15. findIndex() Method**
This method executes a function for each array element. The findIndex() method returns the index (position) of the first element that passes a test. The findIndex() method **returns -1 if no match is found**.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const findIndexItemOne = items.findIndex((item) => {
	return item === "🍓"
});
console.log(findIndexItemOne)
//RESULT
//3


const findIndexItemTwo = items.findIndex((item) => {
	return item === "🔴"
});
console.log(findIndexItemTwo)
//RESULT
//-1

```
<br>


**16. lastIndexOf() Method**
This method returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const lastIndexItem = items.lastIndexOf("🍎")
console.log(lastIndexItem)

const newItem = items.lastIndexOf("🔴")
console.log(newItem)

//RESULT
//5
//-1
```
<br>


**17. concat() Method**
This method allows returns a new array comprised of this array joined with other array(s) and/or value(s).
```javascript
const itemOne = ["🍎", "🍇", "🍋", "🍓"]
const itemTwo = ["🍉", "🍎", "🍍"]

const itemsArray = itemOne.concat(itemTwo)
console.log(itemsArray)

//RESULT
//["🍎", "🍇", "🍋", "🍓", "🍉", "🍎", "🍍"]
```
<br>


**18. push() Method**
This method allows adds one or more elements to the end of an array and returns the new length of the array.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const pushItem = items.push('🔴')
console.log(pushItem)
console.log(items)

//RESULT
//8
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍", "🔴"]
```
<br>


**19. pop() Method**
This method allows removes the last element from an array and returns that element.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const popItem = items.pop()
console.log(popItem)
console.log(items)

//RESULT
//"🍍"
//["🍎", "🍇", "🍋", "🍓", "🍉", "🥭"]
```
<br>


**20. shift() Method**
This method removes the first element from an array and returns that element.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const shiftItem = items.shift()
console.log(shiftItem)
console.log(items)

//RESULT
//"🍎"
//["🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]
```
<br>


**21. unshift() Method**
This method allows adds one or more elements to the front of an array and returns the new length of the array.
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const unshiftItem = items.unshift("🔴")
console.log(unshiftItem)
console.log(items)

//RESULT
//8
//["🔴", "🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]
```
<br>

**22. isArray() Method**
This method check whether an object or a variable is an array or not. isArray() method returns true if the value is an array, if not returns false .
```javascript
const itemArray = ["🍎", "🍇", "🍋", "🍓", "🍉", "🍎", "🍍"]
const isItemsArray = Array.isArray(itemArray)
console.log(isItemsArray)
//RESULT
//true

const itemObject = {"🍎" : "Apple", "🍇" : "Grapes"}
const isSample2Array = Array.isArray(itemObject)
console.log(isSample2Array)
//RESULT
//false

const itemString = "Apple"
const isSample3Array = Array.isArray(itemString)
console.log(isSample3Array)
//RESULT
//false
```
<br>


**23. length Property**
The length property of an object which is an instance of type Array sets or returns the number of elements in that array. 
```javascript
const items = ["🍎", "🍇", "🍋", "🍓", "🍉", "🥭", "🍍"]

const itemsLength = items.length;
console.log(itemsLength )

//RESULT
//7
```
<br>