This is something that intimidates me a lot. I've done lots of simple functions - mostly ones with event listeners. Even the name intimidates me. It sounds much to advanced for my art educated brain.
What is a higher order function?
It's a function that accepts and/or returns another function.
I did this one. The first function does some math. It takes a value and multiplies it by 2. Then I pass this function into another function that interacts with the DOM to grab an input value when the Enter button is pressed, store it in a variable and then outputs the calculated number into a string.
function multiplier(factor) {
return x => x * factor;
};
let doubler = multiplier(2);
const input = document.getElementById('number');
const answer = document.getElementById('answer');
input.addEventListener('keyup', () => {
if (event.keyCode === 13) {
const number = input.value;
answer.textContent = 'Your doubled number is: ' + doubler(number);
answer.classList.add('active');
};
});You can do your own just as I did here but JavaScript has higher order functions built into the language too. Here's a few commonly used ones:
Map()
Map() executes a callback function once for each element in a array, in order and constructs a new array.
Filter()
Filter() creates a new array with all the elements that pass a test provided by the callback function. In short it will filter items out.
Reduce()
Reduce() executes a callback function on each element of an array, resulting in a single output value.