Array manipulation in JavaScript 🧐
Tags: javascript, webdev, productivity
Published: 2019-02-12 23:59:41

---
title: Array manipulation in JavaScript 🧐
published: true
description: Array manipulation in JavaScript 🧐
tags: #javascript #webdev #productivity
---
# 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**! 🧐