En JavaScript, una función no es una “estructura mágica del lenguaje”, sino un tipo de valor especial.

La sintaxis que usamos antes se llama Declaración de Función:

<script>
function sayHi() 
{
  alert( "Hola" );
}
</script>  
    

Existe otra sintaxis para crear una función que se llama una Expresión de Función.

Esto nos permite crear una nueva función en el medio de cualquier expresión

Por ejemplo:

<script>
let sayHi = function() 
{
  alert( "Hola" );
};
</script>  
    

Aquí podemos ver una variable sayHi obteniendo un valor —la nueva función— creada como function() { alert("Hello"); }.

Como la creación de una función ocurre en el contexto de una expresión de asignación, (el lado derecho de =), esto es una Expresión de función.

Note que no hay un nombre después de la palabra clave function. Omitir el nombre está permitido en las expresiones de función.

Aquí la asignamos directamente a la variable, así que el significado de estos ejemplos de código es el mismo: "crear una función y ponerla en la variable sayHi".

En situaciones más avanzadas, que cubriremos más adelante, una función puede ser creada e inmediatamente llamada o agendada para uso posterior, sin almacenarla en ningún lugar, permaneciendo así anónima.

Reiteremos: no importa cómo es creada la función, una función es un valor. Ambos ejemplos arriba almacenan una función en la variable sayHi.

Incluso podemos mostrar aquel valor usando alert:

Codigo

<script>
function sayHi() 
{
  alert( "Hola" );
}
alert( sayHi ); // muestra el código de la función
</script>  
    

Tenga en cuenta que la última línea no ejecuta la función, porque no hay paréntesis después de sayHi. Existen lenguajes de programación en los que cualquier mención del nombre de una función causa su ejecución, pero JavaScript no funciona así.

En JavaScript, una función es un valor, por lo tanto podemos tratarlo como un valor. El código de arriba muestra su representación de cadena, que es el código fuente.

Por supuesto que es un valor especial, en el sentido que podemos invocarlo de esta forma sayHi().

Pero sigue siendo un valor. Entonces podemos trabajar con ello como trabajamos con otro tipo de valores.

Podemos copiar una función a otra variable:

Codigo

<script>
function sayHi() 
{   // (1) crear
  alert( "Hola" );
}

let func = sayHi;    // (2) copia de la funcion por asignacion

func(); // Hola          // (3) ejecuta la copia 
sayHi(); // Hola         // (4) ejecuta directamente
</script>  
    

Esto es lo que sucede arriba en detalle:

• (1) La Declaración de la Función crea la función y la coloca dentro de la variable llamada sayHi.
• (2) copia la función en la variable func.
• Ahora la función puede ser llamada de ambas maneras, sayHi() y func().

JavaScript distingue no solo entre enlaces globales y locales. Bloques y funciones pueden ser creados dentro de otros bloques y funciones, produciendo múltiples grados de localidad.

Codigo

<script>
function gestionarCuenta(banco, saldoInicial) 
{
  let saldo = saldoInicial;

  function depositar(monto) 
  {
    saldo += monto;
    console.log(`Depósito realizado. Saldo actual: ${saldo}`);
  }

  function retirar(monto) 
  {
    if (monto > saldo) 
    {
      console.log("Fondos insuficientes");
    } 
    else 
    {
      saldo -= monto;
      console.log(`Retiro realizado. Saldo actual: ${saldo}`);
    }
  }

  function consultarSaldo() 
  {
    console.log(`Saldo actual: ${saldo}`);
  }

  return { depositar, retirar, consultarSaldo };
}

const cuenta = gestionarCuenta("Banco XYZ", 1000);
cuenta.depositar(500);
cuenta.retirar(200);
cuenta.consultarSaldo();
</script>  
    

En este ejemplo:

• gestionarCuenta es la función principal.
• depositar, retirar y consultarSaldo son funciones anidadas.
• Las funciones anidadas acceden y modifican la variable saldo.

ACTIVIDADES A REALIZAR

Usa el codigo de prueba, modificalo

