DEV Community

Cover image for JavaScript Array Methods You Should Know
Samitha Wijesekara
Samitha Wijesekara

Posted on • Updated on

JavaScript Array Methods You Should Know

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.

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 },
];
Enter fullscreen mode Exit fullscreen mode

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

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

//RESULT
//{ name: "Strawberry", emoji: "πŸ“", price: 80 }
Enter fullscreen mode Exit fullscreen mode

2. filter() Method
By using the filter method it returns an array with the values that pass the filter.

const filterItem = items.filter((item) => {
  return item.price > 120
})
console.log(filterItem)

//RESULT
//[{ name: "Pineapple", emoji: "🍍", price: 150 }]
Enter fullscreen mode Exit fullscreen mode

3. map() Method
This method is used to iterate over an array and calling function on every element of array.

const mapItems = items.map((item) => {
  return item.emoji
})
console.log(mapItems)

//RESULT
//["🍎", "πŸ‡", "πŸ‹", "πŸ“", "🍌", "πŸ‰", "πŸ₯­", "🍍"]
Enter fullscreen mode Exit fullscreen mode

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

//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...*/
Enter fullscreen mode Exit fullscreen mode

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

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

//RESULT
//true
Enter fullscreen mode Exit fullscreen mode

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

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

//RESULT
//false
Enter fullscreen mode Exit fullscreen mode

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.

const items = [2, 8, 1, 3, 5, 1, 10]

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

console.log(itemSum);

//RESULT
//30
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

const checkIncludes = items.includes("πŸ“")
console.log(checkIncludes)

//RESULT
//true
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

//RESULT
//["🍍", "πŸ₯­", "πŸ‰", "πŸ“", "πŸ‹", "πŸ‡", "🍎"]
Enter fullscreen mode Exit fullscreen mode

10. toString() Method
This method returns a string representing the array and its elements.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

//RESULT
//"🍎,πŸ‡,πŸ‹,πŸ“,πŸ‰,πŸ₯­,🍍"
Enter fullscreen mode Exit fullscreen mode

11. join() Method
This method is allowed joins all elements of an array into a string.

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
//"πŸŽπŸ‡πŸ‹πŸ“πŸ‰πŸ₯­πŸ"

Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

const itemsSplice = items.splice(4);
console.log(itemsSplice )
//RESULT
//["πŸ‰", "πŸ₯­", "🍍"]

const itemsSpliceSpecificNumber = items.splice(4, 2);
console.log(itemsSpliceSpecificNumber)
//RESULT
//["πŸ‰", "πŸ₯­"]
Enter fullscreen mode Exit fullscreen mode

13. slice() Method
This method allows extracts a section of an array and returns a new array.

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
//["πŸ“", "πŸ‰"]
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

const indexItem = items.indexOf("πŸ“")
console.log(indexItem)

const newItem = items.indexOf("πŸ”΄")
console.log(newItem)

//RESULT
//3
//-1
Enter fullscreen mode Exit fullscreen mode

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.

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

Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

const newItem = items.lastIndexOf("πŸ”΄")
console.log(newItem)

//RESULT
//5
//-1
Enter fullscreen mode Exit fullscreen mode

17. concat() Method
This method allows returns a new array comprised of this array joined with other array(s) and/or value(s).

const itemOne = ["🍎", "πŸ‡", "πŸ‹", "πŸ“"]
const itemTwo = ["πŸ‰", "🍎", "🍍"]

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

//RESULT
//["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "🍎", "🍍"]
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

const pushItem = items.push('πŸ”΄')
console.log(pushItem)
console.log(items)

//RESULT
//8
//["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍", "πŸ”΄"]
Enter fullscreen mode Exit fullscreen mode

19. pop() Method
This method allows removes the last element from an array and returns that element.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

//RESULT
//"🍍"
//["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­"]
Enter fullscreen mode Exit fullscreen mode

20. shift() Method
This method removes the first element from an array and returns that element.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

//RESULT
//"🍎"
//["πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

const unshiftItem = items.unshift("πŸ”΄")
console.log(unshiftItem)
console.log(items)

//RESULT
//8
//["πŸ”΄", "🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]
Enter fullscreen mode Exit fullscreen mode

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 .

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
Enter fullscreen mode Exit fullscreen mode

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.

const items = ["🍎", "πŸ‡", "πŸ‹", "πŸ“", "πŸ‰", "πŸ₯­", "🍍"]

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

//RESULT
//7
Enter fullscreen mode Exit fullscreen mode

Discussion (0)