Características de Javascript – 01

Operador Ternario (?)

Regularmente cuando trabajamos con condiciones estamos acostumbrados a utilizar las clausulas if-else, pero, lo cierto es que no siempre son la mejor ni la única opción que nos ofrece javscript, sobre todo si nuestro código a ejecutar en cada bloque condicional es de tan sólo una línea, veamos el siguiente ejemplo:

El Siguiente código javascript:

var isPhpDeveloper = true;
var framework;
if(isPhpDeveloper){
    framework = "Symfony!";
}
else{
    framework = "Rails";
}
console.log("Yo utilizo " + framework);

Podemos cambiarlo utilizando el operador ternario y haciendo nuestro código más conciso:

var isPhpDeveloper = true;
var framework = isPhpDeveloper ? "Symfony!" : "Rails";
console.log("Yo utilizo " + framework);

También podríamos colocar un operador ternario dentro de una concatenación de variables tipo string:

var isPhpDeveloper = false;
console.log("Yo utilizo " + (isPhpDeveloper ? "Symfony!" : "Rails"));

Noten que el bloque del operador ternario está encerrado entre paréntesis, esto es necesario ya que el operador ternario (?) evaluará toda expresión que esté antes de él y si no separamos  el operador ternario de la cadena anterior y entonces podríamos no estar evaluando lo que realmente deseamos. Recordemos que los valores que se traducen como falsos dentro de un bloque condicional son: false, undefined, null, 0 (cero) y "" (Una cadena vacía), todo lo demás es traducido como verdadero o true.

Pero, esto no se queda acá podemos incluso añadir mucha más lógica cuando hacemos uso del operador ternario:

var isPhpDeveloper = true;
var framework, ide; 

isPhpDeveloper ? (framework = "Symfony!", ide = "PHPStorm")
               :
                 (framework = "Rails!",   ide = "RubyMine");

console.log("Yo utilizo " + framework + (ide ? " y mi IDE es " + ide : ""));

También podríamos tener operadores ternarios anidados:

var isPhpDeveloper = true;
var likeFrameworks = true;
var framework, ide; 

isPhpDeveloper && likeFrameworks ? (framework = "Symfony!", ide = "PHPStorm")
                                :
                                isPhpDeveloper ? (framework = "Un imán!", ide = "")
                                               : (framework = "Perl!");

console.log("Yo utilizo " + framework + (ide ? " y mi IDE es " + ide : ""));

Otra característica que podemos explotar otras características al unir el operador ternario con funciones anónimas:

var isPhpDeveloper = true;

isPhpDeveloper ? function() {
                     console.log("Yo utilizo Symfony y mi IDE es PHPStorm"));
                 }()
               :
                 function() {
                     console.log("Yo utilizo Rails y mi IDE es RubyMine"));
                 }();

Asignación Lógica OR (||)

Hay veces donde el operador ternario es incluso menos conciso de lo que deseamos, para estos casos podemos hacer usos de la asignación lógica, en este ejemplo veremos que los operadores lógicos pueden hacer la asignación condicional incluso más corta que con el con operador ternario:

var technologiesSkills = {
    addProgrammingLanguage: function(language){
        this.languages = this.languages || []; // Asignación lógica con "OR"
        this.languages.push(language);
    }
};

En el ejemplo que acabamos de ver, hacemos uso del operador lógico OR (||) para efectuar una asignación lógica de valor. Cuando utilicemos la asignación lógica con el operador OR será asignador el primer valor que sea evaluado como verdadero (thruty value) o distinto de falso (non falsy value) <recordemos la lista de valores que son tomados como falso en JavaScript>, si no encuentra valores evaluados como verdaderos asignará el último valor de la asignación lógica (El que se encuentra más a la derecha).

Asignación Lógica AND (&&)

En este caso se tomará el último valor evaluado como verdadero en la asignación lógica (El que se encuentre más a la derecha) o el primer valor evaluado como falso. Veamos un ejemplo de esto:

var language = "" && "PHP"; // language = ""
var language = 0 && "PHP"; // language = 0
var language = undefined && "PHP"; // language = undefined

var language = "English" && "PHP"; // language = "PHP"

var isDeveloper = true;
var technologies = {
    languages: ["PHP", "JavaScript", "Python", "Ruby", "Java"]
    retrieveLanguage: function (languageRequested) {
        var index = this.languages.indexOf(languageRequested);
        return (index>0)? this.languages.splice(index, 1)[0] : false;
    }
};

// language will contain "PHP" if:
var language = isDeveloper && technologies.retrieveLanguage("PHP");

// language will be false if:
var language = isDeveloper && technologies.retrieveLanguage("English");

Sentencia SWITCH

Utilizar la sentencia switch puede muchas veces ayudar a que nuestro código sea un poco más conciso y también podemos utilizar sus características propias como el funcionamiento fall-through para construir bloques jerárquicos. Vamos con un ejemplo:

Supongamos que queremos crear un objeto Empresa que requiere saber de las aptitudes que debe de tener un programador de acuerdo a su experiencia. Construyamos la clase empresa:

/**
 * Constructor
 */
function Company (name, country, address, webPage){
    this.name = name;
    this.country = country;
    this.address = address;
    this.webPage = webPage;
}

// Methods
Company.prototype = {
    getSkillsForWebDeveloper: function(level){
        var skills = [];
        switch (level) {
            case "Jr":
                skills.push("Algorítmos", "PHP", "Javascript", "HTML5", "CSS3",
                            "MySQL", "SQL");
                break;
            case "Semi-senior":
                skills.push("Algorítmos", "PHP", "Javascript", "HTML5", "CSS3",
                            "MySQL", "SQL", "Bootstrap", "jQuery", "Yii", 
                            "Codeigniter", "PostgreSQL");
                break;
            case "Sr":
                skills.push("Algorítmos", "PHP", "Javascript", "HTML5", "CSS3", 
                            "MySQL", "SQL", "Bootstrap", "jQuery", "Yii", 
                            "Codeigniter", "PostgreSQL", "Symfony", "Laravel",
                            "Phalcon", "Python", "Django", "Nodejs", "Expressjs",
                            "Angularjs", "PL/PgSQL", "MongoDB");
                break;
            default:
                alert("Is not ther the level " + level);
                break;
        }
        return skills;
    };
};

En el ejemplo vemos que repetimos los skills que tiene un desarrollador “Jr” en los niveles subsecuentes como Semi-senior o Sr. Esto lo podemos mejorar haciendo el uso del fall-through del bloque switch, esto lo logramos quitando la palabra clave “break” en los bloques “case” que deseemos que :

/**
 * Constructor
 */
function Company (name, country, address, webPage){
    this.name = name;
    this.country = country;
    this.address = address;
    this.webPage = webPage;
}

// Methods
Company.prototype = {
    getSkillsForWebDeveloper: function(level){
        var skills = [];
        switch (level) {
            case "Jr":
                skills.push("Algorítmos", "PHP", "Javascript", "HTML5", "CSS3",
                            "MySQL", "SQL");
            case "Semi-senior":
                skills.push("Bootstrap", "jQuery", "Yii", 
                            "Codeigniter", "PostgreSQL");
            case "Sr":
                skills.push("Symfony", "Laravel", "Phalcon", "Python", "Django",
                            "Nodejs", "Expressjs", "Angularjs", "PL/PgSQL",
                            "MongoDB");
                break;
            default:
                alert("Is not ther the level " + level);
                break;
        }
        return skills;
    };
};

Luego seguiremos con más características y buenas prácticas de desarrollo en Javascript.