20 Trucos Imprescindibles de JavaScript que Todo Desarrollador Debe Conocer parte2

Autor: rioyi | Lectura: 7 minutos | May 15, 2024

Descubre técnicas avanzadas y consejos prácticos en esta segunda parte de nuestra serie. Aumenta tu habilidad en JavaScript y lleva tus proyectos al próximo nivel. ¡No te lo pierdas!

20 Trucos Imprescindibles de JavaScript que Todo Desarrollador Debe Conocer parte2

¡Bienvenido a la Parte #2 de nuestra emocionante serie de trucos imperdibles de JavaScript! Si te perdiste la primera entrega, no te preocupes; puedes acceder a ella a través del siguiente enlace:

Parte#1:https://rioyi.dev/posts/20-trucos-de-javascript-que-todo-desarrollador-debe-conocer-parte-1

11. Trabajar con conjuntos (Sets):

Noobs:

const numerosUnicos = [];
const numeros = [1, 2, 2, 3, 4, 4, 5];
for (let i = 0; i < numeros.length; i++) {
  if (!numerosUnicos.includes(numeros[i])) {
    numerosUnicos.push(numeros[i]);
  }
}

Los noobs pueden utilizar bucles y condiciones para crear conjuntos únicos, lo que resulta en un código ineficiente y largo.

Pros:

const numeros = [1, 2, 2, 3, 4, 4, 5];
const numerosUnicos = [...new Set(numeros)];

Los profesionales utilizan el objeto Set y el operador spread para la creación rápida y eficaz de conjuntos únicos, lo que hace que el código sea más elegante y eficaz.

Nota Importante: Uso común de Set:

Eliminar duplicados: Una forma rápida y fácil de eliminar elementos duplicados de un array.
Pruebas de pertenencia: Verificar rápidamente si un elemento existe dentro de un conjunto, lo cual es más eficiente que verificar en una lista o un array.

12. Uso de bind() para el contexto de funciones:

Noobs:

function saludar() {
  console.log('Hola, ' + this.name + '!');
}
const persona = { name: 'Alice' };
const saludarVinculado = function() {
  saludar.call(persona);
};
saludarVinculado();  // Salida: Hola, Alice!

Los noobs usan usualmente call() o apply() para enlazar funciones manualmente, lo que lleva a un código verboso y repetitivo.

Pros:

function saludar() {
  console.log('Hola, ' + this.name + '!');
}
const persona = { name: 'Alice' };
const saludarVinculado = saludar.bind(persona);
saludarVinculado();  // Salida: Hola, Alice!

Pros utilizan el método bind() para establecer el contexto de una función de forma permanente, lo que resulta en un código más limpio y legible.

13. Uso de Object.assign() para la fusión de objetos:

Noobs:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const fusionado = {};
for (let clave in obj1) {
  fusionado[clave] = obj1[clave];
}
for (let clave in obj2) {
  fusionado[clave] = obj2[clave];
}

Los noobs pueden utilizar bucles para combinar objetos manualmente, lo que conduce a un código propenso a errores.

Pros:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinado = Object.assign({}, obj1, obj2);

Los pros utilizan Object.assign() para combinar objetos sin esfuerzo, lo que resulta en un código conciso y eficiente.

14. Uso de Array.from() para la asignación y el filtrado:

Noobs:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
const evenSquaredNumbers = squaredNumbers.filter(number => number % 2 === 0);

Los noobs podrían utilizar operaciones map() y filter() por separado, lo que daría lugar a matrices intermedias y a un código menos eficiente.

Pros:

const numbers = [1, 2, 3, 4, 5];
const evenSquaredNumbers = Array.from(numbers, number => number * number).filter(number => number % 2 === 0);

Los pros utilizan Array.from() con una función de asignación para combinar la asignación y el filtrado en un solo paso, lo que da como resultado un código más conciso y eficaz.

Nota importante: Si el rendimiento no es una preocupación principal y valoras la claridad y la facilidad de mantenimiento, el primer enfoque podría ser más adecuado. Si prefieres un enfoque más conciso y ligeramente más eficiente en la utilización de recursos, el segundo enfoque podría ser preferible.

15. Utilización del parámetro Rest:

Noobs:

function suma(a, b) {
  const numeros = [a, b];
  return numeros.reduce((total, num) => total + num, 0);
}

Los noobs pueden usar un array para manejar un número de variables como parámetros, lo que puede ser engorroso y menos intuitivo.

Pros:

function suma(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

Pros utilizan el parámetro rest (...numbers) para manejar directamente números de variables en los parámetros, mejorando la legibilidad y flexibilidad del código.

16. Optimización de Loops:

Noobs:

const numeros = [1, 2, 3, 4, 5];
const numerosDoblados = [];
for (let i = 0; i < numeros.length; i++) {
  numerosDoblados.push(numeros[i] * 2);
}

Los noobs pueden usar bucles for tradicionales, que pueden ser menos expresivos y más difíciles de leer.

Pros:

const numeros = [1, 2, 3, 4, 5];
const numerosDoblados = numberos.map(numbero => numbero * 2);

Los pros prefieren utilizar métodos de array como map() para obtener un código más legible y expresivo, mejorando la mantenibilidad del código.

Nota importante: No es malo usar un ciclo for en JavaScript hoy en día; de hecho, dependiendo del contexto y de lo que necesitas lograr, un ciclo for puede ser una herramienta perfectamente adecuada y eficiente. La elección entre usar un ciclo for tradicional y métodos como map, filter, reduce, u otros métodos de arrays, depende principalmente de dos factores: legibilidad y el tipo de operación que estás realizando.😁

17. Uso de Array.prototype.reduce() para operaciones complejas

Noobs:

const numberos = [1, 2, 3, 4, 5];
let suma = 0;
for (let i = 0; i < numberos.length; i++) {
  suma += numberos[i];
}

Los novatos pueden utilizar bucles para operaciones complejas como la suma de elementos, lo que puede resultar menos elegante y conciso.

Pros:

const numberos = [1, 2, 3, 4, 5];
const suma = numberos.reduce((total, num) => total + num, 0);

Los pros aprovechan reduce() para operaciones complejas, proporcionando un enfoque más elegante y funcional, mejorando la legibilidad del código.

18. Manejo de fechas y horarios:

Noobs:

const ahora = new Date();
const año = ahora.getFullYear();
const mes = ahora.getMonth() + 1; // +1 porque getMonth() devuelve un índice de 0 a 11
const día = ahora.getDate();

Los novatos pueden manejar las fechas y las horas de forma individual, lo que puede dar lugar a errores y resultar engorroso para operaciones de fechas más complejas.

Pros:

const ahora = new Date();
const [año, mes, día] = [ahora.getFullYear(), ahora.getMonth() + 1, ahora.getDate()];

Pros utilizan la desestructuración de matrices para manejar fechas y horas, lo que resulta en un código más limpio y legible, especialmente cuando se trata de múltiples componentes de fecha.

19. Working with JSON Data:

Noobs:

const datosJson = '{"name": "John", "age": 30}';
const datosParseados = JSON.parse(datosJson);
console.log(datosParseados.name); // Salida: 'John'

Los Noobs pueden parsear datos JSON usando JSON.parse(), pero pueden no manejar errores o casos extremos.

Pros:

const datosJson = '{"name": "John", "age": 30}';
try {
  const datosParseados = JSON.parse(datosJson);
  console.log(datosParseados.name); // Salida: 'John'
} catch (error) {
  console.error('Datos JSON inválidos:', error);
}

Pros manejan el análisis JSON dentro de un bloque try...catch para manejar los errores con elegancia, asegurando la robustez y evitando posibles caídas de la aplicación debido a datos malformados.

20. Using Modules for Code Organization:

Noobs:

// script1.js
function saludar(nombre) {
  console.log('Hola, ' + nombre + '!');
}
saludar('Alice');

// script2.js
function calcularCuadrado(numero) {
  return numero * numero;
}
console.log(calcularCuadrado(3));

Los novatos pueden escribir todo el código en un único archivo, lo que puede llevar a una mala organización y mantenimiento, especialmente en aplicaciones grandes.

Pros:

// saludos.js
export function saludar(nombre) {
  console.log('Hola, ' + nombre + '!');
}

// calculos.js
export function calcularCuadrado(numero) {
  return numero * numero;
}

// principal.js
import { saludar } from './saludos';
import { calcularCuadrado } from './calculos';

saludar('Alice');
console.log(calcularCuadrado(3));

Los profesionales modularizan su código en archivos independientes y utilizan declaraciones de importación y exportación para mantener una estructura de proyecto limpia, organizada y fácil de mantener.

Conclusión

Al reconocer estas diferencias en la forma en que los principiantes y los desarrolladores experimentados abordan diversos trucos de JavaScript, puedes transformar tu estilo de codificación de principiante a profesional. La adopción de estas técnicas no sólo aumenta la eficacia del código, sino que también mejora la legibilidad, el mantenimiento y la experiencia general del desarrollador. Sigue explorando, practicando y experimentando con estos conceptos avanzados para mejorar tus conocimientos de JavaScript. ¡Feliz programación!

¿Disfrutas mi contenido?

¡Considera invitarme un café para apoyarme a manter los servidores!

Javascript