6 trucos para mejorar el código JavaScript

No es fácil mantenerse al día con las últimas tendencias en la comunidad de desarrolladores front-end. Todo se está desarrollando rápidamente. Constantemente surgen nuevos marcos, bibliotecas y funciones.

Aquí hay una descripción general rápida de 6 enfoques de JavaScript para desarrolladores front-end.

Cadenas opcionales

Las cadenas opcionales son una adición pequeña pero muy útil al lenguaje, ya que hacen que el código sea más corto y limpio. Las cadenas opcionales indican si existen valores en el objeto:

const someObject = {
  profile: {
    firstName: 'Nicky',
    lastName: 'Christensen',
    country: 'Dinamarca'
  }
}

// Con operadores de encadenamiento opcional:
if (someObject?.profile?.firstName){ 
 console.log('Nombre es 1: ', someObject.profile.firstName)
}// Navegación segura a través del grafo de objetos

// Método antiguo sin utilizar operadores de encadenamiento opcional:
if (someObject && someObject.profile && someObject.profile.firstName){ 
 console.log('Nombre es 2: ', someObject.profile.firstName)
}

// Los operadores de encadenamiento opcional no funcionan, ya que name no existe:
if (someObject?.profile?.name){ 
 console.log('Nombre es 3: ', someObject.profile.firstName)
}// Navegación segura a través del grafo de objetos

En ausencia de cadenas opcionales, debe seguir los pasos que se muestran en el Ejemplo 2, que pueden parecer un poco engorrosos y largos.

Operador de fusión cero

La versión más reciente de ECMAScript ha incorporado un nuevo operador booleano que devuelve el operando de la derecha si el operando de la izquierda es null o undefined. Este operador, conocido como el operador de combinación nula (??), resulta útil al establecer valores predeterminados en situaciones específicas.

Si bien es comúnmente utilizado el operador de fusión nula (||) para lograr este propósito, el operador ?? presenta ventajas que contribuyen a evitar efectos no deseados en el código.

const falsy = false;
const emptyString = '';
const nullish = null;
const uDefined = undefined;

console.log('1', falsy ?? 'Some string');
console.log('2', emptyString ?? 'Default string') 
console.log('3', nullish ?? 'Default string')
console.log('4', uDefined ?? 'Default string')

console.log('-------');

console.log('1.1', falsy || 'Some string');
console.log('2.2', emptyString || 'Default string')
console.log('3.3', nullish || 'Default string')
console.log('4.4', uDefined || 'Default string')

Importación dinámica

En la última versión de ECMAScript, se ha implementado la importación dinámica, lo que permite que los módulos se carguen de forma asíncrona. Esta operación también se conoce como división de código, que hemos estado haciendo con herramientas de compilación durante mucho tiempo.

let someAsyncModule = await import('/modules/my-module.ts');

Promesa.allSettled()

Durante mucho tiempo, la práctica común era esperar la resolución de todas las promesas utilizando el método Promise.all(). Sin embargo, este enfoque presenta un inconveniente: no proporciona información clara sobre qué promesas se han cumplido y cuáles no.

En contraposición, el método Promise.allSettled() ofrece la capacidad de observar los resultados de un conjunto de promesas, brindando una visión más completa y detallada de su estado, ya sea cumplido o rechazado.

const promise1 = Promise.resolve("OK, I resolved");
const promise2 = Promise.reject("OH no, I was rejected");
const promise3 = Promise.resolve("After I was rejected");
Promise.allSettled([promise1, promise2, promise3])
    .then((results) => console.log(results))
    .catch((err) => console.log("error: " + err));

Operadores de spread

Los operadores son herramientas útiles para combinar matrices y objetos. Antes de su introducción, la tarea implicaba el uso de métodos como .concat(). Ahora, gracias a la inclusión del operador de propagación (spread), esta operación se simplifica aún más: array.concat ya no es la única opción.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]

Para los objetos se utiliza el siguiente procedimiento:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}

const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

console.log(footballerPerson)

Desestructuración de objetos

Al desestructurar objetos, puede desempaquetar fácilmente los valores de un objeto:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}
const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

const {team, shirtNumber} = footballerPerson;

console.log(team, shirtNumber); //ManUtd, 11