Skip to main content

Top 6 Array Methods in JavaScript

·3 mins

Array Methods #

In this post I’ll go over some of the most useful array methods in JavaScript and how to use them. But before we start want to note something quickly.

In JavaScript, when using arrow function expressions there is a difference between wrapping the expression in brackets vs parenthesis.

Wrapping in parenthesis () means that the return value is implicitally expressed. I think of it as though it can all be written in a single line.

arr.sort((a, b) => (
    a - b // returns here
    b - a // error
))

With curly braces {} you must use the return keyword explicitally define what should be returned.

arr.sort((a, b) => {
    a - b 
    b - a 
    return a - b // ok 
})

arr.forEach() #

  • The forEach() method executes a provided function once for each array element.
const arr = ['foo', 'bar', 'baz'];

arr.forEach(element => console.log(element));

// "foo"
// "bar"
// "baz"

arr.map() #

  • map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
const arr = [1, 4, 9, 16];

// pass a function to map
const map = arr.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

arr.filter() #

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

arr.sort() #

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted.

The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

Or you can sort using a callback function when sorting numbers.

const arr = [1, 100000, 21, 30, 4]

// ascending
arr.sort((a, b) => a - b)
// [ 1, 4, 21, 30, 100000 ]

// descending
arr.sort((a, b) => b - a)
// [ 100000, 30, 21, 4, 1 ]

You can also sort objects

const li = [ { val: 1 }, { val: 2 }, { val: 3 }, { val: 4 }, { val: 5 }];

li.sort((a, b) => b - a)
// returns: [ { val: 5 }, { val: 4 }, { val: 3 }, { val: 2 }, { val: 1 } ]

Array.from() #

  • creates new arrays from:
    • iterable objects (Map or Set)
    • Objects that have length + can be indexed (String)
const matrix = Array.from({length: 10}, () => [])
const ascending = Array.from({length: 10}, (_, i) => i)

.reduce(callback) #

  • executes the callback function on each element in array
  • returns result of running the callback across all elements