If you work with JavaScript, you probably use arrays a lot. In this post I would like to introduce you to a few of my favourite array methods. For all the examples we will use the following array.

var users = [
    {
        firstName: 'Jilles',
        lastName: 'Soeters',
    	gender: 'M'
    },
    {
        firstName: 'Justin',
        lastName: 'Bieber',
        gender: 'M'
    },
    {
        firstName: 'Miley',
        lastName: 'Cyrus',
        gender: 'F'
    }
];

#1 array.forEach(fn, index)

This is one of the most well-known array methods in JavaScript. It has some advantages over a simple for loop.

arr.forEach() takes a function as first argument and current index as second. It also creates a new scope whereas a for-loop doesn't.

users.forEach(function (user, i) {
    var fullName = user.firstName + ' ' + user.lastName;
    console.log('Hello ' + fullName);
});

This will log the names and that's it. If you however use a for loop you create 2 variables that are accessible outside of the for loop.

for (var i = 0; i < users.length; i++) {
    var fullName = users[i].firstName + ' ' + users[i].lastName;
    console.log('Hello ' + fullName);
}
// fullName is now Miley Cyrus
// i is now 3

I feel like forEach is also more expressive, just user looks better than users[i] in my opinion.

#2 array.map(fn)

Array.map is a very useful function. It loops over the array (like forEach) but will create a new array with the items you return.

If we would like to add an id to our list of users we could do so easily with the use of map.

var usersDb = users.map(function (user, index) {
    user.id = index + 1;
    return user;
});
console.table(usersDb);

This would show us:

#3 array.filter(fn)

Array.filter is like a bit like map. It also creates a new array but only containing the items where the function returns true.

var guys = users.filter(function (user) {
    return user.gender === 'M';
});
console.table(guys);

I recently used this to remove strings that are not numbers from an array using a simple one-liner: [1, 2, 3, 'banana', 4, {}].filter(Number) which returns [1, 2, 3, 4].

#4 array.reduce(fn, startingValue)

A lot of people think reduce is complicated or hard, I thought so too until I took the time and found out that it's actually an awesome (and easy) method.

You want to use reduce when you want to "reduce" your array into a single value, this can be a number, object or even a string.

The first argument is a function that takes 4 arguments, the last two are optional.

  • previousValue - the previous value in the next iteration, will be startingValue the first time.
  • currentValue - the current item in the array we're iterating over.
  • index - the index of the current item.
  • originalArray - the array we're executing .reduce on.

What we return in our function will be the next previousValue.

With this knowledge we can create a guest-list string from our array.

var namesList = users.reduce(function (previous, current, index, originalArray) {
    var end = index + 1 === originalArray.length ? '.' : ', ';
    return previous + current.firstName + end;
}, '');
console.log(namesList); // Jilles, Justin, Miley.

#5 array.every(fn)

The last one is pretty uncommon but really handy. It's like kind of filter but returns a boolean rather than an array.

function isMillionaire (person) {
    return ['Justin Bieber', 'Miley Cyrus'].indexOf(person.firstName + ' ' + person.lastName);
}

if (users.every(isMillionaire)) {
    console.log('They are all rich!');
} else {
    console.log('Someone in our group is not rich...');
}

As a bonus there is also Array.some which is almost the same as every but returns true even if just one condition is true rather than all of them.

That's it!

I hope this post was useful to you! Don't hesitate to share or comment (either here or on Twitter).