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.