Functions in JavaScript have more secrets than you might think

Speaking of Javascript, it is impossible not to mention the function , not only that, it is also considered as a brand face of this language. But not many people really understand each type of function . Below will be specific types of function that you may have used but do not really know about it.

Pure Function

How is a pure function ?

Functions that satisfy both of the following conditions are called pure function :

• That function will always return the same result if we pass the same parameters.
• No side effects occurred while running that function.

Example 1:

As you can see, if you pass a radius of equal value then the circleArea function will always return the same result. And running this circleArea function has no effect outside of this function, so this is a pure function.
Example 2:

The above counter() function will return a different result each time, so this is not a pure function.
Example 3:

In the above example, the isMale function, although always returns the same result when passing the same parameter, but besides, this function also performs the counter function (changes the value of a global variable – out of the scope of the function) that leads to this function being no longer pure.

What is a pure function used for?

Why do we differentiate between a pure function from another? Because pure functions have so many advantages, no, we can also use pure functions to improve the quality of our code:
1. pure function much clearer and easier to read.
Every purely written function always has a specific function, always returning a clear result. This partly makes your code easier to understand, easier to apply.
2. The compiler can optimize more on pure functions
Try the example with the following code:

If fun not a pure function, then fun(10) would need to be executed 1000 times while the code above is running.
But if fun was a pure function, the editor would be able to optimize the code at compile time, to put it simply, the compiled code would look like this:

3. pure function is easier to test
Testing with a pure function is quite simple, since the function is not affected by external values. You simply pass a value and add it to a specific formula, then the output must be the result, no matter how many times you run it, you will show the correct result.

Higher-Order Function

What is considered a higher-order function?

• Take one or more functions as an argument
• A return is a function as its result.

Using a higher-order function increases the flexibility of your code, allowing us to write more concise and efficient code.
A simple example is that the input is 1 array A, the output is an array B twice the value of array A. With normal writing, the code in javascript will look like this:

In javascript there is a built-in function to do this, which is map()

The map (callback) method helps create a new array with the elements resulting from the execution of a function on each element of the called array.

Function Caching

Let’s say we have a pure function that looks like this:

To speed up the processing of this function, we need to save the result of that function (cache that result). When it is last called, if the parameter is the same as the previous one, the function will not be executed, and the cache results will be returned, is this applicable?
In fact, we can write a cached function around the target_function we want to cached . This cached function will take target_function as an argument and return a new function. Inside this cached function, we need to cache the result of the previous target_function run as an Object or Map :

And this is the result:

Lazy Function

The body of some functions usually contains a number of conditional statements. And sometimes these statements are only executed once.
In cases like these we can improve the performance of the function, simply discarding the conditional statement, so that the function does not need to execute these statements on subsequent executions. The above action has turned that function into a lazy function .
For example, you need to write a function foo , which will always return a Date object on the first run. Note is lần chạy đầu tiên .

As you can see, every time you run foo , you will always run the conditional statement. It doesn’t matter if this is just a simple conditional statement, but what if the if-else is based on the results of many functions and takes quite a bit of runtime? In this case, use the lazy function to optimize your code:

After the first execution, we overwrite the original function with the new function. When this function is executed in the future, the conditional statement will no longer be executed. This will somewhat improve the performance of the code we write.
Let’s try with a more specific example:
When we add DOM events to the element, in order to be compatible with modern browsers and IE, we need to make judgment about the browser environment:

Every time we call the addEvent function, we must make the judgment. This is when we use the lazy function

Function Currying

Currying is a technique of evaluating a function with multiple arguments, into a series of functions with a single argument.
In other words, when a function, instead of taking all the arguments at once, takes the first argument and returns a new function that takes the second argument and returns a new function that takes the third argument, etc. until all the arguments are over.
Why use currying function ?

• Currying helps you avoid switching back and forth of the same variable
• It helps to generate a higher-order functio . It is extremely useful in event handling.
• The small pieces can be easily configured and reused.

Let’s take a look at a simple example of the add function that takes 3 arguments:

Try calling that function with less than 3, or more than 3 parameters passed:

How to convert an existing function into a function currying :

Function Compose

Let’s say we now need to write a function that does this:

Input ‘bitfish’, return ‘HELLO, BITFISH’.

We could write the code like this:

As you can see, there are only 2 steps to be performed in the above example (1. converting to uppercase, 2. linking words), but if the problem has more requirements, then write a function nested processing functions like this fn3(fn2(fn1(fn0(x))))
To do this, we can write a specific compose function for the above processor functions:

Using compose functions to combine two functions into a single function causes code to run from right to left, instead of inside and out, making the code much more readable.