Mejora tu código JavaScript 🔥 7 tips muy útiles

Hoy te compartiré 7 tips para mejorar la calidad de tu código JavaScript.

Estos "trucos" son importantes, y todo desarrollador JS los debería conocer.

💡 Usa Object Destructuring

Object destructuring te permite extraer los atributos de un objeto en distintas variables.

Esto hará tu código más limpio, porque no tendrás repetir la notación de punto para acceder a cada dato.

Ejemplo:

const user = {
  name: 'Juan',
  age: 28
};

Sin destructuring:

const name = user.name; 
const age = user.age;

Usando destructuring:

const { name, age } = user;

Se ve bonito, ¿verdad?

Incluso quienes empiezan lo entenderán fácilmente 😀

🧹 Usa Default Parameters

Los parámetros por defecto te permiten definir valores que serán usados por tus funciones, cuando ningún valor es enviado como argumento.

Esto evitará que tengas que redefinir los valores de tus variables continuamente.

Ejemplo:

// Resultado esperado
greet(); // Hola extraño
greet('Juan'); // Hola Juan

// Cómo se logra
function greet(name = 'extraño') {
  console.log('Hola ' + name);
}

Los valores por defecto harán que tus funciones sean más flexibles de usar.

📚 Usa Template Literals

Los template literals te permiten concatenar cadenas de una manera mucho más limpia que de la forma tradicional.

Te encontrarás usando expresiones ${así} en vez de muchos símbolos +.

Ejemplo:

// Variables a usar
const name = 'Juan';
const age = 28;

Sin template literals:

const greeting = 'Hola ' + name + ', tú tienes ' + age + ' años';

Usando template literals:

const greeting = `Hola ${name}, tú tienes ${age} años`; 

!De este modo la concatenación ya no es tan molesta!

✂ Usa Array Destructuring

Array destructuring funciona de manera similar que object destructuring, y te permite extraer los elementos de un arreglo en variables.

Ejemplo:

const fruits = ['apples', 'oranges', 'bananas'];

// Sin destructuring
const fruit1 = fruits[0];
const fruit2 = fruits[1]; 

// Usando destructuring
const [fruit1, fruit2] = fruits;

Mucho más simple, como puedes ver.

🏃 Usa Array Methods

JavaScript cuenta con métodos para arreglos que nos ayudan a escribir código más limpio.

Tenemos map(), filter(), find(), reduce(), etc., para evitar el uso excesivo de bucles, y hacer nuestro código más expresivo.

Ejemplo:

// Filtrar: sólo números pares
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Obtener sólo nombres, de cada objeto
const names = users.map(user => user.name); 

Estos métodos son muy fáciles de entender, y simplifican nuestro código.

🧠 Usa Ternary Operator

El operador ternario te permite escribir condiciones if else de una manera mucho más simple.

Ejemplo:

// Sin operador ternario
let message;

if (isLoggedIn) {
  message = 'Bienvenido!';
} else {
  message = 'Por favor inicia sesión';
}

Usando operador ternario:

const message = isLoggedIn ? 'Bienvenido!' : 'Por favor inicia sesión';

Para facilitar la lectura también lo puedes escribir así:

const message = isLoggedIn 
  ? 'Bienvenido!' 
  : 'Por favor inicia sesión';

🛠 Usa Object Methods

JavaScript cuenta con métodos para objetos, tales como Object.keys(), Object.values(), JSON.stringify(), etc.

Usa estos métodos para evitar reimplementar tareas ya resueltas por el lenguaje.

// Obtener las claves de un objeto
const keys = Object.keys(user);

// Convertir un objeto a JSON
const json = JSON.stringify(user);

Aprende viendo

Si prefieres ver la explicación en formato de video, aquí lo tienes 😇:

Bonus: Var VS Let

Es importante que conozcas la diferencia entre estos 2.

Y comprendas por qué es importante usar let en vez de var.

Para que lo entiendas rápidamente basta ver los siguientes ejemplos:

function ejemploVar() {
  var x = 1;

  if (true) {
    var x = 2;
    console.log(x); // imprime 2
  }

  console.log(x); // también imprime 2
}

Con let no tendrás este problema de ámbitos, al declarar tus variables:

function ejemploLet() {
  let x = 1;

  if (true) {
    let x = 2;
    console.log(x); // imprime 2
  }

  console.log(x); // imprime 1
}

Conclusión

Como puedes ver, mejorar la calidad de tu código no es tan complicado.

Es cuestión de prácticar, y de acostumbrarte a leer código de terceros.

Para continuar aprendiendo, te recomiendo seguir mi curso de JavaScript ⚡️.

# javascript