First and foremost, when we talked about closure, most likely it means a function is returning with another function.
We have used a greater than validation
as our closure in example below:
function greaterThanValidation(minNumber){
return function (x, y){
if(typeof(x) !== 'number' || typeof(y) !== 'number')
throw new Error("Invalid Argument Type")
if((x+y) > minNumber)
return true
else
return false
}
}
try {
const validation = greaterThanValidation(10)
const result = validation(2,10)
console.log("result >> ", result)
} catch (error) {
console.error(error.message)
}
Explanation
- As you can see, we have declared a outer function called
greaterThanValidation
which takes in 1 argument and returning a new function wich accepts 2 argument. - Inside the inner function, we will first check the type of the input and throw an
Error
if either one is notnumber
type - Once it pass the inner function condition, it will execute the functionality of the function which is:
- return
true
if sum of x and y is greater than the minumum number which is pass from the outer function - return
false
if sum of x and y is not greater than the minumum number.
- return
- For execute the closure, it’s pretty straight forward:
- First, we need to declare the parameter or value to be passed in the outer closure function
- Since the outer function is returning a new function, we can then execute the code from inner function by calling the
validation
outer function
Why is it useful
Based on the example above, we might not realized how useful the closure is. However, one of the thing I like closure the most is, it actually store the outer function parameter value in the memory and be ready for any moment you want to access it in the inner function in anytime. Especially when the outer function parameter value is actually get from an API or not hardcoded / declared inside the outer function.
In short, closure most of the time is saying a function is returning another function. Once we declared and passed in the value for outer function, it will actually store in the memory and the inner function will able to access all of the variable from the outer function
Beautify the code with ES6 Arrow function
We also beautify the code by converting them into ES6 Arrow function manner
const anotherGreaterThanValidation = minNumber => (x,y) => {
if(typeof(x) !== 'number' || typeof(y) !== 'number')
throw new Error("Invalid Argument Type")
if((x+y) > minNumber)
return true
else
return false
}