Invoking multiple functions on a single element

In this post, I'll be going over a relatively simple way of invoking multiple functions upon a single element. Both the elements and the functions will be relegated to their own respective arrays. We'll also be populating an empty object with the elements as the keys and the values as an array of the invoked functions on each element. Let's gooooo!

So here's what we'll be working with:

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

const items = ['catfood', 'glue', 'beer'];

const functions = [uppercaser, capitalize, repeater];

We have three functions, assigned to the functions array and three string elements assigned to the items array. Our goal is to populate an empty object with the elements in items as the keys and we want to invoke every function from functions upon each one of the elements in items. So basically, apply those three functions on each element from items.

Let's declare our function that takes in both of the arrays and sets up an empty object:

const multiMap = (items, functions) => {
  const obj = {};
}

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

const items = ['catfood', 'glue', 'beer'];

const functions = [uppercaser, capitalize, repeater];

We're going to use the .forEach() method on the items parameter/argument to loop through each element within that array, but here's where it gets interesting:

Once we call the .forEach() method on that array, we're going to simultaneously populate our empty object obj with each element from items as the key while also assigning the value for obj with every single function that's inside of the functions array:

const multiMap = (items, functions) => {
  const obj = {};
  items.forEach(item => {
    obj[item] = functions.map(callback => callback(item))
  }); return obj;
}

const uppercaser = str => str.toUpperCase();

const capitalize = str => str[0].toUpperCase() + str.slice(1);

const repeater = str => str + str;

const items = ['catfood', 'glue', 'beer'];

const functions = [uppercaser, capitalize, repeater];

We end the function by returning obj at the end of the .forEach() method. Our output will look something like this:

{ 
catfood: ['CATFOOD', 'Catfood', 'catfoodcatfood'], 
glue: ['GLUE', 'Glue', 'glueglue'], 
beer: ['BEER', 'Beer', 'beerbeer'] 
}

The way this works is that .forEach() will loop through every element in the items array and then we're populating obj with each one of those elements in items as the key. The .map() method will then apply every function in functions to each element in items and return every value from those three functions in an array, since .map() returns a new array.

I hope this was helpful for you! Keep fighting the good fight!

<3<3<3