Funciones en JavaScript (1/3)

Esta entrada forma parte de una serie.

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

Veamos la estructura habitual en una función de JavaScript y luego iremos viendo direfentes variantes.

Función sin parámetros y sin return

Las funciones en JavaScript se definen o declaran escribiendo la palabra calve function luego el nombre de la función seguido de unos paréntesis () dentro de los que pueden ir de forma optativa una serie de argumentos o parámetros, luego van una llaves {} dentro de las cuales se añaden las diferentes líneas de código que lleva la función. La última línea de código dentro de las llaves es una instrucción return que es optativa, y en caso de existir, proporciona el valor que devuelve la función.

En general es una buena práctica de programación crear funciones que devuelvan un valor por lo que lo recomendable es que exista ese return pero esta forma de trabajar es optativa. En este ejemplo vamos a crear una función que no lleva ni return ni parámetros dentro de los paréntesis.

La función tiene un nombre que es saluda. Dentro de los paréntesis no escribimos ningún parámetro. Dentro de la función está la instrucción que mustra en pantalla la palabra 'Hola' pero no existe ningún return al final de la función que nos devuelva algún valor.

La función se invoca o ejecuta escribiendo el nombre de la función y los paréntesis saluda(), si llevara parámetros o argumentos deberían ir dentro de los paréntesis.

El resultado se puede ver en una página web donde únicamente se mustra la palabra 'Hola'.

https://repl.it/@valoro/FuncionJSsinParametrossinReturn

 // FUNCIONES EN JavaScript  
 // Una función sencilla sin return  
 function saluda(){  
  document.write("Hola");  
 }  
 saluda(); //invocamos la función  

Función sin parámetros y con return

Lo habitual y lo aconsejable es que una función finalice con un return que devuelve un valor. Ese valor es el que ha elaborado la función y es lo que al concluir el código de la función ésta devuelve. Y justo se devuelve en el punto en el que ha sido invocada esa función.

https://repl.it/@valoro/FuncionJSsinParametrosconReturn

 // La misma función que antes pero con return  
 function saluda(){  
  return "¿Qué tal?"  
 }  
 document.write(saluda());  //Llamamos a la función  

Función con un parámetro

Veamos cómo se trabaja en una función cuando lleva un parámetro dentro de los paréntesis. En este ejemplo, queremos que la función salude a una persona y por lo tanto la función recibe como parámetro el nombre de la persona que debe saludar.

https://repl.it/@valoro/Una-funcion-con-un-parametro

Cuando invocamos la función le pasamos el nombre de una persona saluda("Alex"). La función recibe ese nombre y lo convierte a mayúsculas. Esta es una línea que se ha escrito dentro de la función a modo de ejemplo, para ver que la función realizará los cálculos que tengamos previostos y finalmente devolverá su resultado mediante el uso de return.

 // Una función con un parámetro  
 function saluda(persona){  
  persona=persona.toUpperCase()  
  return "¿Cómo vas, "+persona  
 }  
 document.write(saluda("Alex"),"?");  

Función con dos parámetros

Ahora vamos a crear una función que utiliza dos parámetros que hemos llamado a y b. Queremos restar a-b. Aquí el orden importa y sabemos quién es el parámetro a y quién es b por el orden que ocupan. Al invocar la función restar(8,5) estaremos restando 8-5, y por el contrario si invocáramos la función restar(5,8) estaríamos restando 5-8, cuyo resultado sería diferente. Por lo tanto, el orden de los parámetros importa.

https://repl.it/@valoro/Funcion-con-dos-parametros

 // Función con dos parámetros  
 function resta(num1,num2){  
  var resultado=num1-num2;  
  return resultado;  
 }  
 var a=8;  
 var b=5;  
 var diferencia=resta(a,b);  
 document.write("Si restamos "+a+" menos "+b+" obtenemos: ",diferencia)  
 //sabemos quién es cada parámetro por el orden que ocupan  

Variables globales y variables locales

Las variables definidas dentro de una función se llaman variables locales y su ámbito de actuación se reduce únicamente al código que hay dentro de la función. Las variables que se declaran dentro de una función únicamente existen dentro de esa función. Aunque exista otra variable con el mismo nombre fuera de esa función no se verán afectadas la una por la otra, serán independientes.

Las variables que se definen fuera de una función se llaman variables globales y su ámbito de actuación abarca tanto el código que hay fuera de la función como dentro de la función y permiten que varias funciones puedan manejar los valores de esas variables. Esto supone uno de los métodos mediante los que las funciones pueden interactuar unas con otras y con el resto del código que existe fuera de ellas. La otra forma que tienen las funciones de pasarse información o datos entre ellas es utilizar los parémetros que van dentro de los paréntesis.

Si existe un nombre de variable que se ha definido fuera de una función (variable global) y ese mismo nombre también se ha definido dentro de una función (variable local), podemos comprobar que cuando la función finaliza el valor de la variable local no condiciona (no afecta) al valor de la variable global. Esto es, cuando la función finaliza con un cierto valor de la variable local, este valor no se traslada fuera, salvo que vaya en el return. Veamos un ejemplo de este comportamiento.

La variable global a toma el valor a=90. Luego dentro de la función se define el mismo nombre de función con el valor a=7. Se invoca la función y finalmente, fuera de la función, se muestra el valor de la variable a que vuelve a ser a=90. Esto supone que el valor de la variable local a=7 murió al finalizar la función y que no afectó al valor de la variable global.

