DEV Community

Cover image for JS Array methods: Which method to use to...?
Shubham Singh Kshatriya
Shubham Singh Kshatriya

Posted on • Edited on

4

JS Array methods: Which method to use to...?

Arrays are list-like objects whose prototype provides various methods to perform many operations. Did you ever thought what are the different use-cases where these methods can be used?

The answer to this question can be found using: I WANT TO...

1. Mutate the original array

Add an element

  • push(): Adds one or more elements to the end of an array and returns the new length of the array.
  • unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

Remove an element

  • pop(): Removes the last element from an array and returns that element.
  • shift(): Removes the first element from an array and returns that element.
  • splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

Others:

  • fill(): Changes all elements in an array to a static value.
  • sort(): Sorts an array.
  • reverse(): Reverses an array.

Alt Text

2. Create a new array from original array

Portion of array

  • slice(): Returns a shallow copy of a portion of an array into a new array.

Computed from array.

  • map(): Creates a new array from an existing one by applying a function to each one of the elements of the existing array.
  • reduce(): Reduces an array of values down to just one value.
  • filter(): Takes each element in an array and applies a conditional statement against it. If this conditional returns true, the element gets pushed to the new array.

Merge into array

  • concat(): Merges two or more arrays.

Flatten the array:

  • flat(): Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
  • flatMap(): Returns a new array formed by applying a given callback function to each element of the existing array, and then flattening the result by one level.

Alt Text

3. Find the

Index of element

  • findIndex(): Returns the index of the first element in the array that satisfies the given condition. Otherwise, it returns -1.

Array element

  • find(): Returns the first element in the array that satisfies the given condition. Otherwise, it returns undefined. Alt Text

4. Check if array contains an element

Using a condition

  • some(): Returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.
  • every(): Returns true if, in the array, it finds all the element returns true for the provided function; otherwise it returns false.

Using a value

  • includes(): Checks whether an array includes a certain value, returning true or false as appropriate. Alt Text

5. Loop the array

  • forEach(): Executes a provided function once for each array element. Alt Text

6. Join the array elements

  • join(): Creates and returns a new string by concatenating all of the elements in an array Alt Text

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)