20 Trucos de JavaScript que Todo Desarrollador Debe Conocer parte1
Autor: rioyi | Lectura: 7 minutos | May 15, 2024
Explora los trucos avanzados de JavaScript que todo desarrollador debería conocer. Mejora la eficiencia y calidad de tu código con estas técnicas esenciales para escribir JavaScript de manera más profesional y efectiva.
La tarea de escribir código puede ser larga y desafiante, especialmente para aquellos que están dando sus primeros pasos. Sin embargo, mejorar la eficiencia y productividad en JavaScript es factible con algunos trucos profesionales. vamos a estar publicando consejos esenciales que te ayudarán a dominar JavaScript. En este análisis, exploramos cómo tanto principiantes ("noobs") como desarrolladores experimentados ("pros") abordan estos trucos, brindándote la oportunidad de aprender a escribir código más eficiente, conciso y elegante. ¡Descubre cómo mejorar tus habilidades y llevar tu programación al siguiente nivel comenzando desde lo más básico!
1. Comprender la declaración de variables:
noobs:
var x = 10
Los novatos a menudo utilizan la palabra clave var para la declaración de variables, lo que tiene problemas relacionados con el alcance y podría conducir a un comportamiento inesperado en proyectos más grandes.
pros:
let x = 10;
Para profundizar el tema te recomiendo este post:
https://rioyi.dev/posts/domina-javascript-las-claves-para-usar-let-vs-var
2 Funciones de flecha
noobs:
function add(a, b) {
return a + b;
}
pros:
const add = (a, b) => a + b;
Utiliza funciones de flecha para una sintaxis concisa, un alcance léxico y el mantenimiento de este contexto, haciendo que el código sea más expresivo y limpio.
3 Manejo de parámetros por defecto:
noobs:
function greet(name) {
name = name || 'Guest';
console.log('Hello, ' + name + '!');
}
pros:
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
Pros aprovechan los valores por defecto de los parámetros directamente en la firma de la función, proporcionando una forma más segura e intuitiva de manejar los valores por defecto.
4 Iteración de matrices:
noobs:
const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Los noobs a menudo utilizan bucles tradicionales para la iteración de matrices, que pueden ser propensos a errores y menos legibles.
pros:
const numbers = [1, 2, 3]; numbers.forEach(number => console.log(number));
Los pros utilizan métodos de matrices como forEach(), que ofrecen una forma más declarativa y legible de iterar a través de matrices.
5 Plantillas Literales:
noobs:
const name = 'Alice';
console.log('Hello, ' + name + '!');
Los noobs pueden concatenar cadenas usando +, lo que puede ser engorroso y menos legible, especialmente con múltiples variables.
pros:
const name = 'Alice';
console.log(`Hello, ${name}!`);
Los pros adoptan literales de plantilla (${}) para la interpolación de cadenas, lo que hace que el código sea más conciso, legible y expresivo.
6 Desestructuración de objetos:
noobs:
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;
Los noobs extraen las propiedades de objetos utilizando asignaciones de variables individuales, lo que llevaría a código redundante.
pros:
const person = { name: 'John', age: 30 };
const { name, age } = person;
Los pros aprovechan la desestructuración de objetos para asignar variables de forma concisa, mejorando la legibilidad del código y reduciendo la duplicación.
7 Uso de map() para la transformación de matrices:
noobs:
const numbers = [1, 2, 3];
const squaredNumbers = [];
for (let i = 0; i < numbers.length; i++) {
squaredNumbers.push(numbers[i] * numbers[i]);
}
Los noobs pueden utilizar un bucle para transformar los elementos de la matriz, lo que puede dar lugar a un código verborreico y propenso a errores.
pros:
const numbers = [1, 2, 3]; const squaredNumbers = numbers.map(number => number * number);
Pros utilizan el método map() para transformaciones de arrays concisas y expresivas, haciendo el código más elegante y legible.
8 Manejo de operaciones asíncronas con promesas:
noobs:
function fetchData() {
return new Promise((resolve, reject) => {
// Asynchronous operation
if (success) {
resolve(data);
} else {
reject(error);
}
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
Los noobs pueden tener problemas con las complejidades del manejo de operaciones asíncronas, lo que lleva a devoluciones de llamada anidadas y a un código menos fácil de mantener.
pros:
async function fetchData() {
try {
const data = await fetch('https://api.example.com/data');
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
Los pros utilizan async/await para las operaciones asíncronas, lo que simplifica la estructura del código, mejora la legibilidad y facilita la gestión de errores.
9 Memoización para optimizar el rendimiento:
noobs:
function factorial(num) {
if (num === 0) {
return 1;
} else {
return num * factorial(num - 1);
}
}
Los noobs pueden no ser conscientes de la memoización, lo que lleva a cálculos recursivos ineficientes, especialmente para entradas grandes.
pros:
function memoize(func) {
const cache = {};
return function(n) {
if (n in cache) {
return cache[n];
} else {
const result = func(n);
cache[n] = result;
return result;
}
};
}
const memoizedFactorial = memoize(function factorial(num) {
if (num === 0) {
return 1;
} else {
return num * memoizedFactorial(num - 1);
}
});
Pros aplican técnicas de memoización para optimizar las funciones recursivas, reduciendo los cálculos redundantes y mejorando notablemente el rendimiento.
Nota importante: La memoización en JavaScript es como tener una caja de tesoros donde guardas respuestas especiales para no tener que resolver el mismo problema muchas veces. Cada vez que resuelves un problema, guardas la solución en tu caja. Si te preguntan lo mismo otra vez, simplemente sacas la respuesta de la caja en lugar de resolverlo de nuevo. Esto hace que todo sea más rápido.
Ejemplo:
function memoize(func) {
let cache = {};
return function(n) {
if (cache[n] != undefined) {
return cache[n]; // Si ya tenemos la respuesta, la devolvemos.
} else {
let result = func(n); // Calculamos la respuesta porque es la primera vez.
cache[n] = result; // Guardamos la respuesta en la caja para la próxima vez.
return result;
}
};
}
function sumaCinco(num) {
return num + 5;
}
// Creamos una versión memorizada de nuestra función sumaCinco
let sumaCincoMemoizada = memoize(sumaCinco);
console.log(sumaCincoMemoizada(10)); // Calcula y guarda 15 en el caché
console.log(sumaCincoMemoizada(10)); // Obtiene 15 directamente del caché, más rápido
En este ejemplo, memoize es una función que crea la caja de tesoros para cualquier función que le pases. En este caso, le pasamos una función simple que suma cinco a cualquier número. Después de la primera vez que calculamos algo con esta función, guardamos el resultado, así que la próxima vez que lo necesitemos, ya está listo y no tenemos que sumar de nuevo.
10 Manejo de condiciones múltiples:
noobs:
const value = 3;
let result;
if (value === 1) {
result = 'One';
} else if (value === 2) {
result = 'Two';
} else {
result = 'Other';
}
Los noobs pueden usar múltiples sentencias if-else para manejar diferentes condiciones, lo que lleva a un código verboso y menos mantenible.
pros:
const value = 3; const result = value === 1 ? 'One' : value === 2 ? 'Two' : 'Other';
Los pros aprovechan los operadores ternarios para manejar las condiciones de forma concisa, mejorando la legibilidad del código y reduciendo el anidamiento.
Nota importante: La anidación de operadores ternarios en JavaScript puede ser útil para tomar decisiones condicionales rápidas en una sola línea de código, pero generalmente no se considera una buena práctica debido a varios motivos:
Nota importante: La anidación de operadores ternarios en JavaScript puede ser útil para tomar decisiones condicionales rápidas en una sola línea de código, pero generalmente no se considera una buena práctica debido a varios motivos:
- Legibilidad: Los ternarios anidados pueden ser difíciles de leer y entender, especialmente para quienes no están familiarizados con el código. A medida que se añaden más condiciones, el código puede volverse confuso y menos intuitivo.
- Mantenimiento: Modificar una estructura de ternarios anidados puede ser complicado y propenso a errores, ya que cualquier cambio requiere una comprensión clara de toda la expresión condicional.
- Depuración: Rastrear problemas en expresiones ternarias anidadas puede ser más difícil que en estructuras de control de flujo más tradicionales como if y else, donde los puntos de interrupción y las trazas de la pila son más claros y fáciles de seguir.
Por estas razones, aunque técnicamente es posible y válido usar ternarios anidados, a menudo se recomienda optar por alternativas más claras y estructuradas como if-else o incluso extraer la lógica a funciones separadas para mejorar la claridad y la reusabilidad del código.
¡Pronto llegará la segunda parte de esta serie! Estate atento para más contenido.
¿Disfrutas mi contenido?
¡Considera invitarme un café para apoyarme a manter los servidores!