https://repl.it/@valoro/JS-variables-globales-y-variables-locales

 var a=90;  
 document.write("Definimos la variable global con el valor a="+a);  
 function cambia(){  
  var a=7; //es imprescindible poner VAR pq sino no funciona bien  
  document.write("<br>"+"El valor de la variable dentro de la función es a="+a);  
 }  
 cambia(); //invocamos la función  
 document.write("<br>"+"El valor de la variable fuera de la función es a="+a);  

Nota. Si dentro de la función no ponemos la palabra clave var al definir la variable a no se cumple lo que hemos dicho. Esto es importante para evitar errores y para que no nos volvamos locos media mañana haciendo debugging buscando el error.

Variables globales

Veamos un nuevo ejemplo para entender cómo funcionan las variables globales y cómo podemos conseguir que entren dentro de una función y ésta devuelva la variable global alterada.

https://repl.it/@valoro/JS-variables-globales

Observamos que en un primer momento el valor de a que obenemos por consola es 10. Pero si sustituimos f1() por a=f1(), el valor de a en consola será de 20. Y si además sustituimos f2() por a=f2() lo que logramos es que el valor de a en consola sea de 22.

Este ha sido un ejemplo de cómo podemos hacer que una variable global pueda ser usada por una función y devuelta por ésta con una modificación de su valor.

Variables globales usadas en funciones

Una variable definida fuera de cualquier función es una variable global cuyo ámbito de actuación abarca toda la página.

https://repl.it/@valoro/JS-variable-global-en-una-funcion1

Disponemos de una función denominada dobla que permite doblar el valor de la variable que le pasemos como parámetro.

• Comenzamos con la variable a que inicialmente vale 100.
• Al ejecutar la primera vez la función dobla conseguimos que devuelve el valor 200
• Consultamos la variable global y sigue valiendo 100
• Ejecutamos la función una segunda vez y obtenemos el valor 200

Esto es lógico y es lo que cabe esperar ya que al finalizar la función la variable global sigue valiendo 100.

La función en JavaScript puede ir en cualquier sitio, así que la hemos puesto al final.

Hagamos una variante en la función. Ahora la variable ya no se llamará c sino que se llemará a al igual que la variable global y además (importante) quitaremos el var que hemos usado dentro de la función.

En este segundo caso hemos logrado doblar dos veces el valor inicial de a por lo que ahora vale 400. Esto supone en la práctica que la función ha retornado el valor alterado de la variable global a.

Función anónima

Una función anónima es aquella que no lleva nombre de función. Lo que hacemos es crear una función sin nombre que asigna a una variable el valor que calcule.

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

 var a=function(){console.log("hola")};  
 a();  

Función anónima sin parámetros

También es posible crear una función anónima sin parámetros. Este ejemplo únicamente nos saluda.

 // Función anónima sin parámetros  
 var buenosdias=function(){  
  return "Hi";  
 }  
 document.write(buenosdias());  

Función anónima con un parámetro

En nuestro ejemplo queremos calcular el cuadrado de un número la función asigna el resultado a la variable cuadrado. La forma de invocar la función es poniendo cuadrado(3) para calcular 3 elevado a 2.

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

 // Función anónima es aquella que no tiene nombre  
 var cuadrado=function(num){  
  return num*num;  
 }  
 var resultado=cuadrado(3); // Así invocamos la función  
 document.write("Si elevamos 3 al cuadrado obtenemos: ", resultado);  
 document.write("<br>"+"3<sup>2</sup>="+resultado);  

Función anónima con varios parámetros

Veamos una función anónima con múltiples parámetros. En este ejemplo, calcularemos el voluman de un cono cuya fórmula es la siguiente.

Volumen cono = (1/3) * Área de la base circular * Altura =
= (1/3) * pi * radio al cuadrado * Altura =
= (1/3) * π * r² * h

La función utiliza los parámetros radio y altura. Observe que al llamar a la función los parámetros se llaman r y h y que luego se reciben con nombres diferentes, se reciben como radio y altura. Para saber qué parámetro es cada uno de ellos nos guiamos por el orden de los parámetros primero va el radio (r) y luego la altura (h).

Creamos una variable denominada texto que se va concatenando con él usando += lo que permite ir añadiendo cada vez una porción más del string que estamos construyendo. Finalmente la variable texto será la que se imprima en pantalla.

https://repl.it/@valoro/JS-funcion-anonima-conVariosParametros

 // Función anónima con varios parámetros  
 var volumencono=function(radio,altura){  
  var volumen=(1/3)*altura*radio*radio*Math.PI;  
  return volumen;  
 }  
 var r=2; //radio  
 var h=5; //altura  
 texto="El volumen de un cono de radio ";  
 texto+=r;  
 texto+=" y altura ";  
 texto+=h;  
 texto+=" es: ";  
 document.write(texto,volumencono(r,h));  

Función con nombre vs función anónima

Existe una diferencia fundamental entre ambos tipos de funciones que tiene que ver con el lugar en el que se puede situar la función dentro del código.

La función con nombre puede ponerse en cualquier sitio. Se puede invocar antes de declararla, ya que JavaScript antes de ejecutar el códgio identifica todas las funciones que tengan nombre. Por el contrario una función anónima ha de ser declarada antes de ser invocada.

Primero vamos a invocar la función dia() y al final declaramos la función. Esto se puede hacer ya que la función dia es una función con nombre. Algunos programadores dejan para el final todas las funciones con nombre.

 dia();  
   
 function dia(){  
  var hoy=new Date();  
  document.write("Hoy es día: ",hoy.getDate());  
 }