Funciones en JavaScript (2/3)

Esta entrada forma parte de una serie.

1. Funciones en JavaScript (1/3)
2. Funciones en JavaScript (2/3)  ← Estamos en esta entrada
3. Funciones en JavaScript (3/3)

Invocar dos funciones

Podemos crear dos funciones independientes y luego invocar una y usar como argumento el resultado de invocar la otra.

Creamos una primera función denominada aleatorio(min,max) que genera un número aleatorio entero entre dos valores dados.
Creamos una segunda función denominada davocal(num) que devuelve una vocal de la lista de vocales según el orden que le indiquemos de esa lista. Se ha de tener en cuenta que las listas comienzan en cero.
Finalmente invocamos la función davocal que es una función que tiene como argumento el resultado de otra función que es la función aleatorio.

https://repl.it/@valoro/JS-invocar-dos-funciones

 // Veamos como invocar a dos funciones  
 // Primera función: genera un número aleatorio  
 function aleatorio(min,max){  
  alea=Math.round(Math.random()*(max-min)+min);  
  return alea;  
 }  
 // Segunda función: proporciona una vocal  
 function davocal(num){  
  var vocales=["a","e","i","o","u"];  
  return vocales[num];  
 }  
   
 var elegida=davocal(aleatorio(0,4));  
 document.write("La vocal del sorteo 1 es: "+elegida);  

Función dentro de otra función

Una función puede invocar a otra función dentro de ella. El ejemplo planteado es similar al anterior donde queremos generar una vocal elegida aleatoriamente de entre las contenidas en la lista de vocales. La primera función se denomina aleatorio y es idéntica a la del caso anterior. La segunda función se denomina damevocal() y difiere calramente del caso anterior ya que en esta ocasión invocamos a la función primera dentro de la función segunda.

https://repl.it/@valoro/JS-funcion-dentro-de-funcion

 // Una función llama a otra función dentro de ella  
 // Primera función: genera un número aleatorio  
 function aleatorio(min,max){  
  alea=Math.round(Math.random()*(max-min)+min);  
  return alea;  
 }  
   
 // Segunda función: proporciona una vocal  
 function damevocal(){  
  var vocales=["a","e","i","o","u"];  
  return vocales[aleatorio(0,4)];  
 }  
 // Invocamos la función  
 var mielegida=damevocal();  
 document.write("La vocal del sorteo 2 es: "+mielegida);  

Función autoejecutable

Podemos crear una función anónima que se ejecuta ella sola, no es necesario invocarla. Veamos un ejemplo.

La siguiente función ejecutará un alert que nos saluda. Observe que la función no ha sido invocada y sin embargo se ejecuta automáticamente. No es necesario llamar a la función para que ésta se ejecute.

https://repl.it/@valoro/JS-funcion-autoejecutable

 (function(){alert("Hola")})();  

Analicemos detenidamente la línea de código anterior. Tenemos una función anónima, que no lleva nombre. Las funciones anónimas habitualmente se asignan a una variable pero en este caso no lo hacemos.

El núcleo básico de la función anónima es el siguiente, pero si lo ejecuta dará error.

function(){alert("Hola")}

El error que proporciona es el siguiente.

SyntaxError: Function statements require a function name

Es un error que nos indica que la función no tiene nombre y que tampoco se trata de una función anónima normal ya que en ese caso debería ir asignada a una variable.
Una forma de solucionar el error sería asignar una variable a la función anónima de la siguiente forma.

var f=function(){alert("Hola")};
f();

Pero esta no será la forma en la que solucionemos este error ya que no deseamos asignar la función anónima a una variable. Lo que queremos es que la función anónima de momento no de error y luego deseamos conseguir que se ejecute ella sola.
Para evitar que de error podemos envolver la función entre paréntesis. De momento quedaría de esta forma.

(function(){alert("Hola")});

Con la línea de código anterior no obtenemos error pero no hace nada.

Nos gustaría que se autoejecutara la función para ello añadiremos unos paréntesis al final. Los dos paréntesis finales () permiten llamar a la función anónima.

