Vamos a ver cómo las funciones nos ayudan a reutilizar código para evitar tener que crearlo una y otra vez.
Las funciones
Introducción
Las funciones, no son mas que un bloque de código creado para desarrollar una tarea en concreto. Lo útil de estas estructuras es que una vez creadas podemos llamarlas (invocarlas) cuando las necesitemos sin tener que volver a escribir todo el código.
Además de poder utilizarlas tantas veces como queramos, nos sirven para mantener el código bien estructurado pudiendo separar unas tareas de otras.
Sintaxis:
Practiquemos con un ejemplo similar.
function saludar () {
alert("Hola");
}
saludar(); //Se llama a la función
En el código de arriba hemos comenzado con la palabra clave «function» y hemos escrito el nombre que queremos que tenga la función, «saludar».
A continuación hemos colocado dos paréntesis sin contenido «( )», ya veremos un poco más adelante para que se utilizan.
Para finalizar, hemos introducido entre las llaves “{ }” la tarea que queremos que ejecute. En concreto, con el método «alert» haremos que se muestre en pantalla una ventana de alerta con el texto «Hola».
De este modo ya tenemos una función preparada para poder usarla en cualquier momento. Para ello solo tenemos que llamarla (invocarla), que es lo que hemos hecho en la última línea de código escribiendo su nombre y los dos paréntesis.
Nota de interés:
Las nomenclaturas de las funciones siguen las mismas reglas que las variables.
Una buena práctica para diferenciar fácilmente una variable de una función por el nombre, es utilizar verbos para las funciones, por ejemplo «saludar» en vez de «saludo».
Parámetros
Las funciones más sencillas como la del ejemplo anterior no necesitan que les proporcionemos información a la hora de llamarlas para que realicen su tarea. Pero a la mayoría de las funciones deberemos facilitarles valores para que puedan operar con ellos. Estos valores se los pasaremos a la función a través de los «parámetros».
En el ejercicio anterior hemos visto como al definir la función colocábamos dos paréntesis vacios «( )». Entre estos paréntesis es precisamente donde podemos colocar los parámetros.
En el ejemplo de arriba hemos creado un parámetro llamado “textoSaludo”, hay que pensar en este parámetro como en una variable a la que posteriormente le vamos a dar un valor.
En el interior de la función hemos colocado un «alert» que mostrará el valor que le demos al parámetro “textoSaludo” cuando llamemos a la función.
En la última línea de código llamamos (invocamos) a la función saludar y le pasamos un valor al parámetro, concretamente el texto «Hasta luego». Con lo que mostrará un «alert» con dicho texto.
Nota de interés:
El término parámetro se utiliza al darles nombre cuando se define la función.
Los argumentos son los valores que se les da a los parámetros al llamar a la función.
Practiquemos con un pequeño ejercicio:
var miSuma;
function sumar (numero1, numero2) {
miSuma = (numero1 + numero2);
alert (miSuma);
}
sumar(25, 150); //Se llama a la función
En el ejercicio, primero hemos declarado una variable que utilizamos dentro de la función, después hemos definido la función con dos parámetros llamados numero1 y numero2 separados por una coma.
Dentro de la función hemos asignado a la variable miSuma el valor de sumar numero1 y numero2, y a continuación hemos colocado un alert que mostrará el valor de «miSuma».
Finalmente hemos llamado a la función pasándole dos argumentos (25, 150), con lo que se deberá mostrar una alerta con la cifra «175».
Nota de interés:
Los parámetros no pueden tener el mismo nombre que las variables que utilicemos dentro de la función.
Declaración return
Pero las funciones no solo pueden recibir valores, como acabamos de ver con los parámetros, también pueden devolvernos los valores resultantes de las operaciones que ejecuten.
Para recuperar el resultado del bloque de código de una función, Javascript nos proporciona la palabra clave «return».
Veamos un ejemplo:
function sumar (numero1, numero2) {
return (numero1 + numero2);
}
valorRetornado = sumar(25,150); //La función retornará un valor al ser llamada y lo guardamos en "valorRetornado"
alert (valorRetornado);
Dentro de la función hemos escrito la palabra clave «return» seguida de la operación de la cual queremos obtener el resultado.
Posteriormente utilizamos la variable “valorRetornado” para almacenar el valor que retornará la función «sumar(25, 100)» al ser invocada.
La prueba de que “return” nos ha dado el valor resultante de la operación la podemos ver en el texto mostrado por el “alert”.
Nota de interés:
En el momento que se ejecuta la declaración «return» se sale automáticamente de la función. El resto de código que hubiera debajo del “return” hasta el final de la función se omitiría.
Ir a Javascript para novatos 12ª parte
Dejar una opinión