• HTML debe presentar un menu principal con opciones :
• 1) Depositar
• 2) Retirar
• 3) Salir
• Un input para introducir la opcion del menu.
• Un input para introducir la cantidad de dinero.
• Un boton button para procesar la informacion.
• Cada vez que deposite o retire debera presentar el saldo actual
• Cuando la opcion sea Salir debera "Agradecer su visita"
• Utilizar
• Variable externa/global para almacenar el Saldo
• Funciones para ConsultarSaldo, DepositarSaldo y RetirarSaldo
• Las funciones deben estar asociados a button que procese el menu
• Switch para procesar la seleccion

Procura no copiar directamente la respuesta desde una IA

Un callback es una función que se invoca cuando un proceso asíncrono ha terminado. El propio nombre puede facilitar su comprensión: una función que se llama (call) de vuelta (back) o retrollamada, para retornar el control de flujo al código asíncrono que estamos programando.

Los procesos asíncronos de Javascript tienen la particularidad de ejecutarse liberando el proceso principal. Por tanto, cuando el proceso asíncrono termina queremos que el proceso principal se entere y para ello se usan las funciones callback: Para devolver el control al iniciador del proceso asíncrono, enviando generalmente el dato resultante de la ejecución de ese proceso asíncrono.

Por supuesto, para entender qué es un callback necesitamos saber qué es un proceso asíncrono. No es más que una operación realizada durante la programación de Javascript que tardará en ejecutarse. En realidad, todo proceso en general lleva un tiempo para su ejecución. Lo que caracteriza al proceso asíncrono es que durante este tiempo de procesamiento libera el hilo de ejecución, devolviendo inmediatamente el flujo al programa principal.

Dentro del anterior diagrama tenemos etiquetados varias etapas del proceso, que describimos a continuación con más detalle.

• 1) Se está ejecutando el flujo principal hasta que llega un momento que se hace una llamada a un proceso asíncrono.
• 2a) Se hace una llamada a un proceso asíncrono
• 2b) Continúa la ejecución del proceso principal.
• 2a) y 2b) Estas acciones se ejecutan en secuencia, pero para nuestra percepción como humanos ocurren de inmediato, ya que el proceso asíncrono arranca pero toda la demora que podría producirse en él no se nota, ya que el flujo de ejecución se libera y con ello el flujo principal puede continuar su ejecución instantáneamente
• 3) El proceso asíncrono lleva su tiempo y una vez termina devuelve de nuevo el flujo de ejecución al proceso principal.
• 4) El proceso principal tiene entonces la opción de invocar la función callback, a la que generalmente se le envía el dato que el proceso asíncrono ha producido como respuesta. Por ejemplo, si fuera una llamada a la base de datos, se le entregaría el resultado de la ejecución de la consulta.

Ejemplo de codigo

<script>
function Funcion_Con_CallBack( Fn_Regreso_CallBack )
{ // Codigo que hace calculos o que consulta informacion que puede tardar
  // Más Codigo 
  Informacion = 'Algo';
  Fn_Regreso_CallBack (Informacion);
}


Funcion_Con_CallBack (function (Informacion_Que_Regresa)
{
  alert( Informacion_Que_Regresa );
});
</script>

Explicacion del codigo

• Linea 2 : Se declara la funcion Funcion_Con_CallBack con un parametro
• Internamente la se realizan operaciones
• Linea 6 : Se ocupara el parametro Fn_Regreso_CallBack para retornar el control y le asigna un valor
• Linea 10 : Se utiliza la funcion Funcion_Con_CallBack, definiendo que el parametro es una funcion function (Informacion_Que_Regresa)
• En ejecucion : De la linea 10 , se invoca a la linea 2, hasta llegar a la Linea 6
• En ese momento se continua con la linea 12.

Habitualmente las funciones callback se definen mediante funciones anónimas, que son aquellas a las que simplemente nadie les ha puesto un nombre.

Para la realización de un proceso asíncrono generalmente tendremos que invocar una función que se encargará de producir ese proceso. A esa función le enviaremos como argumento la función anónima que hará de callback para retomar el control en el flujo principal de ejecución.

