Javascript Maps, Reduce, filter, find, findIndex: Use newer Array Methods

Javascript Maps, Reduce, filter, find, findIndex: Use newer Array Methods

In javascript array pays the key role. An array is a special variable, which can hold more than one value:

const subArray=['maths','english','social']

The newer array methods like map(), reduce() and filter() are extensively used in building projects using some library/ frameworks like Angular, react, vue.js.

  1. Map: map() creates a new array from calling a function for every array element.
Syntax: array.map(function(currentValue, index, arr), thisValue)
  • map() does not change the original array.

currentValue

  • The current element being processed in the array.

index

  • The index of the current element being processed in the array.

array

  • The array map was called upon.

thisValue(optional)

  • Value to use as this when executing callbackFn
const totalNumbers=[12,34,45,43]
const results= totalNumbers.map(x=>x*2)
console.log(results)

2.Reduce

array.Reduce() method takes a reducer function (provided by us), executes this reducer function for every element in the Array, and results in a single value.

Syntax

 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • The reduce() method does not change the original array and it returns single value.

  • Let's take an array and we need to subtract all elements in an array.

const subtractNum=[175, 50, 25]
const resultNum= subtractNum.reduce((accumulator,currentValue)=>accumulator-currentValue)

console.log(resultNum)

Let's review the code

  • accumulator which is pointed to the index of first value of the array i.e., 175

  • currentElement is 50 , in the first iteration.

  • final result willbe accumultor - currentValue , 175-50 = 125;
  • This 125 again will be stored in accumulator and the currentvalue is 25
  • Finally 125- 25 will give 100 as result.

3.Filter

  • Array.filter() method creates a new array with the elements for which the provided function to filter() returns true.
  • The filter() method does not change the original array.
const greaterValues=[2,5,-1,6,7,8]

const newValues=greaterValues.filter((num)=>num>0);
console.log(newValues) //2,5,6,7,8

4.find()

  • The find() method returns the value of the first element that passes a test.

  • The find() method returns undefined if no elements are found.

  • The find() method does not change the original array.
const ages = [3, 10, 18, 20,45];

function checkAge(age) {
  return age > 18;
}

console.log(ages.find(checkAge)) // 20

5.findIndex()

  • The findIndex() method executes a function for each array element.
  • The findIndex() method returns the index (position) of the first element that passes a test.
  • It returns -1 if no matches found and also it doesn't change the original array.
const ages = [3, 10, 18, 4,67,45];

function checkAge(age) {
  return age > 18;
}

console.log(ages.findIndex(checkAge))

https://twitter.com/iamvenkatdas

I hope it was a great read for you. If you have any feedback please share it in the comment below.

Did you find this article valuable?

Support Venkat Das by becoming a sponsor. Any amount is appreciated!