5 funciones avanzadas de JavaScript que puede usar para mejorar la calidad de su código

JavaScript es el lenguaje de facto para crear aplicaciones web y móviles modernas. Impulsa una amplia gama de proyectos, desde sitios web simples hasta aplicaciones dinámicas e interactivas.

Para crear productos que a los usuarios les encanten y aprecien, es esencial que escriba un código que no solo sea funcional sino también eficiente y fácil de mantener. El código JavaScript limpio es vital para el éxito de cualquier aplicación web o móvil, ya sea un proyecto secundario de pasatiempo o una aplicación comercial compleja.

¿Qué tienen de bueno las funciones de JavaScript?

Una función es un componente esencial para escribir código en cualquier aplicación. Define un fragmento de código reutilizable que puede invocar para realizar una tarea específica.

Más allá de su reutilización, las funciones son muy versátiles. A la larga, simplifican el proceso de escalado y mantenimiento de una base de código. Por

crear y usar las funciones de JavaScript, puede ahorrar mucho tiempo de desarrollo.

Aquí hay algunas funciones útiles de JavaScript que pueden mejorar significativamente la calidad del código de su proyecto.

1. una vez

Esta función única de orden superior envuelve otra función para garantizar que solo pueda llamarla una sola vez. Debería ignorar silenciosamente los intentos posteriores de llamar a la función resultante.

Considere una situación en la que desea realizar solicitudes de API HTTP para obtener datos de una base de datos. Puede adjuntar el una vez funcionar como una devolución de llamada para una función de escucha de eventos, para que se dispare una vez y no más.

Así es como podría definir una función de este tipo:

constante una vez = (función) => {
dejar resultado;
dejar llamadofunc = FALSO;
devolver(...argumentos) => {
si (!llamadafunción) {
 resultado = func(...argumentos);
 llamadofunc = verdadero;
 }
devolver resultado;
 };
};

La función once toma una función como argumento y devuelve una nueva función a la que solo puede llamar una vez. Cuando llama a la nueva función por primera vez, ejecuta la función original con los argumentos proporcionados y guarda el resultado.

Cualquier llamada posterior a la nueva función devuelve el resultado guardado sin volver a ejecutar la función original. Eche un vistazo a la implementación a continuación:

// Definir una función para obtener datos de la base de datos
funciónobtener datos de usuario() {
// ...
}
// obtener una versión de la función getUserData que solo puede ejecutarse una vez
constante makeHTTPRequestOnlyOnce = una vez (getUserData);
constante usuarioDataBtn = documento.querySelector("#btn");
userDataBtn.addEventListener("hacer clic", hacer HTTPRequestOnlyOnce);

Al usar la función una vez, puede garantizar que el código solo envíe una solicitud, incluso si el usuario hace clic en el botón varias veces. Esto evita problemas de rendimiento y errores que pueden resultar de solicitudes redundantes.

2. tubo

Esta función de canalización le permite encadenar varias funciones en una secuencia. Las funciones de la secuencia tomarán el resultado de la función anterior como entrada y la última función de la secuencia calculará el resultado final.

Aquí hay un ejemplo en código:

// Definir la función de tubería
constante tubería = (...funciones) => {
devolver(argumento) => {
 funciones.paraCada(función(función) {
 arg = función (arg);
 });
devolver argumento;
 }
}
// Definir algunas funciones
constante agregarUno = (a) => un + 1;
constante doble = (X) => X * 2;
constante cuadrado = (X) => x * x;
// Crea una tubería con las funciones
constante myPipe = tubería (addOne, double, square);
// Probar la tubería con un valor de entrada
consola.log (miTubería(2)); // Salida: 36

Las funciones de tubería pueden mejorar la legibilidad y la modularidad del código al permitirle escribir lógica de procesamiento compleja de manera concisa. Esto puede hacer que su código sea más comprensible y más fácil de mantener.

3. mapa

La función map es un método de la clase JavaScript Array integrada. Crea una nueva matriz aplicando una función de devolución de llamada a cada elemento de la matriz original.