Ejemplo de función asincrona con callback vs return

<script>
function Sumar_CallBack( Inicio, Final, Fn_Regreso_CallBack )
{ console.log ("Usando function Sumar_CallBack");
  let Acumulado =0;
  let Txt_Datos ='';
  for (let x=Inicio; x<(Final+1) ; x++ )
  { 
    Acumulado  = Acumulado + x;
    Txt_Datos  = Txt_Datos+'+'+x;
    console.log ('['+x+'] ='+Txt_Datos+'='+Acumulado )
  }
  setTimeout ( function ()
  { console.log ("Retorno del CallBack");
    Fn_Regreso_CallBack (Acumulado);  
  },5000 );
};
// **************************************************************

function Sumar_Return( Inicio, Final )
{ console.log ("Usando function Sumar_Return");
  let Acumulado =0;
  let Txt_Datos ='';
  for (let x=Inicio; x<(Final+1) ; x++ )
  { 
    Acumulado  = Acumulado + x;
    Txt_Datos  = Txt_Datos+'+'+x;
    console.log ('['+x+'] ='+Txt_Datos+'='+Acumulado )
  }      

  setTimeout ( function ()
  { console.log ("Retorno del Return");
    return Acumulado; 
  }, 5000);

}    
// **************************************************************

console.log('Ejecucion ANTES  Sumar ');    
console.log ('Resultado Sumar_Return ='+ Sumar_Return( 1,2 ) );

Sumar_CallBack (1,2 ,function (Informacion_Que_Regresa)
{
  console.log('Resultado Sumar_CallBack '+Informacion_Que_Regresa);
});


console.log('Ejecucion DESPUES Sumar ');
</script>  

Visualizacion de la consola

Ejecucion ANTES  Sumar 
Usando function Sumar_Return
  [1] =+1=1
  [2] =+1+2=3
Resultado Sumar_Return =undefined //<==¿Que paso aqui ?
Usando function Sumar_CallBack
  [1] =+1=1
  [2] =+1+2=3
Ejecucion DESPUES Sumar //<== Se termina por ejecucion por secuencia 
Retorno del Return  // <== En este momento "llega-muy-tarde" la respuesta del return
Retorno del CallBack //<== Llega la respuesta del CallBack 
Resultado Sumar_CallBack =3  //<==  E inmediantamente se ejecuta la seccion interna
      

Explicacion del error

Hay una tercera notación para funciones, que se ve muy diferente de las otras. En lugar de la palabra clave function, utiliza una flecha => compuesta por un signo igual y un caracter mayor que no confundir con el operador mayor o igual, que se escribe >=

Codigo

<script>
const roundTo = (n, step) => 
{
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
};
</script>  
    

La flecha viene después de la lista de parámetros y es seguida por el cuerpo de la función. Expresa algo así como “esta entrada (los parámetros) produce este resultado (el cuerpo)”.

Cuando solo hay un nombre de parámetro, puedes omitir los paréntesis alrededor de la lista de parámetros. Si el cuerpo es una sola expresión, en lugar de un bloque entre llaves, esa expresión será devuelta por la función. Por lo tanto, estas dos definiciones de exponente hacen lo mismo:

Codigo

<script>
const exponente1 = (x) => { return x * x; };
const exponente2 = x => x * x;
</script>  
    

Cuando una función de flecha no tiene parámetros en absoluto, su lista de parámetros es simplemente un conjunto vacío de paréntesis.

Las funciones de flecha se agregaron en 2015, principalmente para hacer posible escribir expresiones de función pequeñas de una manera menos verbosa

JavaScript está lleno de situaciones en las que necesitamos escribir una pequeña función que se ejecuta en otro lugar.

Por ejemplo

• arr.forEach(func) – func es ejecutado por forEach para cada elemento del array.
• setTimeout(func) – func es ejecutado por el planificador incorporado. …y muchas más.

Está en el espíritu de JavaScript crear una función y pasarla a algún otro lugar.Y en tales funciones, por lo general, no queremos abandonar el contexto actual. Ahí es donde las funciones de flecha son útiles.