[Higher order functions](https://medium.com/better-programming/the-power-of-higher-order-functions-in-javascript-91fc8edc3a7a?source=---------25------------------) is arguably one of the best things that ever happened in the JavaScript language. They're used extensively for good reasons! If you don't know what a higher order function is, they are simply functions that take other functions as arguments, or functions that return a function as their result. When I was new to JavaScript, it took awhile for me to understand what they were, so if you're in this position then hopefully after going through this post you will have a clearer understanding of them. With that said, here are 5 Examples of Higher Order Functions in JavaScript for Better Understanding: ## 1. `.map`, `.forEach`, etc. If you're new to JavaScript even for just a day, you've most likely already been working with higher order functions through native JavaScript array methods like `.map`. The snippet below loops over an array and _invokes a function_ on each item until it has reached the last item. The capability of _taking a function that it can invoke_ is what makes it a higher order function: ```javascript function prefixWordWithUnderscore(word) { return `_${word}` } const words = ['coffee', 'apple', 'orange', 'phone', 'starbucks'] const prefixedWords = words.map(prefixWordWithUnderscore) // result: ["_coffee", "_apple", "_orange", "_phone", "_starbucks"] ``` ## 2. Using higher order functions to support multiple variations of an operation Sometimes we could end up deciding to create a higher order function _so that we can use it to create more variations_ of a desired operation. In the example below, a basic `utilizePrefixer` function is a higher order function that returns a function that takes a `word` as an argument and applies the prefix to the value that is being returned. ```js function utilizePrefixer(prefix) { return function(word) { return `${prefix}${word}` } } const withMoneySign = utilizePrefixer('$') const withCompanyName = utilizePrefixer('Fandango') const tenDollars = withMoneySign('9.99') const formHeader = withCompanyName( ' is the company you will be applying for today', ) console.log(tenDollars) console.log(formHeader) ``` ## 3. Reversing the control Whenever you're in a situation where you need to refactor a bunch of code that is pointing towards one function you can create an enhanced function that can reverse the direction your code goes through. I'm going to copy and paste an example from an older post because it's a solid example to get this point across: At my previous job, we used [react-toastify](https://github.com/fkhadra/react-toastify) to display notifications. We used it _every where_. In addition, they also make great escape hatches for quick last minute UX decisions: "How should we handle this error? Just display a toast notification!" Done. However, we started noticing that when the app became larger and the level of complexity was creeping up on us, our toast notifications were becoming too frequent. This is fine--however, we didn't have a way of preventing duplicates. This meant that some toast notifications were showing up multiple times on the screen even when they were _exactly the same_ as the toast above it. So we ended up leveraging the api that the library provides to help remove active toast notifications by _id_ using _toast.dismiss()_. In order to explain the parts ahead, it's probably a good idea to show the file we were importing toasts from before proceeding: ```jsx import React from 'react' import { GoCheck, GoAlert } from 'react-icons/go' import { FaInfoCircle } from 'react-icons/fa' import { MdPriorityHigh } from 'react-icons/md' import { toast } from 'react-toastify' /* Calling these toasts most likely happens in the UI 100% of the time. So it is safe to render components/elements as toasts. */ // Keeping all the toast ids used throughout the app here so we can easily manage/update over time // This used to show only one toast at a time so the user doesn't get spammed with toast popups export const toastIds = { // APP internetOnline: 'internet-online', internetOffline: 'internet-offline', retryInternet: 'internet-retry', } // Note: this toast && is a conditional escape hatch for unit testing to avoid an error. const getDefaultOptions = (options) => ({ position: toast && toast.POSITION.BOTTOM_RIGHT, ...options, }) const Toast = ({ children, success, error, info, warning }) => { let componentChildren // Sometimes we are having an "object is not valid as a react child" error and children magically becomes an API error response, so we must use this fallback string if (!React.isValidElement(children) && typeof children !== 'string') { componentChildren = 'An error occurred' } else { componentChildren = children } let Icon = GoAlert if (success) Icon = GoCheck if (error) Icon = GoAlert if (info) Icon = FaInfoCircle if (warning) Icon = MdPriorityHigh return (

{componentChildren}

) } export const success = (msg, opts) => { return toast.success({msg}, { className: 'toast-success', ...getDefaultOptions(), ...opts, }) } export const error = (msg, opts) => { return toast.error({msg}, { className: 'toast-error', ...getDefaultOptions(), ...opts, }) } export const info = (msg, opts) => { return toast.info({msg}, { className: 'toast-info', ...getDefaultOptions(), ...opts, }) } export const warn = (msg, opts) => { return toast.warn({msg}, { className: 'toast-warn', ...getDefaultOptions(), ...opts, }) } export const neutral = (msg, opts) => { return toast({msg}, { className: 'toast-default', ...getDefaultOptions(), ...opts, }) } ``` Now bear with me, I know this might not look appealing. But I promise it will get better in two minutes. This is what we had in a separate component to check if a previous toast was already on the screen. And if there was, it will attempt to remove that toast and re-display the new toast. ```jsx import { toast } from 'react-toastify' import { info as toastInfo, success as toastSuccess, toastIds, } from 'util/toast' const onOnline = () => { if (toast.isActive(toastIds.internetOffline)) { toast.dismiss(toastIds.internetOffline) } if (toast.isActive(toastIds.retryInternet)) { toast.dismiss(toastIds.retryInternet) } if (!toast.isActive(toastIds.internetOnline)) { toastSuccess('You are now reconnected to the internet.', { position: 'bottom-center', toastId: toastIds.internetOnline, }) } } const onOffline = () => { if (!toast.isActive(toastIds.internetOffline)) { toastInfo('You are disconnected from the internet right now.', { position: 'bottom-center', autoClose: false, toastId: toastIds.internetOffline, }) } } useInternet({ onOnline, onOffline }) return ``` This was working fine--however, we had other toasts throughout the app that needed to be modified the same way. We had to go through every file that displays a toast nofication to remove duplicates. When we think of _going through every file_ in 2019, we immediately knew that it wasn't the solution. So we looked at the `util/toast.js` file and refactored that to solve our problem instead. Here's what it looked like afterwards: > src/util/toast.js ```jsx import React, { isValidElement } from 'react' import isString from 'lodash/isString' import isFunction from 'lodash/isFunction' import { GoCheck, GoAlert } from 'react-icons/go' import { FaInfoCircle } from 'react-icons/fa' import { MdPriorityHigh } from 'react-icons/md' import { toast } from 'react-toastify' /* Calling these toasts most likely happens in the UI 100% of the time. So it is safe to render components/elements as toasts. */ // Keeping all the toast ids used throughout the app here so we can easily manage/update over time // This used to show only one toast at a time so the user doesn't get spammed with toast popups export const toastIds = { // APP internetOnline: 'internet-online', internetOffline: 'internet-offline', retryInternet: 'internet-retry', } // Note: this toast && is a conditional escape hatch for unit testing to avoid an error. const getDefaultOptions = (options) => ({ position: toast && toast.POSITION.BOTTOM_RIGHT, ...options, }) const Toast = ({ children, success, error, info, warning }) => { let componentChildren // Sometimes we are having an "object is not valid as a react child" error and children magically becomes an API error response, so we must use this fallback string if (!isValidElement(children) && !isString(children)) { componentChildren = 'An error occurred' } else { componentChildren = children } let Icon = GoAlert if (success) Icon = GoCheck if (error) Icon = GoAlert if (info) Icon = FaInfoCircle if (warning) Icon = MdPriorityHigh return (