Recorre cada elemento de la matriz de entrada, lo pasa como una entrada a la función de devolución de llamada e inserta cada resultado en una nueva matriz.

Lo que es importante tener en cuenta es que la matriz original no se modifica de ninguna manera durante este proceso.

Aquí hay un ejemplo de cómo usar mapa:

constante números = [1, 2, 3, 4, 5];
constante numerosdoblados = numeros.mapa(función(número) {
devolver número * 2;
});
consola.log (números duplicados);
// Salida: [2, 4, 6, 8, 10]

En este ejemplo, la función de mapa itera sobre cada elemento en la matriz de números. Multiplica cada elemento por 2 y devuelve los resultados en una nueva matriz.

Generalmente, las funciones de mapa eliminan la necesidad de usando bucles en JavaScript, especialmente los infinitos: los bucles infinitos pueden causar una sobrecarga computacional significativa, lo que genera problemas de rendimiento en una aplicación. Esto hace que el código base sea más conciso y menos propenso a errores.

4. elegir

Esta función de selección le permite extraer de forma selectiva propiedades específicas de un objeto existente y generar un nuevo objeto con esas propiedades como resultado del cálculo.

Por ejemplo, considere una función de informes en una aplicación, al utilizar la función de selección, puede personalizar sin esfuerzo diferentes informes basados ​​en la información de usuario deseada especificando explícitamente las propiedades que desea incluir en varios informes.

Aquí hay un ejemplo en código:

constante recoger = (objeto, ...llaves) => {
devolver teclas.reducir((resultado, clave) => {
si (objeto.hasOwnProperty (clave)) {
 resultado[clave] = objeto[clave];
 }
devolver resultado;
 }, {});
};

La función de selección toma un objeto y cualquier número de claves como argumentos. Las claves representan las propiedades que desea seleccionar. Luego devuelve un nuevo objeto que contiene solo las propiedades del objeto original con claves coincidentes.

constante usuario = {
 nombre: 'Martín',
 edad: 30,
 correo electrónico: '[email protected]',
};
consola.log (elegir (usuario, 'nombre', 'edad'));
// Salida: { nombre: 'Martin', edad: 30 }

Esencialmente, una función de selección puede encapsular una lógica de filtrado compleja en una sola función, lo que hace que el código sea más fácil de entender y depurar.

También puede promover la reutilización del código, ya que puede reutilizar la función de selección en toda su base de código, lo que reduce la duplicación de código.

5. cremallera

Esta función zip combina arreglos en un solo arreglo de tuplas, haciendo coincidir los elementos correspondientes de cada arreglo de entrada.

Aquí hay un ejemplo de implementación de una función zip:

funcióncremallera(...matrices) {
constante maxLength = Matemáticas.min(...matrices.mapa(formación => matriz.longitud));
devolverFormación.de(
 { longitud: longitud máxima },
 (_, índice) => arreglos.mapa(formación => matriz[índice])
 );
};
constante un = [1, 2, 3];
constante segundo = ['a', 'b', 'C'];
constante c = [verdadero, FALSO, verdadero];
consola.log (código postal (a, b, c));
// Salida: [[1, 'a', verdadero], [2, 'b', falso], [3, 'c', verdadero]]

La función zip acepta matrices de entrada y calcula su longitud más larga. Luego crea y devuelve una sola matriz utilizando el método Array.from JavaScript. Esta nueva matriz contiene elementos de cada matriz de entrada.

Esto es especialmente útil si necesita combinar datos de varias fuentes al instante, lo que elimina la necesidad de escribir código redundante que, de lo contrario, abarrotaría su base de código.

Trabajar con funciones de JavaScript en su código

Las funciones de JavaScript mejoran en gran medida la calidad de su código al proporcionar una forma simplificada y compacta de manejar gran parte de la lógica de programación para bases de código pequeñas y grandes. Al comprender y usar estas funciones, puede escribir aplicaciones más eficientes, legibles y fáciles de mantener.

Escribir un buen código hace posible crear productos que no solo resuelvan un problema particular para los usuarios finales, sino que lo hagan de una manera que sea fácil de modificar.