Array methods(map,filter,reduce&sort)

map() method
It is a JavaScript higher order function of arrays which accepts a function as an argument(input)
and it executes that input function( callback function) on each element of the array.

•On each iteration, array element,index,full array will be passed to that callback function.

•Creates a new array with the returned value of callback function on each iteration.

•That newly created array will be returned from map method

•It does NOT modify the original array.

• It doesn't execute the callback function for an empty array.

•Call back function can be any JavaScript function like arrow function, named function or

Anonymous function

Syntax: arrayname.map(function(ele,index,array){})

let nums = [1000,2000,3000];

let res =langs.map(

(ele,index,arr)=>{

console.log(ele,index,arr);

return ele+10

console.log(res)
//[1010,2010,3010];

In the above code we are passing an arrow function as input to map method on array nums,

So map method will call that arrow function for each element, in that function we are returning

ele+10 .so all these returned values are stored in a new array & will be returned from map
method, then stored in res variable.

@csworldtelugu
filter() method
It is a JavaScript higher order function of arrays which accepts a function as an argument(input)
and it executes that input function( callback function) on each element of the array.used to filter
elements of array based on some criteria.

•On each iteration, array element,index,full array will be passed to that callback function.

•we have to write some condition in return statement of that callback function

•Creates a new array which contains those elements of array which has true returned from
callback function.only the elements met the condition in return statement will be present

In returned array.

•That newly created array will be returned from filter method

•It does NOT modify the original array.

• It doesn't execute the callback function for an empty array.

Syntax: arrayname.filter(function(ele,index,array){})

let nums = [1000,2000,3000];

let res =langs.filter(

(ele,index,arr)=>{

console.log(ele,index,arr);

return ele>2000

console.log(res) //[3000];

In the above code we are passing an arrow function as input to filter method on array nums,

So filter method will call that arrow function for each element, in that function we are checking
condition ele>2000 so the elements which met this condition are stored in a new array & will
be returned from filter method, then stored in res variable.

@csworldtelugu
reduce() method
It is a JavaScript higher order function of arrays which accepts a function as an argument(input)
and an optional initialValue(accumulator)and it executes that input function on each element of
the array.

•reduce() method is used to reduce an array to single value(number/string/object/array).

•On each iteration accumulator, array element,index,full array will be passed to that callback
function.

•what ever value retuned from callback function for last element of array,same will be
returned from reduce method.

In returned array.

•It does NOT modify the original array.

• It doesn't execute the callback function for an empty array.

Syntax: arrayname.reduce(callbunction ,initialValue)

The callback function accepts four arguments :

• previousValue (return value from the previous element callback function)

• currentValue (current value being looped on in the array)

• currentIndex is the index of the currentValue

• and array is the original array.

arrayname.reduce(

function(previousValue, currentValue, currentIndex, array)

// return a value

},initialValue

@csworldtelugu
• In the first loop, if initialValue is provided, the previousValue will be initialValue,
Whatever you return from this loop will be used as the previousValue in the next loop.

• In the next loop, previousValue will be gotten from previous loop, and the currentValue will be
the second value in the array. And it goes on until the final loop, and the final return will be the end
result.

• If initialValue is not provided, the first loop will have the initialValue as the first value in the array,
and the currentValue will be the second value in the array.

• In the next loop, the returned value from the previous loop will be used as the previousValue, and
the currentValue will be the third value in the array.

• If initialValue is provided, an array of 5 items will have 5 loops since the currentValue starts from
the first item. But if initialValue is not provided, the same array will have 4 loops since the
currentValue started from the second item.

let nums = [1000,2000,3000];

let res =nums.reduce(

(prevVal,ele,index,arr)=>{
return ele+prevVal
},0

console.log(res) //6000

In the above code reduce method will return sum of all elements of the nums array .

@csworldtelugu
sort() method
This method is used to sort elements in an array in ascending or descending order. By default, it
sorts items in ascending order. we can also define the sort order using comparator function.It
modifies the original array.
Syntax: arrayname.sort() / arrayname.sort(comparator function)

If we do not provide a compare function, the array items will be converted to strings (if they aren't
strings), and the items sorted in ascending order like this:

let langs = ["html", "css", "javascript","c"]

let sorted = langs.sort()

console.log(langs) // ["c", "css" ,''html", "javascript"]

console.log(sorted) // ["c", "css" ,''html", "javascript"]

If we wanted descending order or sort numbers with out errors then need to use the compare
function.
function compareFunction(a, b) {

if (a>b) return -1
else return 1
}

langs.sort(compareFunctionn)

console.log(sorted) // ["javascript",''html","css","c"]

• In each loop, the compare function receives the first element (a) and the second element (b) for
comparison, and it does that till the last loop.

• If you want a to come before b, you return -1 (or any negative number). If you want a to come
after b, you return 1 (or any positive number).

• To sort items in ascending order, we have to apply the compare function like this:
function compareFunction(a, b) {

if (a>b)
return 1
else return -1

const sorted = langs..sort(compareFunction)

@csworldtelugu
• If we specified that if a > b, return -1, which means that a comes before b if a is greater than b ,will
result in a descending order.

• If we specified that if a > b, return 1, which means that b comes before a if a is greater than b ,will
result in a ascending order.

• We specify any sorting criteria based on requirement.

• But returning a negative number means the first comes before the second in the compare
function.

• Returning a positive number on the other hand means the first after the second in the compare
function.

@csworldtelugu