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:
  1. let numbers = [2, 3, 4, 5, 6, 7, 8, 9]  
  2. // we want to multiply each number of array with 2  
  3. let multipliedNumbers = numbers.map((value) => {  
  4.     return value * 2  
  5. })  
  6. // 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:
  1. const cars = [{  
  2.     model: 'ferrari portofino',  
  3.     price: 100000  
  4. }, {  
  5.     model: 'maserati quattroporte',  
  6.     price: 140000  
  7. }, {  
  8.     model: 'ford mustang',  
  9.     price: 170000  
  10. }, {  
  11.     model: 'lamborghini gallardo',  
  12.     price: 200000  
  13. }, {  
  14.     model: 'bentley mulsanne',  
  15.     price: 210000  
  16. }, {  
  17.     model: 'rolls royce phantom',  
  18.     price: 260000  
  19. }, {  
  20.     model: 'ferrari california',  
  21.     price: 320000  
  22. }, ]  
  23. // we want to filter cars with price greater than 150000  
  24. const myCars = cars.filter((element) => {  
  25.     return element.price > 150000  
  26. })  
  27. /** myCars = [ {model: "ford mustang", price: 170000} 
  28. {model: "lamborghini gallardo", price: 200000} 
  29. {model: "bentley mulsanne", price: 210000} 
  30. {model: "rolls royce phantom", price: 260000} 
  31. {model: "ferrari california", price: 320000} 
  32. ] 
  33.   
  34. */  

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:
  1. let myCars = [{  
  2.     model: 'ferrari california',  
  3.     price: 100000  
  4. }, {  
  5.     model: 'maserati quattroporte',  
  6.     price: 140000  
  7. }, {  
  8.     model: 'ford mustang',  
  9.     price: 170000  
  10. }, {  
  11.     model: 'lamborghini aventador',  
  12.     price: 200000  
  13. }, {  
  14.     model: 'bentley continental',  
  15.     price: 210000  
  16. }, {  
  17.     model: 'rolls royce ghost',  
  18.     price: 260000  
  19. }, {  
  20.     model: 'ferrari portifino',  
  21.     price: 320000  
  22. }, ]  
  23. // we want to know the total worth of myCars  
  24. myCars = myCars.reduce((worth, car) => {  
  25.     return worth + car.price  
  26. }, 0)  
  27. // 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:
  1. let myCars = [{  
  2.     model: 'ferrari portofino',  
  3.     price: 100000  
  4. }, {  
  5.     model: 'maserati quattroporte',  
  6.     price: 140000  
  7. }, {  
  8.     model: 'ford mustang',  
  9.     price: 170000  
  10. }, {  
  11.     model: 'lamborghini gallardo',  
  12.     price: 200000  
  13. }, {  
  14.     model: 'bentley mulsanne',  
  15.     price: 210000  
  16. }, {  
  17.     model: 'rolls royce phantom',  
  18.     price: 260000  
  19. }, {  
  20.     model: 'ferrari california',  
  21.     price: 320000  
  22. }, ]  
  23. // we want to find the first car with price > 150000  
  24. myCars = myCars.find((car) => {  
  25.     return car.price > 150000  
  26. })  
  27. // 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:
  1. let myCars = [{  
  2.     model: 'ferrari portofino',  
  3.     price: 100000  
  4. }, {  
  5.     model: 'maserati quattroporte',  
  6.     price: 140000  
  7. }, {  
  8.     model: 'ford mustang',  
  9.     price: 170000  
  10. }, {  
  11.     model: 'lamborghini gallardo',  
  12.     price: 200000  
  13. }, {  
  14.     model: 'bentley mulsanne',  
  15.     price: 210000  
  16. }, {  
  17.     model: 'rolls royce phantom',  
  18.     price: 260000  
  19. }, {  
  20.     model: 'ferrari california',  
  21.     price: 320000  
  22. }, ]  
  23. /** 
  24.   * 
  25.  
  26.    we want to check if  
  27.   1. all the cars have price > 150000 
  28.   2. all the cars have price > 50000 
  29.   * */  
  30. myCars = myCars.every((car) => {  
  31.     return car.price > 150000  
  32. })  
  33. // 1. mycars = false  
  34. myCars = myCars.every((car) => {  
  35.     return car.price > 50000  
  36. })  
  37. // 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:
  1. let myCars = [{  
  2.     model: 'ferrari portofino',  
  3.     price: 100000  
  4. }, {  
  5.     model: 'maserati quattroporte',  
  6.     price: 140000  
  7. }, {  
  8.     model: 'ford mustang',  
  9.     price: 170000  
  10. }, {  
  11.     model: 'lamborghini gallardo',  
  12.     price: 200000  
  13. }, {  
  14.     model: 'bentley mulsanne',  
  15.     price: 210000  
  16. }, {  
  17.     model: 'rolls royce phantom',  
  18.     price: 260000  
  19. }, {  
  20.     model: 'ferrari california',  
  21.     price: 320000  
  22. }, ]  
  23. /** 
  24.   * 
  25.  
  26.    we want to check if any of the car has price > 300000 
  27.   * */  
  28. myCars = myCars.some((car) => {  
  29.     return car.price > 150000  
  30. })  
  31. // 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.
  1. const cities = [{  
  2.     city: 'Gurgaon',  
  3.     population: 99000  
  4. }, {  
  5.     city: 'Seattle',  
  6.     population: 108000  
  7. }, {  
  8.     city: 'London',  
  9.     population: 91000  
  10. }, {  
  11.     city: 'Milan',  
  12.     population: 100000  
  13. }, {  
  14.     city: 'Athens',  
  15.     population: 120000  
  16. }, {  
  17.     city: 'sydney',  
  18.     population: 88000  
  19. }, {  
  20.     city: 'Toronto',  
  21.     population: 55000  
  22. }, {  
  23.     city: 'Tokyo',  
  24.     population: 92000  
  25. }, {  
  26.     city: 'Berlin',  
  27.     population: 110000  
  28. }, {  
  29.     city: 'Jakarta',  
  30.     population: 11000  
  31. }, {  
  32.     city: 'Moscow',  
  33.     population: 199000  
  34. }, {  
  35.     city: 'Zurich',  
  36.     population: 65000  
  37. }, ]  
  38. /** 
  39.  * map function 
  40.  *  
  41.  * divide the population of each city by 1000 
  42.  */  
  43. let mapResult = cities.map((city) => {  
  44.     return city.population / 1000  
  45. })  
  46. // mapResult = [99, 108, 91, 100, 120, 88, 55, 92, 110, 11, 199, 65]  
  47. /** 
  48.  * filter function 
  49.  *  
  50.  * get cities with a population greater than 100000 
  51.  */  
  52. let filterResult = cities.filter((city) => {  
  53.     return city.population > 100000  
  54. })  
  55. /* 
  56.   filterResult =  [    {city: "Seattle", population: 108000}, 
  57.                        {city: "Athens", population: 120000}, 
  58.                        {city: "Berlin", population: 110000}, 
  59.                        {city: "Moscow", population: 199000} 
  60.                    ] 
  61.  
  62.  */  
  63. /** 
  64.  * find function 
  65.  *  
  66.  * get a city with a population greater than 100000 
  67.  */  
  68. let findResult = cities.find((city) => {  
  69.     return city.population > 100000  
  70. })  
  71. // findResult = {city: "Seattle", population: 108000}  
  72. /** 
  73.  * reduce function 
  74.  *  
  75.  * get total population 
  76.  */  
  77. let reduceResult = cities.reduce((population, city) => {  
  78.     return population + city.population  
  79. }, 0)  
  80. // reduceResult = 1138000  
  81. /** 
  82.  * every function 
  83.  *  
  84.  * check if all the cities have population greater tha 50000 
  85.  *  
  86.  */  
  87. let everyResult = cities.every((city) => {  
  88.     return city.population > 50000  
  89. })  
  90. // everyResult = false  
  91. /** 
  92.  * some function 
  93.  *  
  94.  * check if any of the city have population greater tha 50000 
  95.  *  
  96.  */  
  97. let someResult = cities.every((city) => {  
  98.     return city.population > 50000  
  99. })  
  100. // someResult = true  
For any query or suggestion, you can get in touch with me @ https://twitter.com/nitinmanocha16


Similar Articles