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. ]
  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. *
  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. *
  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. ]
  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