Funciones: creación y uso
De entrada de forma muy básica puedes ver las funciones:
un bloque de instrucciones de programa con nombre y que ejecutan una tarea muy concreta, pudiendo devolver tras su ejecución un valor.
Las funciones se pueden ejecutar sin más que llamarlas directamente desde cualquier parte del script o mediante eventos de una página HTML.
Como usuario de una función la puedes ver como una caja negra a la que les das datos y hace cosas con esos datos. Como programador para crear esa función debes escribir las instrucciones para manejar los datos para hacer cosas
Javascript posee una serie de funciones predefinidas o funciones globales (son métodos del objeto global Function) y el programador puede crear las suyas propias.
Recuerda que todas las funciones son objetos Function. Puedes ver este objeto en detalle
La forma básica de crear una función es mediante la palabra clave function seguida del nombre que deseemos darle y unos paréntesis que pueden contener nombres de variables que simbolizan los valores con los que deba trabajar la función, son los parámetros. Por último se escriben las instrucciones encerradas entre llaves { } (llaves)
Los paréntesis deben escribirse aunque no haya parámetros.
Para los nombres de funciones seguimos las mismas reglas que para las variables: caracteres, dígitos y guión bajo, debiendo comenzar por un carácter o el guión bajo.
Como es natural es recomendable dar a las funciones un nombre representativo de la operación que realize. Por supuesto no debemos darle un nombre que ya exista en JavaScript.
A continuación encerradas entre llaves escribimos las sentencias u órdenes en JavaScript. Opcionalmente la función puede finalizar con la palabra clave return seguida de un valor, este valor será el que devuelva la función al programa que la llame.
function sumar(suma1, suma2)
{
return suma1 + suma2;
}
Mediante este ejemplo creamos la función llamada sumar, que utiliza dos argumentos y lo que hace es sumar estos argumentos. Por último devuelve el resultado de la operación, mediante la palabra clave return seguida del valor que debe devolver.
Ahora en el siguiente código de programa usamos la función recién definida:
var operacion;
var anterior = 4;
operacion = sumar(anterior, 5);
alert(operacion);
En este código llamamos a la función con los valores 4 y 5 como argumentos y almacenamos el resultado en la variable operacion.
Fíjate que uno de los argumentos se lo enviamos a la función dentro de una variable y el otro como un número. El parámetro suma1 toma el valor de anterior y el parámetro suma2 toma el valor 5.
Hasta aquí el comportamiento de las funciones JavaScript es similar a cualquier otro lenguaje, pero en JavaScript las funciones también son objetos.
Las variables usadas dentro de la función son locales a esa función, no se ven desde fuera.
function saludar(nombre)
{
nombre = "Hola "+nombre;
console.log (nombre);
}
var nombre = "Juan";
saludar (nombre);
console.log(nombre);
Antes de llamar a la función la variable nombre contenia el valor Juan, dentro de la función la cambia el contenido por Hola Juan y después sigue teniedo el valor original Juan.
En Javascript los argumentos se pasan (envían) a la función por valor. Realmente lo que le enviamos entre paréntesis es el valor de la variable, su contenido. La variable nombre de dentro de la función no es la misma que la que definimos fuera
Solo hay una excepción. Los argumentos de tipo objeto se pasan por referencia, es decir se envía el objeto, no una copia del mismo o su valor. Por tanto las modificaciones hechas dentro de la función se mantienen al acabar.
Míralo en este ejemplo
function ordenar(lista, fruta)
{
lista.push(fruta);
}
var frutas = new Array("manzana","naranja","pera");
console.log(frutas);
cesta (frutas, "uvas");
console.log(frutas);
Antes de llamar a la función la lista de frutas (un objeto array) contenia "manzana", "naranja", "pera". La función le añade un nuevo elemento y después contiene "manzana", "naranja", "pera", "uvas". ¿Poru´qe ocurre esto? Porque frutas es un objeto denominado Array
Si una función no recibe uno de los parámetros le asigna el valor undefined o bien el que le indiquemos en la definición como valor por defecto.
Esto es sumamente útil y se puede aprovechar como una manera de usar parámetros opcionales.
function saludar(nombre, saludo = "Hola")
{
return saludo +", "+nombre;
}
console.log( saludar("Buenos días", "Juan") );
console.log( saludar("Juan" ) ); //undefined Juan
Si quitas la parte ="Hola", obtendrás undefined Juan como resultado de la segunda llamada a la función. Para valores numéricos obtendrías NaN.
Si queremos una función con un número e argumentos variables podemos usar el operador spread (...) son tres puntos que extiende una lista de argumentos y lo convierten en un array.
function sumar(...valores)
{
let total = 0;
for (i=0; i<valores.length; i++){
total += valores[i];
}
return total
}
console.log( sumar(3,4,5)); //Dará 12
console.log( sumar(2,3 ) ); //Dará 5
Ejemplos
Las funciones Javascript están pensadas para tener un número fijo de parámetros.
Pueden usarse algunos trucos para tener parámetros variables, Uno de ellos es pasar los argumentos medidos en una lista (un array)
function sumar(lista) {
var suma = 0;
for (let i=0; i < lista.length; i++){
suma= suma + lista[ i ];
}
return suma;
Ahora podemos sumar más de dos números. El scritpt es sencillo:
Definir la función sumar con un parámetro
Crear suma con valor 0 para el resutlado
Inicio un bucle para recorrer la lista
sumar a suma el valor de cada elemento de la lista
fin del bucle
suma contiene la suma total.
Para usar esta función los sumandos deben ir dentro de un array, por ejemplo entre corchetes o en una variable tipo Array.
console.log(sumar([1,2,3,4,5])
var sumandos = new Array(4,5,6,7,8,9);
console.log(sumar(sumandos));
Llamar a una función con argumentos como una serie de valores funciona, pero puede ser confuso ¿Que significa cada valor? Algunos lenguajes permiten darle nombres a cada argumento, con Javascript es posible simular este mecanismo. Es tan simple como usar objetos como parámetros de la función
function tickect(prod){
return prod.kilos*prod.precio
}
console.log(ticket( {kilos:5, precio:3} )
Como ves ahora el argumento lleva nombre y sabemos que datos estamos enviando a la función. Además los argumetnos no deben guardar un orden concreto.
Mira un ejemplo de aplciación del objeto function como parámetro de función.
suma = function(a,b){return a+b};
resta = function(a,b){return a-b};
producto = function(a,b){return a*b};
cociente = function(a,b){return a/b};
resto = function(a,b){return a%b};
function calcular(oper,a,b){ return oper(a,b)};
//forma de uso:
console.log( calcular(resto, 4,5) );
Te propongo un ejercicio sencillito amplia esta calculadora para que sea capaz de determinar si un número es par o impar
Notación de flechaPuedes definir la función de forma abreviada con la notación de flecha. Por ejemplo:
sumar = (a, b)=>{return a+b}
Ahora puedes escribir sumar(4,3) y te devolverá 7
Si en lugar de llaves ( { } ) usas paréntesis no es necesario usar la instrucción return. La función devuelve el contenido del paréntesis. Como es lógico esto solo es útil para funciones con una sola instrucción.
Puedes ver más sobre la notación flecha aquí