¿Cómo obtener el primer argumento no nulo/indefinido en JavaScript?

Hay muchas ocasiones en las que encontramos el primer argumento no nulo o no indefinido pasado a una función. Esto se conoce como coalescencia. 

Enfoque 1: podemos implementar la fusión en JavaScript anterior a ES6 recorriendo los argumentos y verificando cuál de los argumentos es igual a NULL. Luego devolvemos el argumento que no es NULL inmediatamente.

Ejemplo:

<script>
function coalesce() {
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] != null) {
      return arguments[i];
    }
  }
}
  
console.log(
  coalesce(null, undefined, "First",
           1, 2, 3, null)
);
</script>

Producción:

First

Enfoque 2: podemos usar la alternativa ES6 al método anterior para lograr un efecto similar. Al usar Rest Parameters en ES6, recopilamos todos los argumentos en args iterable. Pasamos una función de flecha gruesa como devolución de llamada al método de búsqueda, que itera sobre cada elemento de args . Usamos una variable descartable en el identificador _ como identificador de elemento en la devolución de llamada al método de búsqueda. Finalmente, usamos el método include() para verificar si el elemento identificado por _ en la devolución de llamada pertenece a null o undefined . El primer elemento que no pasa la prueba es nuestra salida.

Ejemplo:

<script>
const coalesceES6 = (...args) =>
  args.find(_ => ![null,undefined].includes(_)
);
  
console.log(
  coalesceES6(null, undefined, "Value One",
              1, 2, 3, null)
);
</script>

Producción:

Value One

Casos de uso de coalescencia

Ahora que hemos visto cómo implementar Coalesce, analicemos cuáles son algunos de sus casos de uso.

Caso de uso 1: Relleno de valores nulos/indefinidos en una array de objetos

Ejemplo: supongamos que tiene un catálogo de productos con muchos listados de productos. Cada producto tiene una descripción y un resumen. Desea mostrar las descripciones y resúmenes extrayendo los datos de esta base de datos. En tal caso, puede usar Coalescing con dos argumentos, el valor de resumen y un valor de descripción truncado para completar cuando el resumen está ausente.

<script>
let products = [
  {
    id: 1,
    desc: `The best in class toaster that has 140
    watt power consumption with nice features that
    roast your bread just fine. Also comes bundled 
    in a nice cute case.`,
    summ: `Get world class breakfasts`,
  },
  {
    id: 2,
    desc: `A massager that relieves all your pains 
    without the hassles of charging it daily 
    or even hourly as it comes packed with Li-Ion
    batteries that last upto 8 hrs.`,
    summ: "Warm comfort for your back",
  },
  {
    id: 3,
    desc: `An air conditioner with a difference that
    not only cools your room to the best temperatures 
    but also provides cleanliness and disinfection at
    best in class standards`,
    summ: null,
  },
];
  
const coalesceES6 = (...args) =>
  args.find((_) => ![null, undefined].includes(_));
  
function displayProdCat(products) {
  for (let product of products) {
    console.log(`ID = ${product.id}`);
    console.log(`Description = ${product.desc}`);
    let summProd =
      coalesceES6(product.summ,
                  product.desc.slice(0, 50) + "...");
    console.log(`Summary = ${summProd}`);
  }
}
  
displayProdCat(products);
</script>

Salida: Con coalesce, si el valor de resumen está presente, se mostrará. En caso de que falte el resumen (nulo o indefinido), la función de fusión seleccionará el segundo argumento y mostrará una descripción truncada en el campo de resumen.

ID = 1
Description = The best in class toaster that has 140
    watt power consumption with nice features that
    roast your bread just fine. Also comes bundled
    in a nice cute case.
Summary = Get world class breakfasts
ID = 2
Description = A massager that relieves all your pains
    without the hassles of charging it daily
    or even hourly as it comes packed with Li-Ion
    batteries that last upto 8 hrs.
Summary = Warm comfort for your back
ID = 3
Description = An air conditioner with a difference that
    not only cools your room to the best temperatures
    but also provides cleanliness and disinfection at
    best in class standards
Summary = An air conditioner with a difference that
    not ...

Caso de uso 2: Llenar valores en caso de que falten valores numéricos en expresiones para realizar cálculos

Ejemplo: digamos que tiene una array de ingresos mensuales durante un año con algunos valores faltantes. Ahora, desea encontrar el ingreso anual total. Decide sustituir un valor predeterminado base de 1000 para los meses en los que faltan datos. Aplicamos el método de reducción en la array de datos mensuales. Almacenamos la suma de cada iteración en el acumulador con un ligero giro. Aplicamos la fusión en el elemento actual y agregamos el ingreso mensual (si está presente) o el valor predeterminado (si el ingreso mensual es nulo o indefinido) al acumulador.

<script>
const incomeFigures = {
  default: 1000,
  monthWise: [1200, , 600, 2100, , 329,
              1490, , 780, 980, , 1210],
};
  
const coalesceES6 = (...args) =>
  args.find((_) => ![null, undefined].includes(_));
  
function yearlyIncome(incomeFig) {
  return incomeFig.monthWise.reduce(
    (total, inc) => total +
      coalesceES6(inc, incomeFig.default)
  );
}
  
console.log(
  `Yearly income equals 
  ${yearlyIncome(incomeFigures)}`
);
</script>

Producción:

Yearly income equals 8689