Descubre 7 trucos para usar mejor JavaScript

¿Estás llevando cursos de JavaScript? Este es un lenguaje de programación muy popular que se utiliza ampliamente para el desarrollo web front-end, la programación del lado del servidor y la creación de aplicaciones móviles y de escritorio. De hecho, ofrece muchas ventajas desde el punto de vista del programador.

Asimismo, es un lenguaje potente que brinda muchas características y capacidades, como la programación orientada a objetos, la programación basada en eventos y la programación funcional. Gracias a su sintaxis sencilla y su jerarquía de trabajo poco estricta ayudan a desarrollar una amplia gama de programas que funcionan en múltiples dispositivos.

Por ese motivo, este lenguaje está en constante actualización, donde se añaden nuevas y atractivas funciones, por lo que puede ser difícil mantenerse al día. En este artículo, te compartiremos algunos consejos y trucos interesantes para profundizar tus conocimientos de JavaScript. ¡Comencemos!

#1 Desestructuración con parámetros

¿Sabías que se puede utilizar la desestructuración de objetos dentro de los parámetros de una función? Un caso de uso popular para esto sería algo así como escuchadores de eventos, y obtener acceso a la propiedad de destino en el objeto de evento.

buttonElement.addEventListener("click", ({ target }) {

    // es lo mismo que usar e.target ?

    console.log(target);
});

Te puede interesar: Conoce 8 ventajas de usar JavaScript

#2 Copia Profunda con JSON

Puede que hayas oído hablar del uso de object spread u Object.assign() para hacer copias superficiales de un objeto, pero ¿sabías acerca del uso de JSON para hacer copias profundas? Para ello, solo debes convertir un objeto a JSON usando JSON.stringify() y luego re-explóralo usando JSON.parse() para crear una copia profunda.

Recuerda que es importante realizar esta acción solo para objetos simples, ya que si decides aplicarlo en objetos grandes podría suponer problemas de rendimiento. Por tanto, te aconsejamos tener en cuenta esta información.

const person = {
    name: "Dom",
    age: 28,
    skills: [
        "Programming",
        "Cooking",
        "Tennis"
    ]
};

const copied = JSON.parse(JSON.stringify(person));

// false ?
console.log(person.skills === copied.skills);

#3 Defaults fáciles con OR

Puedes utilizar el operador lógico OR (||) para los valores por defecto en lugar de utilizar una sentencia if. Alternativamente, para comparaciones más estrictas, puedes aprovechar el operador de coalescencia nullish.

Código antiguo (usando sentencia if - 4 líneas)

let username = getUsername();

if (!username) {
    username = "Dom";
}

Nuevo código (usando || - 1 línea)

const username = getUsername() || "Dom";

El nuevo código también significa que puedes usar const sobre let.

#4 Búsqueda avanzada en matrices

Los métodos indexOf() e includes() son parte del pasado, pues hay otro método que permite la búsqueda avanzada de matrices y se llama find(). El método find() te permite pasar una función de prueba. El primer elemento dentro del array que pase la función de prueba será devuelto. Esto hace más útil la búsqueda en arrays.

const occupations = [
    "Lawyer",
    "Doctor",
    "Programmer",
    "Chef",
    "Store Manager",
];

const result = occupations.find(o => o.startsWith("C"));

// "Chef" ?‍?
console.log(result);

#5 Eliminar duplicados de una matriz

Puede que hayas oído hablar de esto antes, pero hay una forma muy sencilla de eliminar duplicados de un array utilizando la estructura de datos Set. Básicamente, Set no permite valores duplicados. Por tanto, podemos aprovecharnos de ello convirtiendo un array en un Set, y luego de nuevo en un array.

const numbers = [5, 10, 5, 20];
const withoutDuplicates = Array.from(new Set(numbers));

// [5, 10, 20] ?
console.log(withoutDuplicates);

Te puede interesar: ¿Qué es Alpine.js y cuáles son las ventajas de usarlo?

#6 Funciones de autoinvocación

Este es un clásico. Las funciones autoinvocadas son funciones que se ejecutan a sí mismas. Un caso de uso común para estas es asignar una variable o constante que requiere una lógica compleja.

const someComplexValue = (() => {
    const a = 10;
    const b = 20;

    if (a > b) {
        return a * b;
    }

    return b / a;
})();

Por supuesto, el ejemplo anterior es trivial, pero de esta forma puedes tener una idea del tipo de código complejo que puedes requerir para estar dentro de la función de autoinvocación.

#7 Copia de matrices con Spread

El último consejo de JavaScript que te compartiremos en esta lista consiste en crear copias superficiales de un array. Podemos realizarlo utilizando spread (...).

const numbers = [5, 19, 24, 36];
const numbersCopy = [...numbers];

// false
console.log(numbers === numbersCopy);

Como ves, JavaScript sigue siendo un gran lenguaje de programación. A pesar de la enorme competencia en el mercado actual, este lenguaje domina la carrera en varios campos de desarrollo. Los frameworks modernos funcionan a las mil maravillas en aplicaciones web y de una sola página. Por tanto, aprender JavaScript tiene muchas ventajas, como la gran demanda del mercado y las oportunidades profesionales.

Hasta aquí hemos revisado algunos de los trucos de JavaScript que muy probablemente no conocías. ¿Cuántos de estos trucos conocías? ¿Cuáles te resultaron más útiles? Estamos seguros de que estos pueden ayudarte a ahorrar tiempo y aumentar tu productividad. Gracias por llegar hasta aquí, ¡eres un lector fantástico!

¿Te gustaría aprender a programar? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!