Of Stack

Introduction to Javascript higher order functions

  • 2020-06-15 07:37:59
  • OfStack

Higher-order functions (ES1en-ES2en function) - If a function receives or returns a value that is a function, it is called a higher-order function. As we all know, JavaScript is a weakly typed language :JavaScript's functions do not strongly define or type check the output value of the function, so the function can be either a parameter or an output value, which reflects JavaScript's native support for higher-order functions.

1. Higher-order function of the function: 


function funcTest(f){  
// Summary judgment 1 Whether the lower argument is a function 
if((typeof f)== " function " ){
f();
}}
funcTest(function(){ });

This is a simple higher-order function that takes arguments as functions. When you call funcTest, you enter a function as an argument, and the anonymous function that executes the input inside funcTest is of course meaningless.

1. The return value is the higher-order function of the function: 


function funcTest(){
return function(){};
}
var f=funcTest();

Calling funcTest returns 1 function.

2. A complex 1 example: 


//Number Type additive   
function addInt(a,b){
return parseInt(a)+parseInt(b);
 }
//String Type additive 
function addString(a,b){
return a.toString()+ b.toString(); 
}  
function add(type){
if(type==="string"){
return addString;
}else{
return addInt; 
}
}
var data1=add("string")("1","2");
//12
var data2=add("int")("1","2");
//3

The above example implements the separation of adding 1 String type and adding Number type. Call add function if the input parameter is "string", output 1 string concatenation function; If the input parameter is "int", the numeric addition function is output.

3. Practical functions of higher-order functions:

The above code example basically shows what higher-order functions are, so let's see how higher-order functions relate to our actual programming:

1, callback function 


function callback(value){
alert(value);
}
function funcTest(value,f)
//f Argument detection, check f Is it a function  
if(typeof callback==='function'){
f(value);}}funcTest( ' 1',callback);
//1

When the example calls funcTest, the callback function is called internally by funcTest, which implements the callback.

2. Data filtering and sorting algorithm 


var arr=[0,2,11,9,7,5];
// Sorting algorithm 
function funcComp(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0;
}
}
// Filtering algorithm 
function funcFilter(item,index,array){
return item>=5;
}
// Array ordering 
arr.sort(funcComp);
alert(arr.join(','));
//0,2,5,7,9,11
// Filter array 
var arrFilter=arr.filter(funcFilter);
alert(arr.join( ' ,'))
//5,7,9,11

3. DOM element event definition 


<html><title></title>
<body><input type= " button "  value= " ClickMe "  id= " myBtn "  >
<script type= " text/javascript>
var btnClick=document.getElementById( " myBtn " );
// The test environment is FireFox
btnClick. addEventListener( " click " ,function(e){
alert( " I'm a button! " );
//I'm a button},false);
</script>
</body>
</html>

In the above example, the document defines a button for id as myBtn and the js script adds a click event to it, where the second argument to addEventListener is a function.

Conclusion: Higher-order functions are not proprietary to JavaScript, but they are definitely a powerful tool in JavaScript programming. Higher-order functions are actually re-abstractions of basic algorithms. We can use this point to increase the abstraction of code, achieve maximum code reuse, and write cleaner and more refactored code.

Related articles: