Saltar al contenido

10 trucos de JavaScript que todo desarrollador web debe conocer

Si optimiza su código JavaScript con estos trucos, puede ayudarlo a escribir código más limpio, ahorrar recursos y optimizar su tiempo de programación.

Según RedMonk, JavaScript es el lenguaje de programación más popular. Además, SlashData estima que alrededor de 12,4 millones de desarrolladores utilizan JavaScript, que también incluye CoffeeScript y TypeScript de Microsoft.

Esto significa que millones de personas usan JavaScript para trabajar como programadores, realizar trabajos independientes a través de sitios como UpWork y Freelancer, o incluso comenzar sus propios negocios de desarrollo web.

freeCodeCamp tiene un excelente curso básico sobre JavaScript. Pero, si ya está familiarizado con los fundamentos y desea mejorar su dominio de JavaScript, aquí hay diez trucos que debe aprender e integrar en su flujo de trabajo.

1. Cómo utilizar atajos para condicionales

JavaScript le permite usar ciertos atajos para hacer que su código sea más agradable a la vista. En algunos casos simples, puede utilizar operadores lógicos && y || en vez de if y else.

Veamos el && operador en acción.

Fragmento de ejemplo:

los || El operador funciona como una cláusula “o”. Ahora, usar este operador es un poco más complicado ya que puede evitar que la aplicación se ejecute. Sin embargo, podemos agregar una condición para evitarlo.

Fragmento de ejemplo:

2. Cómo convertir a una integral usando el operador ~~

Eliminar decimales para devolver una integral usando math.floor o math.round toma recursos. Una forma más eficiente es utilizar ~~ operador.

Fragmento de ejemplo:

3. Cambiar el tamaño o vaciar una matriz con array.length

A veces es necesario ajustar el tamaño de su matriz o vaciarla. La forma más eficiente de hacer esto es usando array.length.

Fragmento de ejemplo:

También puedes usar array.length para eliminar todos los valores de una matriz especificada.

Fragmento de ejemplo:

4. Cómo fusionar matrices sin provocar una sobrecarga del servidor

Podría ser una carga seria para el servidor al fusionar arreglos, especialmente si se trata de grandes conjuntos de datos. Para simplificar las cosas y mantener los niveles de rendimiento, utilice el array.concat() y array.push.apply(arr1, arr2) funciones.

El uso de cualquiera de estas funciones depende del tamaño de sus matrices.

Veamos cómo tratar con matrices más pequeñas.

Fragmento de ejemplo:

Al usar el array.concat() funcionar en conjuntos de datos más grandes, consumirá mucha memoria al crear una nueva matriz. Para evitar la caída del rendimiento, utilice array.push.apply(arr1, arr2) que consolida la segunda matriz en la primera sin crear una nueva matriz.

Fragmento de ejemplo:

5. Cómo utilizar filtros con matrices

Filtrar una matriz es útil cuando trabaja con varias columnas de datos correspondientes. En este caso, puede incluir y excluir datos según cualquier característica que describa un grupo en su matriz.

Para filtrar una matriz, use el filter() función.

Fragmento de ejemplo:

También puedes usar filter() Juntos con Boolean para devolver todos los valores nulos o indefinidos de su matriz.

Fragmento de ejemplo:

Suponga que tiene un conjunto de datos de valores repetidos y necesita producir valores únicos a partir de este conjunto. Puede hacerlo con una combinación de sintaxis de propagación ... y tipo de objeto Set. Este enfoque funciona tanto con palabras como con números.

Fragmento de ejemplo:

7. Cómo utilizar el acceso directo a la función Reemplazar

Debe estar familiarizado con el string.replace() función. Sin embargo, solo reemplaza una cadena con una línea específica una vez y se detiene desde allí. Suponga que tiene un conjunto de datos más grande y necesita escribir esta función varias veces. Se vuelve frustrante después de un tiempo.

Para hacer su vida más fácil, puede agregar /g al final de la expresión regular, por lo que la función se ejecuta y reemplaza todas las condiciones coincidentes sin detenerse en la primera.

Fragmento de ejemplo:

8. Cómo almacenar en caché las variables

Cuando trabaja con matrices grandes y necesita solicitar elementos por ID usando getElementById(), o por nombre de clase usando getElementsByClassName(), luego JavaScript se ejecuta a través de la matriz en un bucle con cada solicitud de elemento similar. Esto podría consumir muchos recursos.

Sin embargo, puede aumentar el rendimiento almacenando en caché una variable si sabe que utiliza regularmente una selección específica.

Fragmento de ejemplo:

9. Cómo comprobar si un objeto tiene valores

Cuando trabaja con varios objetos, resulta difícil realizar un seguimiento de cuáles contienen valores reales y cuáles puede eliminar.

Aquí hay un truco rápido sobre cómo verificar si un objeto está vacío o tiene un valor con Object.keys() función.

Fragmento de ejemplo:

10. Cómo minimizar sus archivos JavaScript

Los archivos JS grandes afectan la carga y el rendimiento de respuesta de su página. Mientras escribe su código, podría quedarse con líneas, comentarios y código inactivo innecesarios. Dependiendo del tamaño de su archivo, puede acumularse y convertirse en un cuello de botella redundante.

Hay un par de herramientas para ayudarlo a limpiar el código y hacer que los archivos JS sean más ligeros, o minimizarlos, en términos de los desarrolladores. Aunque la minificación del archivo JS no es un truco en sí, es beneficioso que los desarrolladores lo conozcan e implementen.

Uno es Google Closure Compiler, que analiza su JavaScript, lo analiza, elimina el código muerto y reescribe y minimiza lo que queda. El otro es Microsoft Ajax Minifier, que le permite mejorar el rendimiento de su aplicación web al reducir el tamaño de sus archivos JavaScript.

Ahí tienes. Utilice estos diez trucos para hacer su código más limpio, ahorrar recursos del servidor y retener el tiempo de programación.

¡Gracias por leer!

Soy un escritor apasionado por el marketing digital, el desarrollo web y la ciberseguridad. Puedes contactarme en LinkedIn aquí.

Este contenido se publicó originalmente aquí.