Formas abreviadas de notación Javascript

Es un hecho: existen varios mitos y leyendas acerca de las capacidades de Javascript.

Ha sido un lenguaje bastante "bastardeado" por los programadores que vienen de otros "mundos". Esto ha provocado (además de toda clase de objeciones y prejuicios frente a su uso) toda clase de mitos y leyendas (también urbanas).

Me ha pasado más de una vez de explicarle a un programador "server-side" las cosas que se pueden hacer con javascript y he obtenido el famoso "ohhhhh...no sabía que se podía hacer eso con Javascript" o bien el clásico "ohhhhh...no sabía que era tan potente!".

Sin ir más lejos ayer en el trabajo estuve con un compañero explicándole como utilizar JSON para comunicarse en forma "liviana" con el servidor, y en un momento fue increíble ver su regocijo frente a las beldades de utilizarlo.

¿Por qué tanto preámbulo?, bueno, es que recientemente me he topado con un artículo escrito por Chris Heilmann en el que resume claramente las notaciones abreviadas de Javascript

Así que a continuación intentaré transcribir dicho artículo:

Notación abreviada de Arrays

¿Quién no ha visto cosas como estas?


var links = new Array();
links[0] = 'http://cuteoverload.com';
links[1] = 'http://icanhascheezburger.com';
links[2] = 'http://pencilsatdawn.wordpress.com';
links[3] = 'http://apelad.blogspot.com';


Esto es bastante entreverado (hay que repetir el nombre del array para cada elemento). Al cambiar el órden de de un elemento hay que cambiar también el número, lo cual no es necesario ya que el número se coloca automáticamente. Tan solo basta con usar "[]":


var links = [
'http://cuteoverload.com',
'http://icanhascheezburger.com',
'http://pencilsatdawn.wordpress.com',
'http://apelad.blogspot.com' // <-- este es el último y NO LLEVA COMA!
];


Esto es mucho más obvio desde un punto de vista visual. La indentación hace más sencillo "espiar" donde comienza y finaliza el array.

Cada elemento debe ser separado por una coma, pero teniendo la precaución de no dejar coma al final. De este modo pueden anidarse arrays:


var links = [
'http://cuteoverload.com',
'http://icanhascheezburger.com',
[100,200,20,'foo'],
'http://pencilsatdawn.wordpress.com',
'http://apelad.blogspot.com' // <-- este es el último y NO LLEVA COMA!
];


NOTA: He aquí otro truco: para agregar un nuevo elemento a los arrays puede usarse tanto el método push() ó la propiedad length:


links.push('http://dailypuppy.com');
links[links.length] = 'http://bigeyedeer.wordpress.com';

¿Arrays asociativos?

Otro mito (del cual fui partícipe lo confieso)que perdura es que Javascript permite crear "arrays asociativos", con lo cual no solo se permite numerar los elementos sino darles nombres! A continuación un ejemplo:


var links = new Array();
links['Cute Overload'] = 'http://cuteoverload.com';
links['I can has cheeseburger'] = 'http://icanhascheezburger.com';
links['Pencils at dawn'] = 'http://pencilsatdawn.wordpress.com';
links['Hobotopia'] = 'http://apelad.blogspot.com';


Esto es en realidad una forma de crear un objecto no un array
¿Quieres una prueba? – Haz un alert(typeof links) o bien alert(links[1]).

Declaraciones simples if-else – pregunta y define con la notación ternaria

Es posible abreviar declaraciones simples if dramaticamente. Ejemplo:


var YUIguy;
if(city === ‘London’){
YUIguy = ‘Chris’;
} else {
YUIguy = ‘Eric’;
};


Nuevamente, mucha repetición. La notación ternaria soluciona el problema:

var YUIguy = city === ‘London’ ? ‘Chris’ : ‘Eric’;

Muchos signos de igual...tal vez algunos paréntesis lo harían más claro:

var YUIguy = (city === ‘London’) ? ‘Chris’ : ‘Eric’;

¿Qué sucede aquí? Defines la variable YUIguy y le asignas un valor. Luego viene la declaración, en este caso una comparación de la variable city y si esta es igual a la string London (=== compara para ambos el valor y el tipo, mucho más seguro que ==).

Entonces preguntas si es verdadero o no usando el signo de interrogación.
La opción a la izquierda de los dos puntos (:) es la respuesta a la pregunta cuando se alcanza la condición y la opción a la derecha de los dos puntos (:) es la respuesta cuando no se alcanza la condición. Cualquier condición que puede ser verdadera o falsa puede ir dentro de paréntesis.


var direction = (x < max) ? 'left' : 'right';


Valores por defecto

Esta si que es buena, y creo que no mucha gente la conoce. También reconozco que cuando lo vi por primera vez (gracias a Nico Sanguinetti aka "Foca") quedé gratamente sorprendido :)

Damas y caballeros con Uds. el operador por defecto "double pipe (||)". Este es terriblemente útil cuando nos queremos asegurar que algo se setea con un valor por defecto. El siguiente ejemplo es algo que no debería mostrarse más:


var section = document.getElementById('special');
if(!section){
section = document.getElementById('main');
}


Nuevamente, repetición innecesaria, ya que lo mismo puede escribirse:


var section = document.getElementById('special') || document.getElementById('main');


Si lo primero no está definido, lo segundo se asigna como valor a la sección.

Bueno, ahora si que no hay excusas para programar en javascript en forma más prolija ;)