(function(){alert("Hola")})();

Ahora ya hemos conseguido que se ejecute automáticamente la función, ya tenemos una función anónima autoejecutable.

Los paréntesis que rodean la función se pueden sustituir por otros signos, por ejemplo + , - , ~, ! o con todos al mismo tiempo. Lo que hacen estos signos es forzar a que la función esté correctamente definida ya que evitan que aún siendo una función anónima se tenga que asignar a una variable.

Así pues, también funcionaraía lo siguiente, aunque queda un poco extraño.

!+-~function(){alert("Hola")}();

Llamar a una función en JavaScript usando los paréntesis

En JavaScript para llamar a una función hemos de usar los paréntesis (), incluyendo dentro de ellos los argumentos de la función en caso de que las función tenga parámetros que utilizar. Si no se ponden los paréntesis no obtendremos un error, lo que conseguiremos es hacer referencia a esa función pero si la función devuelve un valor con return no conseguiremos capturar ese valor devuelto. Veamos un ejemplo.

https://repl.it/@valoro/JS-referencia-a-una-funcion

 function miFuncion1(){return 10};  
 function miFuncion2(){return 20};  
   
 var f1=miFuncion1();  
 var f2=miFuncion2;  
   
 document.write("El contenido de f1 es: ",f1);  
 document.write("<br>");  
 document.write("El contenido de f2 es: ",f2);  
 document.write("<br>");  
 document.write("El contenido de f2() es: ",f2());  

La diferencia entre f1 y f2 reside en la forma en la que hemos definido con var estas dos variables. En el caso de f1 ha sido asignada a la función miFuncion1(), los paréntesis finales son importantes ya que permiten que la función se ejecute y el resultado enviado por el return se almacene en la variable f1. Este es el motivo por el que f1 vale 10 cuando lo imprimimos con document.write.

Por el contrario, al definir f2 con var hemos omitido los paréntesis finales esto supone que la función miFuncion2 no se ejecutará pero si existe una referencia a miFuncion2. Por este motivo, para ejecutar la función no basta con escribir f2 sino que hemos de esciribir f2(), de forma que al añadir los paréntisis finales conseguimos que la función miFuncion2 se ejecute y que f2 almacene el valor 20 devuelto por el return.

Encapsular funciones dentro de una función

En ocasiones utilizamos nombres de variables o funciones de los que no estamos seguros si ya se estarán utilizando en la página web en la que estamos introduciendo este nuevo script. Para evitar interferencias con otras variables globales o con otros nombres de función es habitual utilizar una técnica de programación que consiste en encerrar todo nuestro nuevo código dentro de una función anónima autoejecutable. Debido a que las variables dentro de una función únicamente actuan en ese ámbio nos garantizamos que quedan aisladas de las que puedieran existir en otros script previos que están corriendo en nuestra página.

La comprobación de que la función está correctamente construida podemos verla si convertimos en un comentario la declaración de la variable mititulo. De esta forma queda anulada la variable y únicamente actua correctamente la función. La función lo que hace es proporcionarnos el título de la página web en la que se esta ejecutando.

Supongamos que definimos con var la variable mititulo y luego creamos una función con nombre mititulo. Lo que conseguiremos al ejecutar la función es un error ya que estamos empleando el mismo nombre para la función y para el título.

Este comportamiento es frecuente en páginas web con una gran cantidad de nombres de variables y funciones que en muchos casos no hemos creado nosotros y sobre las que deseamos añadir una nueva función. Para evitar conflictos de nombres un buen truco consiste en encapsular nuestro script dentro de una función anónima autoejecutable. Este truco es tan habitual en muchos casos que se ha convertido en una metodología de programación dentro de JavaScript.

Mediante el siguiente código vamos a encapsular dentro de una función autoejecutable otra función denominada miFuncion. Observe como los parámetros window y document se pasan al interior de la función anónima con los alias w y d.

https://repl.it/@valoro/JS-parametros-de-inicializacion

 (function (w, d){  
  (function miFuncion(){  
   alert(d.title)  
  })();  
 })(window, document);