Array.map() :
a map function is used to map through an array, but unlike the regularforEach or for, map function returns an array
For Example, let's say we want to add two to every number in an array of numbers
If we want to do this with our regularforEach, we will do it this way:
const numArr = [1,2,3,4,5,6,7,8,9,10]const newNumArr = []numArr.forEach((num)=>{ newNumArr.push(num + 2)})console.log(newNumArr)We get the result we want but, remember if we are doing functional programming at its core, we wouldn't want to be mutating state..
This is now where we can make use of a higher-order function:
const numArr = [1,2,3,4,5,6,7,8,9,10]const newNumArr = numArr.map(num => num + 2)console.log(newNumArr)Apart from that the code is more readable and precise, you should also notice that we do not have reason to reassign or mutate any variable..
That's one of the reasons we use higher-order function
Array.reduce()
Let's say we want to want to add all the numbers in an array of numbers, using ourforEach loop, we would write something like this:
const numArr = [1,2,3,4,5,6,7,8,9,10]let accumulatedSum = 0numArr.forEach(num => { accumulatedSum += num} )console.log(accumulatedSum)ThoughforEach is still a higher-order function but remember we want to avoid mutating states..
We can use thereduce() function to achieve what we want :
const numArr = [1,2,3,4,5,6,7,8,9,10]const arrSum = numArr.reduce((accumulator,currentValue)=> accumulator + currentValue,0)console.log(arrSum)In case you have not used the reduce function before, let me explain;
Thereduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise, the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).
callbackFunction
A function to execute for each element in the array. Its return value becomes the value of the accumulator parameter on the next invocation ofcallbackFunction. For the last invocation, the return value becomes the return value of reduce().
The function is called with the following arguments:
accumulator
The value resulting from the previous call tocallbackFunction. On the first call,initialValue if specified, otherwise the value of array[0].
currentValue
The value of the current element. On the first call, the value of array[0] if aninitialValue was specified, otherwise the value of array[1].
currentIndex
The index position ofcurrentValue in the array. On the first call, 0 ifinitialValue was specified, otherwise 1.
array
The arrayreduce() was called upon.
initialValue Optional
A value to whichaccumulator is initialized the first time the callback is called. IfinitialValue is specified,callbackFunction starts executing with the first value in the array ascurrentValue. IfinitialValue is not specified,accumulator is initialized to the first value in the array, andcallbackFunctiion starts executing with the second value in the array ascurrentValue. In this case, if the array is empty (so that there's no first value to return asaccumulator), an error is thrown.
So the complete syntax for reduce is
Array.reduce((accumulator,currentValue,currentIndex)=>{// write your reducer logic here},initialValue)We can perform a few more complex tasks usingreduce():
Let's say we have an array containing the objects of the student's name, age, and state of origin and we want to have a method that we can use to group the student list
by any of the three fields(name,age orstate of origin)
const students = [ { name: "Mike", age: 10,stateOfOrigin:"Niger" }, { name: "Max", age: 12,stateOfOrigin:"Oyo" }, { name: "Jane", age: 15,stateOfOrigin:"Abia" }, { name: "Adora", age: 13,stateOfOrigin:"Benue" }, { name: "Aishat", age: 14, stateOfOrigin: "Rivers" }, { name: "Abu", age: 15,stateOfOrigin:"Adamawa" }, { name: "Abraham", age: 14,stateOfOrigin:"Adamawa" }, { name: "Tunmise", age: 15,stateOfOrigin:"Oyo" }, ]; const groupBy = (studentData,groupByProperty) => { return studentData.reduce((accumulated,currentObj)=>{ const key = currentObj[groupByProperty] const currentGroup = accumulated[key] ?? [] return {...accumulated,[key]:[...currentGroup,currentObj]} },{}) } const groupedStudentByState = groupBy(students,"stateOfOrigin") console.log(groupedStudentByState)In the snippet above, we have an array of student data and we also have a function to group the data we have.
In the groupBy function, we are returning the grouped data directly, the function takes in two arguments; the studentData and the groupByProperty, We are using a
reduce() function on the studentData; following the syntax for reduce(), we have a callback function that takes in accumulated data, the current value as parameters,
we also have the initial value which is an empty object { }.
Making your own higher-order function in JavaScript
Let's say you are working on a project with different folders,for example, express js and you have the models, controllers, routes, etc folders
When you write a function and you want to track if an error occurred or not when the function is called, you can pass in acallBack into the function.
For Example
// models/const insertDataToDB = (...args,callBackFn) =>{ db.query(...,[],(err,res)=>{ if(err){ callBackFn(err,null) }if(res){ callBackFn(null,res)}})}export {insertDataToDB}// controller/import {insertDataToDB} from "../models/..."const insertData = (req,res)=>{ insertDataToDB(req.body,(error,data)=>{ if(error){ res.status(500).json({...error}) }if(data){res.status(200).json({...data})}})}In the insertToDB function, we passed in a callBack into the function so when we call the function in the controller, we can check if an error occured or not and we can respond to the request.
I really hope you have learned a lot through this article, check up some of the code snippets in this article onGitHub do well to like and share this post and also follow me on Twitter and LinkedIn to get more updates from me, thank you see you soon.
Pro tip: You can add syntax highlighting to your code by adding the language after the first ticks (e.g. javascript). Makes it easier to read :-)
consthelloWorld="Hello world";
Thanks Kasper
Nice article Oluwatobi 👏🏽...
I think I need more context to this line if it isn't an oversight.
arguments are used when a function is declared but parameters are used when the function is called
Is argument not used when you want to invoke a function, while parameters are used when you declare the function?
Alright Mubarak, that was a mistake it's actually the other way round thank you for the quick notice
For further actions, you may consider blocking this person and/orreporting abuse
