Arrays are a great way to store and manipulate data in JavaScript. As such, there are many methods provided in JavaScript for manipulating Arrays.

Manipulating Individual Values

To manipulate (i.e. mutate/change) an Array, you can use built-in array methods, such as .push(), .pop(), .shift(), and .unshift(). .push() adds an element to the end of the Array, while .unshift() adds an element to the beginning of the Array. .pop() removes the last element from the Array, while .shift() removes the first element from the Array. In other words:

• .unshift() (add to beginning)

• .push() (add to end)

• .shift() (remove from beginning)

• .pop() (remove from end)

Manipulating Multiple Values

The .split() method is used to tokenize a string into an Array of single characters.

The .sort() method will sort the elements of an Array in ascending order.

The .reverse() method can be used to reverse the order of the elements in an Array.

The .join() method can be used to join all elements of an Array back into a string.

The .concat() method can be used to join two or more Arrays into a single array. It can also be used to guarantee that a returned value is definitely an Array. (Eg. [1].concat(2) and [1].concat([2]) return the exact same result!)

The .slice() method can be used to extract a part of an Array and return a new array.

The .splice() method can be used to add, remove, and replace various elements at various positions in an Array. Commonly used to delete an item from an array. (Eg. array.splice(index, 1) .)

The .flat() method can be used to flatten a multi-dimensional Array into a single dimension Array; defaults to 1 level, but can take a depth param to specify more (even Infinity!).

The .flatMap() method can be used to map each element of an Array, then flatten the result into a single Array (much like calling .map() and then .flat(1)).

The .fill() method can be used to fill an Array with a static value.

The .copyWithin() method can be used to copy the elements of an Array to another position in the Array.

Looping Over All Values

.forEach() is the most basic method used to iterate through the elements of an Array to perform a certain statement. Use it only if you do not want to change the items of the Array.

Use the .map() method to perform a transformation on each element of the Array. (For example, you can use it to double the value of each number in the Array.)

The .filter() method can be used to filter out "falsely" elements of an Array based on a certain condition, potentially reducing the length of the original Array. A simple way to filter out "falsey" values from an array is with .filter(Boolean). This method also acts like a .findAll() function, which Array doesn't support.

The .reduce() method can be used to reduce the Array to a single value (including a collection). It is the most flexible but most awkward of the options to loop with a return. Note that the .reduceRight() method can also be used to reduce an Array from right (end) to left (beginning), instead of calling .reverse() on the Array first.

An important note is that these 3 methods will return a new Array, and will not mutate the original Array (which is quite useful for functional programming techniques).

Searching / Testing Values

The .find() method returns the first item (if found) in the Array. .findLast() will return the last item found, or undefined.

The .findIndex() method can be used with a callback to search for a specific element's index in the Array, or undefined.

The .indexOf() method is a simpler check to find the index of the first matched element of the Array (and returns -1 if not found); Note: it does not take a callback.

The .every() method / .some() method can be used to test whether all / some elements in an Array pass a certain condition, and will always return a Boolean.

The .includes() method can be used to simply check if an array contains a certain value or not. (Similar to .some(), but it takes a value instead of a callback with the element.)

The Array.isArray(myVar) method is best used to accurately determine whether a variable is an array or not (since an Array is also considered an Object. 🤷‍♂️)

Reading Values

The .keys() method can be used to create a new array containing the keys of an Array.

The .values() method can be used to create a new array containing the values of an Array.

The .entries() method can be used to create a new array of key-value pairs from an Array.

The .at() method can be used similarly to the square brackets array[1], but is more flexible as it can take a negative value to indicate “from the end”, eg. array.at(-1) means “the last value”.

Creating

Additionally, the Array.from(config) method can be used to convert an Array-like object into an Array. Most commonly the config argument has a length key, eg. {length: 4} , but it can also be another Array, Set, Map, or even a String.

The Array.of() method can be used to create an Array from a set of values.

Conclusion

Did I miss one? What’s your favourite technique for handling Arrays? Let me know in the comments below!