Introduction

When we start programming, we tend do create our own function with our own loop to manipulate arrays.

In reality, almost all OOP languages, including JavaScript, provide us methods to achieve it.

If you begin with JavaScript, this article should be really useful, for others, it will be a great reminder

Every

The every method allows us to test if all the elements of an array verify a condition.
This method returns true if all elements verify the test, otherwise, false.
The condition is a function.

For example, the following example will test if every 'human' in our array is an adult:

// The condition has to return a boolean
function condition (human) {
    return human.age >= 18
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.every(condition))
// Should output false

However, the some() method returns true if at least one element passes the test

Filter

The filter method creates and returns a new array with all elements that verify a condition.
The condition is a function.

The following example returns an array uniquely composed of adult:

function condition (human) {
    return human.age >= 18
}
var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.filter(condition))
// Returns Thomas and Luc

Find

The method find() returns the first element in the array that verify the condition.
Otherwise, if no element verifies it, find() returns 'undefined'.
As usual, the condition is a function.

This example returns the first adult:

function condition (human) {
    return human.age >= 18
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.find(condition))
// Should returns Thomas

Map

The map method creates a new array with the return value of a function executed for each element of the calling array

This example increments the age of each human:

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.map(function(element){
    element.age += 1    
    return element
}))

Reduce

Last but not least, the reduce() method is for me the most tricky one.

The reduce method reduces an array to a single value by executing a provided function for each value of the array.
For each element, the return value is stored in an 'accumulator' that can be used in all the iterations.
The final return value of the reduce() method is this accumulator.
The accumulator should be initialized in the method call

Furthermore, the reducer function can take two other parameters:

The current index
The source array

This example returns the sum of ages:

function reducer (accumulator,element) {
    return accumulator + element.age
}

var arr = [{
    name: 'Thomas',
    age: 19},{
    name: 'Noé',
    age: 17},{
    name: 'Luc',
    age: 20}]

console.log(arr.reduce(reducer,0))

The previous example is very simple, but the reduce() method is really powerful, you can achieve a lot of things with it.

Conclusion

Thank's for reading me, if you have any questions, ask them! 🧐

Array manipulation in JavaScript 🧐