Consejos para escribir mejores condicionales en JavaScript

Posted on by Rudeus Greyrat

Si está trabajando con JavaScript, estaría escribiendo mucho código con muchas condiciones involucradas. Al principio, los condicionales pueden parecer fáciles de aprender, pero se trata de algo más que escribir algunas declaraciones if-else.

La programación orientada a objetos permite evitar condiciones y reemplazarlas con polimorfismo y herencia. Debe seguir estos principios tanto como sea posible. Pero por otro lado, puede terminar con los condicionales en su código por varias razones. El propósito de este artículo es ayudarte a organizar las declaraciones condicionales.

Consejos para escribir código con condicionales:

  1. Array.includes: puede usar el método array.includes() para múltiples condiciones. El método array.includes() se usa para determinar si un elemento en particular está presente en la array. Devuelve “verdadero” o “falso”

    Ejemplo: El siguiente código demuestra cómo verificar si el animal es un «león» o un «perro».

    JavaScript

    // function
    function test(animal) {
        if (animal == 'Lion' || animal == 'dog') {
            console.log('Valid');
        }
    }
      
    // function call
    test('dog');

    Producción:

    Valid

    El código anterior parece ser fácil porque solo tiene dos animales para verificar. Sin embargo, no está seguro acerca de la entrada del usuario. ¿Qué pasa si consigues algunos animales más? Si continúa expandiendo la declaración con más declaraciones OR , el código sería más difícil de mantener y se vería muy sucio.

    Puede reescribir la función para hacerla más limpia. Todo lo que necesita hacer es agregar un nuevo elemento de array si desea buscar algún otro animal.

    JavaScript

       
    function test(animal) {
        const animals = ['dog', 'cat', 'cow', 'Lion'];
      
        // Used to check if a particular
        // element is present 
        if (animals.includes(animal)) {
            console.log('valid');
        }
    }
    console.log(test('dog'));

    Producción:

    valid

    Puede crear una array de animales para separar las condiciones del resto del código. Incluso puede declarar la variable fuera del alcance de la función y reutilizarla donde la necesite. Esta es una forma de escribir un código más limpio que es fácil de entender y mantener.

  2. Array.every & Array.algunos:

    El método array.every() se usa para verificar si todos los elementos presentes en la array satisfacen la condición dada. Devuelve «verdadero» cuando cada elemento de la array satisface la condición dada; de lo contrario, devuelve «falso».

    El método array.some() comprueba si alguno de los elementos de la array ha pasado la prueba de la función proporcionada. El método array.some() ejecuta la función una vez por cada elemento de la array. Comprueba si al menos uno de los elementos del arreglo cumple la condición.

    Estas dos funciones de array de JavaScript se utilizan para reducir las líneas de código. Mira el código que se muestra a continuación.

    JavaScript

    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test() {
        let isAllblue = true;
      
        // Condition: all cars must be blue
        for (let c of cars) {
            if (!isAllblue) break;
            isAllblue = (c.color == 'blue');
        }
      
        console.log(isAllblue);
    }
    test();

    Producción:

    false

    El código anterior es un poco largo. Puede reducirlo usando el método Array.every() .

    JavaScript

    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test() {
      
        // Condition: short way
        // all cars must be in blue color
        const isAllblue = cars.every(
                c => c.color == 'blue');
                  
        console.log(isAllblue);
    }
    test();

    Producción:

    false

    También puede implementarlo usando el método Array.some()

    JavaScript

    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test1() {
      
      // Condition: if any car is in blue color
      const isAnyblue = cars.some(c => c.color == 'blue');
      
      console.log(isAnyblue); 
    }
    test1();

    Producción:

    true
  3. Return Early o Early exit: Return Early en JavaScript es una manera fácil de reducir el cuerpo de una función a cero el número de declaraciones «else». Hay muchas razones para usar Return Early en su código.
    1. Reduce la cantidad total de código.
    2. Reduce la longitud de la línea al reducir la complejidad lógica.
    3. Ayuda a mejorar la legibilidad.

    El propósito de Return early es eliminar la necesidad de condicionales «else» en las funciones de JavaScript mediante el uso de la palabra clave «return» en la declaración «if» del cuerpo. Vamos a crear una función que se comporte de manera diferente dentro de ciertas condiciones.

    Nota: A continuación se muestra el pseudocódigo de la explicación anterior.

    JavaScript

    function IsRed(someObject) {
      
        // Declare a variable to 
        // store the final value
        var willRed;
      
        // Compare type of object
        if (typeof someObject === 'object') {
      
            // Check object color property
            // is red or not 
            if (someObject.color === 'Red') {
                willRed = true;
            } else {
                willRed = false;
            }
        } else {
            willRed = false;
        }
      
        return willRed;
    }

    Esta función es clara, pero parece ser innecesariamente complicada. El patrón Return Early se puede utilizar para aumentar la legibilidad y disminuir el número de declaraciones «else».

    JavaScript

    // Use return instead of else statement
    function IsRed(someObject) {
        if (typeof someObject !== 'object') {
            return false;
        }
      
        if (someObject.color !== 'Red') {
            return false;
        }
      
        return true;
    }

    Usando el patrón Return Early, podemos eliminar todas las declaraciones «else» innecesarias y hacer que sus funciones sean mucho más claras y concisas.

    También puede refactorizar esta función usando solo una declaración «si».

    JavaScript

    // Here you can reduce your code
    function IsRed(someObject) {
      
        // 2 if statements replaced
        // by 1 if statement
        if (
            typeof someObject !== 'object' ||
            someObject.color !== 'Red'
        ) {
            return false;
        }
        return true;
    }

    Esta función se puede refactorizar nuevamente en una sola línea de código usando un operador ternario de JavaScript.

    JavaScript

    function IsRed(someObject) {
        return typeof someObject !== 'object'
            || someObject.color !== 'Red' ? false : true;
    }

    Redujiste todas las declaraciones «si» anidadas al reducir las condiciones.

    Nota: Siempre apunte a anidar menos y regrese temprano, pero no lo estropee. Si su código es breve y directo, y si es más claro con «si» anidados.

  4. Utilice objetos literales o mapas: el objeto literal es básicamente una array de pares clave:valor que se utilizan en lugar de instrucciones de cambio. Veamos el ejemplo a continuación.

    JavaScript

    function printCars(color) {
      
        // Use switch case to 
        // find cars by color
        switch (color) {
            case 'red':
                return ['Rcar1', 'Rcar2'];
            case 'blue':
                return ['Bcar1', 'Bcar2'];
            case 'purple':
                return ['Pcar1', 'Pcar2'];
            default:
                return [];
        }
    }
      
    printCars(null);
    printCars('blue');    

    Producción:

     []
