Listado completo de tutoriales

Funciones: parámetros de tipo función


Hasta ahora siempre que hemos implementado una función le hemos pasado como parámetro tipos de dato numérico, string, boolean, objetos etc.
Ahora veremos que también podemos implementar funciones que reciban como parámetro otra función.

Primero veamos un simple ejemplo para entender que una función se la podemos asignar a una variable y luego a través de esta variable llamar a la función:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  var f1=function(x,y)
  {
    var s=x+y;
    return s;
  }

  document.write(f1(4,6)+'<br>');  
  var f2=f1;
  document.write(f2(3,3)+'<br>'); 
</script>
  
</body>
</html>

Vemos que definimos una variable llamada f1 y le asignamos la función propiamente dicha:

  var f1=function(x,y)
  {
    var s=x+y;
    return s;
  }

Luego para llamar la función lo hacemos a través de la variable f1:

  document.write(f1(4,6)+'<br>');  

De la misma manera podemos definir una segunda variable que obtenga la referencia de la otra variable y podremos entonces llamar a la misma función con este segundo nombre:

  var f2=f1;
  document.write(f2(3,3)+'<br>');    
Problema

Ahora si implementaremos otro problema que declare una función que reciba tres parámetros, el último de ellos es una función:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  function calcular(x,y,fu)
  {
    var resu=fu(x,y);
    return resu;
  }

  var s1=calcular(10,5,function (v1,v2) {
    return v1+v2;
  });
  
  document.write(s1+'<br>');

  var s2=calcular(10,5,function (v1,v2) {
    return v1-v2;
  });
  
  document.write(s2+'<br>');
</script>
  
</body>
</html>

Es importante entender la sintaxis que presentamos en este problema elemental para entender que una función puede recibir como parámetros una función y luego llamarla desde dentro.

Primero analicemos como llamamos a la función calcular:

  var s1=calcular(10,5,function (v1,v2) {
    return v1+v2;
  });

A la función calcular le pasamos dos enteros:10 y 5, y una función que definimos en el mismo parámetro:

function (v1,v2) {
    return v1+v2;
}

La función calcular recibe los tres parámetros y sabiendo que el tercer parámetro llega la referencia a la función procedemos a llamarla enviando los dos parámetros requeridos:

  function calcular(x,y,fu)
  {
    var resu=fu(x,y);
    return resu;
  }

Como vemos podemos llamar nuevamente a la función calcular pero pasando otra función:

  var s2=calcular(10,5,function (v1,v2) {
    return v1-v2;
  });

Podemos en vez de definir funciones anónimas cuando llamamos a calcular pasar el nombre de funciones declaradas:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  function sumar(v1,v2) 
  {
    return v1+v2;
  }

  function restar(v1,v2) 
  {
    return v1-v2;
  }

  function calcular(x,y,fu)
  {
    var resu=fu(x,y);
    return resu;
  }

  var s1=calcular(10,5,sumar);
  
  document.write(s1+'<br>');

  var s2=calcular(10,5,restar);
  
  document.write(s2+'<br>');
</script>
  
</body>
</html>

Podemos observar que definimos las funciones sumar y restar:

  function sumar(v1,v2) 
  {
    return v1+v2;
  }

  function restar(v1,v2) 
  {
    return v1-v2;
  }

Y cuando llamamos a calcular en el tercer parámetro indicamos el nombre de la función a enviarle:

  var s1=calcular(10,5,sumar);

Retornar