Funciones (I)
Las funciones son un elemento muy utilizado en la programación. Empaquetan y ‘aíslan’ del resto del programa una parte de código que realiza alguna tarea específica.
Son por tanto un conjunto de instrucciones que ejecutan una tarea determinada y que hemos encapsulado en un formato estándar para que nos sea muy sencillo de manipular y reutilizar.
Lo vemos con un ejemplo muy simple: una función que denominamos «saludo( )» que nos da una idea del funcionamiento general:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> //definimos la función, que en este caso la llamamos saludo() function saludo() { document.write("Hola, este es el resultado de la función saludo"); } //llamamos a la función saludo() para que ejecute sus instrucciones saludo(); </script> |
Copia el código en el editor y ejecútalo.
Como puedes ver en ese código de ejemplo, para utilizar una función debemos de hacer dos cosas:
Declarar la función
Corresponde al bloque: function saludo() {............}
Podemos distinguir los siguientes elementos en este bloque de código que define la función:
- La palabra clave ‘function‘
- El nombre que queremos darle a dicha función, en este caso: saludo
- Unos paréntesis que añadimos al nombre para identificarla como función: saludo()
- Un bloque de instrucciones que queda encerrado entre llaves { } . En este caso solo hemos incluido una (un document.write), pero podrían ser varias. Las instrucciones deben llevar al final el correspondiente punto y coma (;)
Llamar la función
Lo hacemos con la instrucción: saludo()
En este ejemplo puedes ver que el nombre de la función, tanto al declararla como al llamarla, tiene unos paréntesis vacíos. En este ejemplo, muestra una frase que siempre es la misma.
Veremos ahora que también podemos pasarle valores a la función incluyéndoselos dentro de los paréntesis, y dependiendo de éstos, nos podrá devolver resultados distintos.
Función con parámetros
Vamos a crear una función muy simple que nos dará un resultado dependiendo del valor que le pasemos. En este caso, calculará el volumen de una esfera según el valor del radio (R). La fórmula de dicho volumen es: 4/3 * π * R3
Nota: el objeto Math de JavaScript nos puede dar el valor del número pi (π) y también tiene una función para calcular potencias, pero no lo utilizaremos porque aún no lo hemos visto. Para el nº pi utilizaremos un valor aproximado de 3,14.
Primero veamos el código de este sencillo script sin emplear ninguna función. En él solicitamos al usuario que introduzca el valor del radio de la esfera cuyo volumen desea calcular, hacemos el cálculo y lo mostramos en pantalla:
1 2 3 |
var radio = prompt("Introduce la longitud del radio de la esfera: "); var volumen = 4/3 * 3.14 * radio*radio*radio; document.write("El volumen de la esfera es: " + volumen); |
Vamos ahora a encapsular el cálculo del volumen en una función que denominaremos volEsfera(), de la siguiente forma:
1 2 3 4 |
function volEsfera(x) { var volumen = 4/3 * 3.14 * x*x*x; //cálculo del volumen return volumen; //valor que devuelve la función } |
Para utilizar la función en nuestro código, debemos definirla y luego llamarla de la siguiente forma:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function volEsfera(x) { var volumen = 4/3 * 3.14 * x*x*x; return volumen; } /* Aquí y/o antes de la función, podría ir más código, si el script realiza más cosas. En el momento en que quisiéramos utilizar la función, la llamaríamos con: volEsfera(argumento) */ var radio = prompt("Introduce la longitud del radio de la esfera: "); document.write("El volumen es: " + volEsfera(radio)); </script> |
Como ves, en este caso hemos declarado la función, no como volEsfera(), sino como volEsfera(x). Al ‘x’ dentro del paréntesis le llamamos parámetro de la función (no es necesario que se llame ‘x’, podríamos haberle puesto cualquier otro nombre) y al valor que le pasamos, en este caso el de la variable ‘radio’, le llamamos argumento.
Una función puede no tener parámetros (como el primer ejemplo: la función saludo() ) o tener uno (como la función volEsfera(x) ) o varios (vemos a continuación un ejemplo con dos).
No tienen por qué coincidir los nombres de los parámetros y el de los argumentos, como hemos visto en el ejemplo (x ≠ radio), pero sí debe haber el mismo número. Es decir, si la función tiene 2 parámetros, debemos pasarle 2 argumentos, como vemos en el siguiente ejemplo:
En este caso, es un script con una función de dos parámetros (precio y descuento) que nos calculan el PVP, aplicando además el IVA:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> //introducimos un precio y descuento a un producto var precio = prompt("Introduzca Precio producto (en euros): "); var descuento = prompt("Introduzca descuento (en euros): "); //definimos la función calculoPVP, que tiene como parámetros los valores de precio y descuento function calculoPVP(precio, descuento) { var IVA = 1.21; var PVP = (precio - descuento) * IVA; //en la variable PVP hemos almacenado el PVP calculado return PVP; //la función devuelve el valor asignado a la variable PVP } document.write("Precio= " + calculoPVP(precio,descuento) + " €"); </script> |
Return: devolución de un resultado
En el primer ejemplo de la función saludo(), la función ejecutaba un ‘document.write’, es decir, mostraban una frase en pantalla, con lo que ya nos daba un resultado. Pero ¿qué ocurre, si en vez de ésto, lo que calculan es una valor o una serie de valores que queremos utilizar en el resto del programa?
En estos casos, para devolver el valor calculado por la función se utiliza la palabra clave ‘return‘. En los dos ejemplos anteriores, nos ha devuelto el valor de la variable ‘volumen’ y el valor de la variable ‘PVP’, respectivamente. En ambos casos los hemos mostrado por pantalla, pero también podíamos haberlos utilizado para otras tareas, por ejemplo, realizar otros cálculos a partir de ellos, guardarlos en un fichero,…
Si te han quedado dudas, en la próxima página te mostramos en un video, a modo de diagrama, el proceso de utilización de una función. Además, te planteamos un ejercicio: ¿cómo haríamos si necesitas que la función devuelva no uno sino varios valores?
Variables locales y globales
Las variables definidas dentro de las funciones, siempre que utilicemos la palabra clave ‘var‘ en su declaración, son denominadas variables locales y no pueden ser accedidas desde el exterior de la función. En los ejemplos anteriores serían variables locales: ‘volumen’, ‘IVA’ y ‘PVP’.
Esta es una práctica muy recomendable que debemos seguir para que no entren en conflicto con otras variables del mismo nombre que puedan existir en el resto del script, incluyendo las que pueden estar dentro de otras funciones que hayamos definido en el programa.
Con esta norma, podrían contener valores distintos a pesar de tener el mismo nombre (aunque esto último deberíamos evitarlo para no crear confusiones innecesarias en nuestros scripts) y un cambio en una no nos afectará a la otra, evitando modificaciones sin darnos cuenta. Por ejemplo, podríamos haber definido la variable ‘volumen’ en el script del cálculo de la esfera fuera de la función, y a pesar de tener el mismo nombre, no haber afectado a la variable esfera de dentro de esa función.
La contraposición a ésto son las variables globales, aquellas que definimos fuera de las funciones (o dentro de ellas sin la palabra clave ‘var’), que tienen efecto en todo el script. Se dice por tanto que una variable puede tener ámbito (scope) local o global.
Beneficios de utilizar funciones
Las funciones permiten crear programas o scripts mejor estructurados y más claros, evitando repeticiones innecesarias y facilitando su mantenimiento. En el ejemplo anterior, las instrucciones para calcular el PVP se escriben solo una vez dentro de la función y no repetidas y repartidas por todo el programa. Si hay una modificación en el IVA por un cambio en la norma fiscal, solo tenemos que modificarlo en la función, y en ese momento, todos los precios se calcularán con el nuevo impuesto.
Las funciones ‘empaquetan’ y aislan del resto del programa una serie de variables e instrucciones de código que realizan alguna tarea específica. Solo se ejecutan si son llamadas desde el código principal y tras procesar sus instrucciones, devuelven un resultado a esa parte del código principal que la invocó. Los valores de esas variables internas (locales) no entran en conflicto con el resto del programa.
Como curiosidad, según el lenguaje de programación, a las funciones (o a las estructuras que juegan ese mismo papel) se les puede conocer por otros nombres como (sub)rutinas, procedimientos o subprogramas.
En el entorno de la programación orientada o basada en objetos, vamos a ver que los métodos de dichos objetos son funciones que se han definido dentro de ellos.