¿Menos código con javascript moderno?

“Menos es más” - Mies Van der Rohe. Aunque no siempre es bueno aplicar esta frase, pero si se trata de escribir un código más entendible y con menos líneas de código por mantener: entonces sí, es aplicable.

Menos código, más funcionalidades

Las especificaciones de ECMAScript han traído algunas cosas interesantes, desde ECMAScript 6. La más importante es hacer más con menos código. En este artículo te mostraré algunos ejemplos que puedes aplicar en tus proyectos.

Bucles más simples ➰

El bucle for .. in es el encargado de recorrer la colección de propiedades de un objeto, sin importar su tipo, a contrario de su hermano el bucle for .. of que solo iterará las propiedades que tengan relacionado un iterador (como un índice).

Versión con bucle for 👴:

const cars = ["volvo", "tesla", "honda"];
for (let i = 0; i < cars.length; i++)

Versión con bucles for .. in y for .. of:

for (let car of cars)
// iteramos cada elemento con su índice

for (let index in cars)
// iteramos cada elemento de la lista de carros

Encontrar elementos 🔍

Para encontrar elementos de manera fácil podemos utilizar el método para arreglos: find(). El método find() devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada.

Versión sin find():

const pets = [
  { type: 'Dog', name: 'Ponki' },
  { type: 'Cat', name: 'Garfield' },
  { type: 'Dog', name: 'Lucky' }
]
function findDog(name) {
  for (let i = 0; i < pets.length; i++) {
    if (pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i]
    }
  }
}

Versión con find():

const ponki = pets.find((pet) => pet.type === 'Dog' && pet.name === 'Ponki')

Spread operator para unir y clonar 📦 => 📦📦

La sintaxis extendida o spread syntax (los famosos ...) nos permiten unir o clonar arreglos o cadenas de forma fácil (siempre y cuando estas tengan un elemento iterable, como un índice).

Versión sin spread operator:

// uniendo dos arrays
const frutasTropicales = ['mango', 'lechoza', 'guineo']
const frutas = ['manzana', 'pera', 'fresa'].concat(frutasTropicales)
console.log(frutas)
// ["manzana", "pera", "fresa", "mango", "lechoza", "guineo"]

// clonando array
const numeros = [1, 2, 3, 4, 5]
const numeros2 = numeros.slice()
// [1, 2, 3, 4, 5]

Versión con spread operator:

// uniendo dos arrays
const frutasTropicales = ['mango', 'lechoza', 'guineo']
const frutas = ['manzana', 'pera', 'fresa', ...frutasTropicales]

// clonando array
const numeros = [1, 2, 3, 4, 5]
const numeros2 = [...numeros]
// [1, 2, 3, 4, 5]

Destructuring o desempaque 📤

Es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.

Versión sin destructuring:

const wilmer = {
  trabajo: 'Desarrollador Web',
  lenguajeFavorito: 'javascript',
  colorFavorito: 'morado 💜'
}
const trabajo = wilmer.trabajo
const lenguajeFavorito = wilmer.lenguajeFavorito
const colorFavorito = wilmer.colorFavorito

Versión con destructuring:

const wilmer = {
  trabajo: 'Desarrollador Web',
  lenguajeFavorito: 'javascript',
  colorFavorito: 'morado 💜'
}
const { trabajo, lenguajeFavorito, colorFavorito } = wilmer
// se asigna a una constante cada propiedad del objeto

Evaluación de Short-circuit 🏎

Está técnica evalúa el segundo argumento como válido solo si el primer argumento no es suficiente para determinar el valor de la expresión.

Versión sin Short-circuit:

let dbHost
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST
} else {
  dbHost = 'localhost'
}

Versión con Short-circuit:

let dbHost = process.env.DB_HOST || 'localhost'

Comentarios finales

Como pudiste ver, tenemos muchas herramientas para hacer lo mismo, pero con menos código. Ninguna de estas variantes reemplaza a sus versiones largas ¡Eso dependerá mucho de lo que estés haciendo!