Javascript Array Methods

Introduction 

 

In JavaScript, a lot of people work with arrays, but most of them use loops to perform operations on the array. This is not the right way to do so and can break the flow if logic goes wrong. Also, it increases the complexity of the logic.

 

Instead of using loops, we can use the JavaScript Array methods which are map() , filter(), reduce(), find(), every() and some().

 

map()

 

map() allows you to perform the same operation on every element of an array. People often use the forEach loop for this purpose instead of map() but that may cause the issues later.

For example...

 

You can also use map() with an array of objects to return a single value of each object. Refer to the example below:

let numbers = [2, 3, 4, 5, 6, 7, 8, 9]
// we want to multiply each number of array with 2
let multipliedNumbers = numbers.map((value) => {
    return value * 2
})
// multipliedNumbers = [4, 6, 8, 10, 12, 14, 16, 18]

filter()

 

Filter() lets you filter the elements of an array based on the condition imposed. Elements not passing the condition will be discarded from the result.

 

For example:

const cars = [{
    model: 'ferrari portofino',
    price: 100000
}, {
    model: 'maserati quattroporte',
    price: 140000
}, {
    model: 'ford mustang',
    price: 170000
}, {
    model: 'lamborghini gallardo',
    price: 200000
}, {
    model: 'bentley mulsanne',
    price: 210000
}, {
    model: 'rolls royce phantom',
    price: 260000
}, {
    model: 'ferrari california',
    price: 320000
}, ]
// we want to filter cars with price greater than 150000
const myCars = cars.filter((element) => {
    return element.price > 150000
})
/** myCars = [ {model: "ford mustang", price: 170000}
{model: "lamborghini gallardo", price: 200000}
{model: "bentley mulsanne", price: 210000}
{model: "rolls royce phantom", price: 260000}
{model: "ferrari california", price: 320000}
]

*/

reduce()

 

The reduce method allows you to perform an operation on two adjacent elements of an array and use that result with the next element of an array. People usually avoid using it and they prefer to create their own logic, but reduce can save a lot of their work and makes the function smaller.

 

Consider the example below:

let myCars = [{
    model: 'ferrari california',
    price: 100000
}, {
    model: 'maserati quattroporte',
    price: 140000
}, {
    model: 'ford mustang',
    price: 170000
}, {
    model: 'lamborghini aventador',
    price: 200000
}, {
    model: 'bentley continental',
    price: 210000
}, {
    model: 'rolls royce ghost',
    price: 260000
}, {
    model: 'ferrari portifino',
    price: 320000
}, ]
// we want to know the total worth of myCars
myCars = myCars.reduce((worth, car) => {
    return worth + car.price
}, 0)
// mycars = 1400000

find()

 

The find method seems similar to filter, but it gives us an object in response, unlike filter. It creates an object based on the condition imposed. If you use find method in an array, it will return the first matching object.

Consider the example below:

let myCars = [{
    model: 'ferrari portofino',
    price: 100000
}, {
    model: 'maserati quattroporte',
    price: 140000
}, {
    model: 'ford mustang',
    price: 170000
}, {
    model: 'lamborghini gallardo',
    price: 200000
}, {
    model: 'bentley mulsanne',
    price: 210000
}, {
    model: 'rolls royce phantom',
    price: 260000
}, {
    model: 'ferrari california',
    price: 320000
}, ]
// we want to find the first car with price > 150000
myCars = myCars.find((car) => {
    return car.price > 150000
})
// mycars = {model: 'ford mustang', price: 170000}

every()

 

The every method returns a Boolean value based on the condition imposed. It is used to check if all the elements of an array pass the condition or not.

 

Think of it as AND operator, the response will be true only if all the elements pass the criteria.

 

For example:

let myCars = [{
    model: 'ferrari portofino',
    price: 100000
}, {
    model: 'maserati quattroporte',
    price: 140000
}, {
    model: 'ford mustang',
    price: 170000
}, {
    model: 'lamborghini gallardo',
    price: 200000
}, {
    model: 'bentley mulsanne',
    price: 210000
}, {
    model: 'rolls royce phantom',
    price: 260000
}, {
    model: 'ferrari california',
    price: 320000
}, ]
/**
  *

   we want to check if
  1. all the cars have price > 150000
  2. all the cars have price > 50000
  * */
myCars = myCars.every((car) => {
    return car.price > 150000
})
// 1. mycars = false
myCars = myCars.every((car) => {
    return car.price > 50000
})
// 2. mycars = true

some()

 

The some method also returns a Boolean value just like every, based on the condition imposed. It is used to check if any of the elements of an array passes the condition.

You may think of it as an OR operator, the response will be true if any of the elements pass the criteria.

 

For example:

let myCars = [{
    model: 'ferrari portofino',
    price: 100000
}, {
    model: 'maserati quattroporte',
    price: 140000
}, {
    model: 'ford mustang',
    price: 170000
}, {
    model: 'lamborghini gallardo',
    price: 200000
}, {
    model: 'bentley mulsanne',
    price: 210000
}, {
    model: 'rolls royce phantom',
    price: 260000
}, {
    model: 'ferrari california',
    price: 320000
}, ]
/**
  *

   we want to check if any of the car has price > 300000
  * */
myCars = myCars.some((car) => {
    return car.price > 150000
})
// mycars = true

Depending upon your requirement, you can use these methods.

 

In the example below, all the array methods are used on the same set of data.

const cities = [{
    city: 'Gurgaon',
    population: 99000
}, {
    city: 'Seattle',
    population: 108000
}, {
    city: 'London',
    population: 91000
}, {
    city: 'Milan',
    population: 100000
}, {
    city: 'Athens',
    population: 120000
}, {
    city: 'sydney',
    population: 88000
}, {
    city: 'Toronto',
    population: 55000
}, {
    city: 'Tokyo',
    population: 92000
}, {
    city: 'Berlin',
    population: 110000
}, {
    city: 'Jakarta',
    population: 11000
}, {
    city: 'Moscow',
    population: 199000
}, {
    city: 'Zurich',
    population: 65000
}, ]
/**
 * map function
 *
 * divide the population of each city by 1000
 */
let mapResult = cities.map((city) => {
    return city.population / 1000
})
// mapResult = [99, 108, 91, 100, 120, 88, 55, 92, 110, 11, 199, 65]
/**
 * filter function
 *
 * get cities with a population greater than 100000
 */
let filterResult = cities.filter((city) => {
    return city.population > 100000
})
/*
  filterResult =  [    {city: "Seattle", population: 108000},
                       {city: "Athens", population: 120000},
                       {city: "Berlin", population: 110000},
                       {city: "Moscow", population: 199000}
                   ]

 */
/**
 * find function
 *
 * get a city with a population greater than 100000
 */
let findResult = cities.find((city) => {
    return city.population > 100000
})
// findResult = {city: "Seattle", population: 108000}
/**
 * reduce function
 *
 * get total population
 */
let reduceResult = cities.reduce((population, city) => {
    return population + city.population
}, 0)
// reduceResult = 1138000
/**
 * every function
 *
 * check if all the cities have population greater tha 50000
 *
 */
let everyResult = cities.every((city) => {
    return city.population > 50000
})
// everyResult = false
/**
 * some function
 *
 * check if any of the city have population greater tha 50000
 *
 */
let someResult = cities.every((city) => {
    return city.population > 50000
})
// someResult = true

For any query or suggestion, you can get in touch with me @ https://twitter.com/nitinmanocha16