Array Methods

There are a slew of useful array methods that have been added to JavaScript in recent years. There are also some that have existed since ES5, but maybe don’t get enough attention. This is my list of favorites, based on their general utility and the code clarity they provide.

Static Methods

Array.isArray

Available since ES5 - Browser Support

This can be passed any argument to check whether something is an array. It’s better than duck typing for two reasons—It’s reliable and it’s name clearly communicates what it does.

Array.isArray([]); // => true
Array.isArray('string'); // => false
Array.isArray(undefined); // => false
Array.isArray(null); // => false

Array.from

Available since ES2015 - Browser Support

This creates a new array from any iterable.

let iterable = 'abc';
Array.from(iterable); // => ['a', 'b', 'c']

Spread syntax is so nice that this method may not seem very useful, but Array.from accepts an optional second and third argument. The second is a mapping function to apply to each item at creation time. The third argument is for setting this context.

Array.from('abc', letter => letter.toUpperCase());
// => ['A', 'B', 'C']

Instance Methods

[].every

Available since ES5 - Browser Support

Check that every element in an array meets certain criteria.

let myArr = [1, 1, 6];
myArr.every(num => num < 5); // => false
myArr.every(num => num > 0); // => true

[].some

Available since ES5 - Browser Support

Check that at least one element in an array meets certain criteria.

let people = [
  { name: 'Ada' },
  { name: 'Grace' }
];
people.some(person => person.name === 'Grace');
// => true

Note: When called on an empty array, some will always return false. Conversely, every will always return true.

[].find

Available since ES2015 - Browser Support

This method will find an item in an Array. It’s similar to some, but it returns the found item itself or undefined if not found.

let people = [
  { name: 'Ada' },
  { name: 'Grace' }
];
people.find(person => person.name === 'Ada');
// => { name: 'Ada' }

[].findIndex

Available since ES2015 - Browser Support

Just like find, but returns the index of the found item or undefined if not found.

[].includes

Available since ES2016 - Browser Support

Check whether an array has a given value.

let myArray = [1, 2, 3];
myArray.includes(9); // => false
myArray.includes(1); // => true

Note: this uses the SameValueZero comparison, so it’s great for finding primitive values in an array, but be aware that objects will always be compared by reference.

From MDN:

For any non-primitive objects x and y which have the same structure but are distinct objects themselves, all of the above forms will evaluate to false.

let myObject = { foo: true }
let arrayWithObject = [ myObject ];
arrayWithObject.includes({ foo: true }); // => false
arrayWithObject.includes(myObject); // => true

Please Polyfill

If you use Babel to compile your source code, it’s important to know that global array methods (or any global objects or methods) don’t come freely as part of the code transform process. But with a little configuration, that can be fixed.

You can automate the addition of necessary polyfills by using @babel/preset-env. Make sure to set useBuiltIns to usage.

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage"    }]
  ]
}

The fact that you need to use polyfills alongside something like Babel, may not be obvious. Whatever polyfill strategy you use, just know that you will need to ensure these methods exist (whether native or not) before executing them in your target environment.

Conclusion

You can get quite a lot done with basic arrays in JavaScript. If you use the right methods in the appropriate places, your code will be one step closer to communicating intent.