Las funciones en JavaScript son bloques de código que realizar tareas particulares para las que son diseñadas, pueden retornar un valor o ninguno. Estas se ejecutan cuando son invocadas, esta invocación puede ocurrir cuando:
- Al ocurrir un evento como: el usuario presiona algo ("onclick" generalmente) o cambia el estado de un elemento (por ejemplo "onchange").
- Cuando otra función llama a la función.
- Cuando son funciones que se invocan automáticamente al cargar una página HTML por ejemplo.
Las funciones, además, pueden tener de cero a más parámetros, variables locales
y llamar dentro a otras funciones. Por ejemplo, llamar a la función 'Alert'.
Sintaxis
Se coloca la palabra reservada "function", luego el nombre de la función (este no debe empezar con números ni contener espacios en blanco), seguido de los parámetros dentro de paréntesis que son separados por comas si son dos o más. Finalmente, entre llaves se coloca el código de la función.function nombre(parámetros) {
// código a ejecutarse
} | Función sin retorno | Función con retorno |
|---|---|
|
|
Invocar una función
Dependiendo si la función tiene retorno o no, se invoca de diferentes maneras.| Función sin retorno | Función con retorno |
|---|---|
|
|
Parámetros predeterminados
Permite que al invocar una función sus parámetros pueden ser obviados al declararse valores predefinidos. Por ejemplo:
function producto(a, b = 1) {
return r = a * b;
}
console.log(producto(2, 4)); // Resultado: 8, a y b están definidos
console.log(producto(2)); // Resultado: 2, b por defecto tiene valor 1
Parámetros rest
Permite que una función tenga un número indefinido de parámetros. Por ejemplo:
function sumaRest(...rest) {
return rest.reduce((a, v) => a + v);
}
console.log(sumaRest(1, 2)); //3
console.log(sumaRest(1, 2, 3)); //6
console.log(sumaRest(1, 2, 3, 4)); //10
Se puede apreciar que la función puede recibir distintas cantidades de parámetros y ejecuta la operación de suma en todos los casos. Se puede mejorar o crear una diferente para que tenga el mismo comportamiento recibiendo además de valores sueltos a arreglos numéricos
function sumaArreglosRest(...ar) {
return ar.flat().reduce((a, v) => a + v);
}
let numsA = [1, 2, 3, 4, 5];
let numsB = [6, 7, 8, 9, 10];
console.log("Suma numsA: " + sumaArreglosRest(numsA)); //15
console.log("Suma numsB: " + sumaArreglosRest(numsB)); //40
console.log("Suma numsA y numsB: " + sumaArreglosRest(numsA, numsB)); //55
Funciones arrow (flecha)
Son funciones de tipo anónimo que simplifican la construcción de las funciones mediante el uso de las sintaxis lambda y apoyarse en diversos métodos como Map, Reduce o Filter para trabajar con arreglos de manera más simple. Ejemplos
const saludoArrow = () => "Hola JavaScript";
console.log(saludoArrow());
const dobleArrow = a => 2 * a;
console.log("Doble de 2: " + dobleArrow(2));
const sumaArrow = (a, b) => a + b;
console.log("Suma 1 y 2: " + sumaArrow(1, 2));
const promedioArrow = (a = 0, ...r) => {
if (r.length === 0) {
return a;
}
let prom = a;
let c = 1;
prom += r.reduce((a, v) => a + v);
c += r.length;
prom /= c;
return prom;
};
console.log("Promedio sin parámetros: " + promedioArrow());
console.log("Promedio de 10: " + promedioArrow(10));
console.log("Promedio de 10 y 20: " + promedioArrow(10, 20));
console.log("Promedio de 1, 2, 3, 4 y 5: " + promedioArrow(1, 2, 3, 4, 5));
Nota: se aprecia que cuando existen 2 parámetros a más o ninguno es necesario usar paréntesis. Por ejemplo, () o (a = 0, ...r), en caso sea un solo parámetro el uso es opcional. En caso del cuerpo de la función si es una sola línea el uso de llaves { } es opcional, en caso de ser más líneas de código se deben emplear como en el último ejemplo.
