Tutorial de JavaScript : Conceptos

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:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  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:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  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:

<html>
<head>
</head>
<body>

<script type="text/javascript">

  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);

Funciones: parámetros de tipo función

Retornar