DEV Community

Ahmad
Ahmad

Posted on • Edited on

Three useful Javascript array methods

When working with arrays, repeatedly creating functions to access and modify them can become tedious. The following array methods streamline your workflow and make your code cleaner.

Array.findIndex(function) -

The .findIndex() method iterates through an array, calling the given function for each element. If the function returns true for any element, it returns that element’s index; otherwise, it returns -1. Here’s an example.

var arr = ["Here's", "an", "example!"];

var output = arr.findIndex((element, index, array) => element === "example!"); // Returns 2
Enter fullscreen mode Exit fullscreen mode

Technicalities -

  • The callback function uses the current element, its index, and the array as arguments.
  • A downside to this method is that it will only return the first value that returns true.

Uses -

  • Verifying that certain values exist in an array.
  • Finding and altering certain values in an array Searching arrays for values that meet different criteria.

Array.splice(start, deleteCount, item1) -

The .splice() method extends the functionality of .push() and .pop(). This method inserts items into an array after the start argument and deletes a specified number of elements, starting with the start index. Here’s an example.

var arr = ["Here's", "an", "example!"];

arr.splice(1, 1, "my", "grand"); // Returns ["Here's", "my", "grand", "example!"]
Enter fullscreen mode Exit fullscreen mode

Technicalities -

  • The method can take an infinite number of items.
  • deleteCount can be 0.
  • Items aren't required.
  • The method alters the original array.
  • It returns an array containing the deleted values.

Uses -

  • Replacing array elements.
  • It can be used as a precise .push().
  • It can be used as a precise .pop().

Array.reduce(function, initialValue) -

The .reduce() method calls a given function for every element in an array, using four parameters: accumulator, the value returned by the previous function call; initialValue, used for the first function call; currentValue, the current element in the array; currentIndex, the current index; and the array itself. The method returns one value, being the final result of the given function. Here’s an example.

var arr = ["Here's", "an", "example!"];

arr.reduce((accumulator, currentValue) => accumulator + "-" + currentValue); // Returns "Here's-an-example!"

arr = [1, 2, 3, 4];

arr.reduce((accumulator, currentValue) => accumulator * currentValue, -1); // Returns -24
Enter fullscreen mode Exit fullscreen mode

Technicalities -

  • If no initialValue is given, the first value of the array will be used, and the second value will become the currentValue.
  • The original array won’t be affected.

Uses -

  • Calculating numbers in an array.
  • Comparing values in an array.

With these methods, you can efficiently manage your arrays without having to jump through hoops of code.

Resources: developer.mozilla.org



Top comments (0)