{componentChildren}

) } const toaster = (function() { // Attempt to remove a duplicate toast if it is on the screen const ensurePreviousToastIsRemoved = (toastId) => { if (toastId) { if (toast.isActive(toastId)) { toast.dismiss(toastId) } } } // Try to get the toast id if provided from options const attemptGetToastId = (msg, opts) => { let toastId if (opts && isString(opts.toastId)) { toastId = opts.toastId } else if (isString(msg)) { // We'll just make the string the id by default if its a string toastId = msg } return toastId } const handleToast = (type) => (msg, opts) => { const toastFn = toast[type] if (isFunction(toastFn)) { const toastProps = {} let className = '' const additionalOptions = {} const toastId = attemptGetToastId(msg, opts) if (toastId) additionalOptions.toastId = toastId // Makes sure that the previous toast is removed by using the id, if its still on the screen ensurePreviousToastIsRemoved(toastId) // Apply the type of toast and its props switch (type) { case 'success': toastProps.success = true className = 'toast-success' break case 'error': toastProps.error = true className = 'toast-error' break case 'info': toastProps.info = true className = 'toast-info' break case 'warn': toastProps.warning = true className - 'toast-warn' break case 'neutral': toastProps.warning = true className - 'toast-default' break default: className = 'toast-default' break } toastFn({msg}, { className, ...getDefaultOptions(), ...opts, ...additionalOptions, }) } } return { success: handleToast('success'), error: handleToast('error'), info: handleToast('info'), warn: handleToast('warn'), neutral: handleToast('neutral'), } })() export const success = toaster.success export const error = toaster.error export const info = toaster.info export const warn = toaster.warn export const neutral = toaster.neutral ``` Instead of having to go through every file, the simplest solution was to create a _higher order function_. Doing this allowed us to "reverse" the roles so that instead of us searching through files, the toasts were instead _directed to our higher order function_. This way the codes in the files were _not_ modified or _touched_. They still function as normal, and we gained the ability to remove duplicate toasts without going anywhere to write unnecessary code in the end. _This saved time_. ## 4. Composing Higher order functions begin to shine a lot more when you start to compose them. One can choose to compose for many reasons. For the example below, we compose for the reason that we want to prevent JavaScript from looping over the array of frogs over and over for each `.filter` operation: ```js function createFilterers() { const _filters = { ids: [], fns: {}, } return { addFilter(name, fn) { _filters.ids.push(name) _filters.fns[name] = fn }, removeFilter(name) { const index = _filters.ids.indexOf(name) if (index !== -1) _filters.splice(index, 1) delete _filters.fns[name] }, filter(arr) { const filters = _filters.ids.map((id) => _filters.fns[id]) return arr.reduce((acc, item) => { for (let index = 0; index < _filters.ids.length; index++) { const id = _filters.ids[index] const filter = _filters.fns[id] if (!filter(item)) { return acc } } return acc.concat(item) }, []) }, } } const frogs = [ { name: 'bobTheFrog', age: 2, gender: 'male', favoriteFood: 'fly', weight: 5, }, { name: 'lisaTheFrog', age: 3, gender: 'female', favoriteFood: 'fly', weight: 1, }, { name: 'sallyTheFrog', age: 10, gender: 'female', favoriteFood: 'caterpillar', weight: 20, }, { name: 'mikeTheFrog', age: 1, gender: 'male', favoriteFood: 'worm', weight: 8, }, { name: 'georgeTheFrog', age: 7, gender: 'male', favoriteFood: 'fly', weight: 28, }, { name: 'kellyTheFrog', age: 3, gender: 'female', favoriteFood: 'ladybug', weight: 3, }, ] const filterer = createFilterers() filterer.addFilter('fat-frogs', (frog) => { return frog.weight >= 8 }) filterer.addFilter('male-frogs', (frog) => { return frog.gender === 'male' }) const filteredFrogs = filterer.filter(frogs) console.log(filteredFrogs) ``` This can prevent us from having to write repetitive code like this everywhere in our app: ```js const filteredFrogs = frogs .filter((frog) => { return frog.weight >= 8 }) .filter((frog) => { return frog.gender === 'male' }) .filter((frog) => { return frog.name.startsWith('b') }) ``` ## 5. Internal state It's worth mentioning that when we create a higher order function we can also create some local state inside the scope and it will be cached for future operations: ```js function createMyHigherOrderFunction(options) { const state = { ...options } // Our local state object return function(...args) { return function(callback) { return callback(state, ...args) } } } const prepare = createMyHigherOrderFunction({ name: 'bobby', favoriteFood: 'steak', }) const prepareWithArgs = prepare({ country: 'United States' }) const finalize = prepareWithArgs((state, options) => ({ ...state, ...options })) console.log(finalize) /* result: { country: "United States", favoriteFood: "steak", name: "bobby" } */ ```

Posts tagged “inversion”

5 Examples of Higher Order Functions in JavaScript for Better Understanding