More Functions (JavaScript)
Since ES6 was introduced, there is an easier way to write functions. A simple example is given below;
const haloArray = [];
const halo = function (
storeLocation,
numberOfGames = 1,
totalPrice = numberOfGames * 50
) {
const pricePerGame = {
storeLocation,
numberOfGames,
totalPrice,
};
console.log(pricePerGame);
haloArray.push(pricePerGame);
};
halo(‘EB Games’, 5);
halo(undefined, 4, 65);
halo(2010, undefined, 50);
Since there was no default parameter set on the Store Location, it will return undefined. However, since there is already a default parameter set for the other two values, it will always return those two values respectively, if you have not used any value on it. When calling the Function, an argument cannot be skipped. For example, if we were to call halo(3, 150) skipping the storeLocation parameter, it will recognize the storeLocation parameter as 3. This is because JavaScript only has passing by value, not passing by reference.
First-Class Functions and High Order Functions
First-Class Functions is a feature that is either available in the Programming Language or it isn’t. JavaScript supports First-Class Functions. This makes it possible to use Higher-Order Functions.
The meaning of First-Class Functions is that in that stated language, the functions are treated like variables. This means that they can either be assigned to a variable, passed as an argument or returned by a different function.
The meaning of a Higher-Order Function is that these functions take at least one First-Class Function as their parameter or will return at least one First-Class Function.
Using Higher-Order Functions
First, we write code that a Function is able to accept other callback functions;
const oneWord = function (variable) {
return variable.replace(/ /g, ‘’).toLowerCase();
};
const upperFirstWord = function (variable) {
const [first, …others] = variable.split(‘ ‘);
return [first.toUpperCase(), …others].join(‘ ‘);
};
Then, we write a Higher-Order Function to take in that Function above;
const testFunction = function (variable, fn) {
console.log(variable);
console.log(`Modified String : ${fn(variable)}`);
console.log(`Modified By : ${fn.name}`);
};
testFunction(‘Halo 3’, upperFirstWord);
testFunction(‘Halo 3’, oneWord);
The above screenshot showcases how the String is modified by the callback function which was used.
Callback Functions
Callback Functions help us to create Abstraction. Abstraction mainly helps to hide the detail inside the code implementation. A simple example is given below;
const clickFunction = function () {
console.log(‘Clicked’);
};
document.body.addEventListener(‘click’, clickFunction);
We add an Event Listener to help use the Callback Function. In this instance, the Event Listener is the Higher-Order Function. If we clicked on the html, we would get (x) amount of Clicks, depending on how many times we clicked the body of the html.
Functions returning other Functions
const buyGame = function (game) {
return function (user) {
console.log(`${game} ${user}`);
};
};
const game = buyGame(`Its time to buy Halo Infinite,`);
game(‘Steven’);
game(‘Roger’);
Once we write an initial function, we return that new function in a stored variable as given above. Then, we call that variable in the function using the parameters. We can also call it like this;
buyGame(‘Its time to buy Halo Infinite,’)(‘Matthew’);
This will generate the same result as the one given above.
