1

¡Como hacer un listado en JavaScript de muchas opciones de selección Sin utilizar demasiado código y tiempo utilizando un solo IF!

Normalmente podríamos utilizar un if o un else if, para poder hacer selección de un listado de opciones en página web.
esto es practico siempre y cuando la cantidad de opciones sea corta ya que, si el listado es muy grande, no solo sería tedioso
el manejo, sino que además deberíamos utilizar demasiadas líneas de código para poder llegar a una solución correcta del problema.

Ejemplo de un if y else if.

functionencuentraTuPais(tuPais) {

    if (tuPais == "Colombia"){
       console.log("Tu pais se encuentra en grandiosa Sudamerica");
     }
     elseif (tuPais == "China"){
       console.log("Tu pais esta ubicado en el legendario continente Asiatico");
     }
     elseif (tuPais == "España"){
       console.log("Tu pais esta ubicado en el magnifico Antiguo continente europeo");
     }
     elseif (tuPais == "Camerun"){
       console.log("Tu pais esta ubicado en el exotico y magnanimo continente africano");
     }
     else {console.log("TU PAIS PROBABLEMENTE NO SEA DE ESTE PLANETA...JAJAJA")};
   }

Por consola lo veríamos así:
img1platzi.png

Como vemos, si tomáramos así cada uno de los países del mundo el código sería interminable y muy poco práctico.

Para dar una solución rápida y eficaz a este inconveniente lo más practico en JavaScript es realizar este proceso
por medio de un solo if.

Por lo cual a continuación describo el paso a paso de como podríamos hacerlo haciendo uso de un solo if dentro de una función.

  1. Deberemos crea un objeto por medio de una constante que contenga cada uno de los atributos con sus respectivos valores, el cual nos quedaría así:
const todosLosPaises = {
    Colombia: "Tu pais se encuentra en grandiosa Sudamerica",
    China: "Tu pais esta ubicado en el legendario continente Asiatico",
    España: "Tu pais esta ubicado en el magnifico Antiguo continente europeo",
    Camerun:"Tu pais esta ubicado en el exotico y magnanimo continente africano"
    };

  1. Ahora crearemos una función llamada “encuentraTuContinente”, que tomara un parámetro llamado “tuPais”, y quedara así:
functionencuentraTuContinente(tuPais){
}

  1. Dentro de la función, crearemos un if, en el cual plantearemos la condición, en este caso utilizando el objeto creado como “const” y el valor asignado por consola “tuPais”, este último dentro de corchetes, y quedara así:
functionencuentraTuContinente(tuPais){
    if (todosLosPaises[tuPais]);return;
}

  1. Ahora nos queda mostrar por consola el resultado de la función, el cual retornaría con un “console.log”, para que cuando el parámetro sea ingresado no retorne o nos muestre el valor esperado y podemos terminar este proceso con un “return”, y quedaría así:
functionencuentraTuContinente(tuPais){
    if (todosLosPaises[tuPais]){
    console.log(todosLosPaises[tuPais]);
    return;    
}

  1. Por ultimo podemos usar un “console.warn”, para retornar el mensaje de error y sea resaltado, cuando los datos ingresados por consola, no existan o sean erróneos, quedaría así:
functionencuentraTuContinente(tuPais){
    if (todosLosPaises[tuPais]){
    console.log(todosLosPaises[tuPais]);
    return;    
}
     console.warn("TU PAIS PROBABLEMENTE NO SEA DE ESTE PLANETA...JAJAJA")
}

  1. Todo el código nos quedaría así:
const todosLosPaises = {
    Colombia: "Tu pais se encuentra en grandiosa Sudamerica",
    China: "Tu pais esta ubicado en el legendario continente Asiatico",
    España: "Tu pais esta ubicado en el magnifico Antiguo continente europeo",
    Camerun:"Tu pais esta ubicado en el exotico y magnanimo continente africano"
    };

    functionencuentraTuContinente(tuPais){
        if (todosLosPaises[tuPais]){
        console.log(todosLosPaises[tuPais]);
        return;    
       }
         console.warn("TU PAIS PROBABLEMENTE NO SEA DE ESTE PLANETA...JAJAJA")
    }

  1. Por consola al ingresar los países nos retornará la respuesta esperada haciendo uso de una sola condicional en este caso “if”, y así se mostrará por consola:
    img2platzi.png

  2. Y si el valor ingresado por consola es incorrecto o erróneo, se mostrará el mensaje con alerta.
    img3platzi.png

Escribe tu comentario
+ 2