['Bcar1', 'Bcar2']

    El código anterior se puede refactorizar utilizando el objeto literal y reemplazando la instrucción «cambiar» por completo.

    JavaScript

    // Use object literal to 
    // find cars by color
    const carColor = {
        red: ['Rcar1', 'Rcar2'],
        blue: ['Bcar1', 'Bcar2'],
        purple: ['Pcar1', 'Pcar2']
    };
      
    function printcars(color) {
        return carColor[color] || [];
    }
    console.log(printcars());
    console.log(printcars('red'));
    console.log(printcars('blue')); 

    Producción:

     []
 ['Rcar1', 'Rcar2']
 ['Bcar1', 'Bcar2']

    También puede usar Mapa para lograr el mismo resultado.

    JavaScript

    // Use map to find cars by color
    const carColor = new Map()
        .set('red', ['Rcar1', 'Rcar2'])
        .set('blue', ['Bcar1', 'Bcar2'])
        .set('purple', ['Pcar1', 'Pcar2']);
      
    function printcars(color) {
        return carColor.get(color) || [];
    }
    console.log(printcars());
    console.log(printcars('red'));
    console.log(printcars('blue')); 

    Producción:

     []
 ['Rcar1', 'Rcar2']
 ['Bcar1', 'Bcar2']
  5. Usar parámetros de función predeterminados y desestructuración: el parámetro predeterminado es una forma de establecer valores predeterminados para parámetros de función en los que no se pasa un valor, es decir, «indefinido».

    JavaScript

    function check(flower, quantity) {
        if (!flower) return;
      
        // If quantity not provided, 
        // set default to one
        const a = quantity || 1;
      
        console.log("I have ${a} ${flower}!");
    }
      
    // Results
    check('Rose');
    check('Lotus', 2);

    Producción:

    I have 1 Rose!
I have 2 Lotus!

    Ahora puede usar el parámetro de función para establecer el valor predeterminado

    JavaScript

    // If quantity not provided, parameter
    // provided to set default to one 
    function check(flower, quantity = 1) {
        if (!flower) return;
        console.log(`I have ${quantity} ${flower}!`);
    }
      
    // Results
    // (Default parameter is set)
    check('Rose');
    check('Lotus', 2); 

    Producción:

    I have 1 Rose! 
I have 2 Lotus!

    ¿Qué sucede si la variable flor es un objeto? ¿Puedes asignarle el parámetro predeterminado?

    JavaScript

    function check(flower) {
      
        // Print flower name if
        // value provided
        if (flower && flower.name) {
            console.log(flower.name);
        } else {
            console.log('unknown');
        }
    }
      
    // Results
    check(undefined);
    check({});
    check({ name: 'Rose', color: 'red' });

    Producción:

    unknown
unknown
 Rose

    En el ejemplo anterior, queremos imprimir el nombre de «flor» si está disponible; de ​​lo contrario, imprimirá «desconocido», si no se conoce el valor. Podemos evitar los condicionales «flor» y «flor.nombre» mediante la destrucción de parámetros de función predeterminada.

    La desestructuración le permite extraer propiedades de los objetos.

    JavaScript

    // Destructing access name property only
    // assign the default empty object {}
      
    function check({name} = {}) {
        console.log (name || 'unknown');
    }
      
    // Results
    check(undefined); 
    check({ }); 
    check({ name: 'Rose', color: 'red' }); 

    Producción:

    unknown
unknown
 Rose

    Necesitamos el nombre de la propiedad de flower , puede desestructurar ese parámetro usando {name} , luego use name como variable en su código en lugar de flower.name porque la desestructuración le permite asignar las propiedades de un objeto a las variables.

    También debe asignar el objeto vacío {} como valor predeterminado. Si no lo hace, mostrará el error al ejecutar la línea «verificar (indefinido)», es decir, no puede desestructurar el nombre de propiedad de ‘indefinido’ o ‘nulo’, porque no hay ninguna propiedad de nombre en indefinido o nulo.

Publicación traducida automáticamente

Artículo escrito por NehaMali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *