Odiame a mi, pero no a javascript

Javascript sin lugar a dudas es uno de los lenguajes de programación más difundidos y populares hoy en día, probablemente ya has tenido algún contacto con el o habrás escucha alguien maldecirlo por alguna mala experiencia, la verdad es que el lenguaje está muy polarizado hay gente que lo ama y otras que lo odian. Pero, qué paso?, cómo llegamos a un punto donde un lenguaje de programación tan popular,  y usado genera tantas opiniones opuestas.

Como muchos lenguajes, tiene partes buenas y partes malas, ha sufrido de muchas transformaciones y ya no es solamente un lenguaje de programación usado en los navegadores, si bien fue creado deprisa en los 90’s por Brendan Eich siempre tuvo cualidades interesantes que han permanecido hasta ahora, sin embargo al tener una naturaleza de lenguaje de programación dinámico, la ausencia de una definición de tipos en las variables, su flexibilidad de programación y su herencia basada en prototipos, hacen que sea más propenso a errores y malentendidos, es un lenguaje muy fácil de aprender pero difícil de dominar, su mal uso recae en no comprender  completamente su naturaleza, creado demasiada desinformación a su alrededor, siendo nosotros mismos los culpables de no aprovechar sus fortalezas, entender sus debilidades y mejorar su ecosistema para prevenir esto.

Por eso me gustaría explicar algunos errores muy comunes que te encontrarás cuando trabajas con javascript que nos hacen querer odiarlo

1. No usar los operadores de comparación correctamente

Cuántas veces no has visto comparaciones no estrictas que fallan silenciosamente con comportamientos inesperados, por ejemplo:

1 == “1”;           // true
false == “ nt “;    // true
[[],[]] == true;    // true

Siempre que usemos comparaciones, debemos hacerlo de forma que no solo compare valores, sino también el tipo haciendo uso del comparador de identidad ===:

1 === “1”;          // false
false === “ nt “;   // false
[[],[]] === true;   // false

También hay casos especiales como NaN el cual se comporta diferente:

NaN === NaN;        // false
isNaN(NaN);         // true

Asi que asegurate de usar el método de ayuda para comparar un NaN

2. Manejo de punto flotante

Sin duda uno de los puntos débiles de javascript es el manejo de decimales, causando confusión al tener resultados inesperados; cuando trabajemos con operaciones de punto flotante javascript no nos garantiza el resultando incluso con precisiones altas, esto debido a como javascript representa los números flotantes y hace correcciones en errores de redondeo, por ejemplo:

0.1 * 0.2;          // 0.020000000000000004

Sabiendo esto, no deberías de usar javascript para operaciones matemáticas complejas. Hay formas de trabajar con números fraccionarios de manera segura, por ejemplo, evitar números flotantes y trabajar con enteros haciendo uso de factores comunes y al final convertirlos de nuevo a decimales:

var x = 0.1;
var y = 0.2;
var factor = 10;
(x * factor) * (y * factor) / factor * factor	// 0.02

Pero lo más recomendable, es el uso de librerías externas que solucionen el problema como math.js, el cual nos facilita trabajar con operaciones de punto flotante evitando tener que hacer nuestra propia implementación al problema.

3. Usar html embebido

Siempre es un dolor de cabeza tener que actualizar código HTML embebido dentro de javascript, perdiendo tiempo revisando que siga funcionando, sin mencionar que buscar errores puede llegar a consumirnos mucho tiempo:

var widgetStructure = ‘<div id=’ + widgetID + ‘>’ +
 ‘<h2 id=”’ + widgetTitleID + ‘“>’ + widgetTitle + ‘</h2>’ +
 ‘<div id=”’ + widgetContentID + ‘" >" + widgetContent + "</div>’ +
 ‘</div>’;

Hay mejores formas de hacerlo, desde el uso de script templates:

var widgetStructure = `
	<div id="${widgetID}">
		<h2 id="${widgetTitleID}">${widgetTitle}</h2>
		<div id="${widgetContentID}">${widgetContent}</div>
	</div>
`;

Esta es una nueva funcionalidad introducida en ES6 llamada string literals que facilitan la interpolación de valores.

4. Uso incorrecto de closures

Closures es un concepto importante en javascript, nos ayuda a manejar datos de forma anidada siempre haciendo referencia a el contexto que fue invocada, muy frecuentemente no tenemos claro de dónde vienen los valores, como actualizarlos o la razón por la que no podemos accederlos, como en el siguiente ejemplo:

function count() {
    var counter = 1;
    return function() {
        counter ++;
        console.log(counter);
    };
};

var anotherCounter = count();
anotherCounter();                 // 2
anotherCounter();                 // 3

var counter = 0;
anotherCounter();                 // 4
count()();                        // 2

Esto hace un poco difícil ver claramente que valor tendria nuestra variable counter en cada uno de nuestras funciones, prefiriendo mejor hacer uso de variables en contextos más globales llegando a utilizar window para contener informacion de funciones locales.

5. No entender la herencia y los objetos en javascript

La herencia es fundamental para rehusar código, y en el caso de javascript esta se comporta diferente a una basada en clases, no hay que olvidad que se usa herencia por prototipos, para dejarlo más claro:

  • Herencia de clase, es una plantilla de como construir objetos, se basa en relacionar otras plantillas para crear nuevas, pero se concretan hasta crear el objeto.
  • Herencia por prototipos, es basada en los objetos mismos ya creados y que esta instancia hace referencia a otros objetos creados, siendo más flexible y selectiva.

Por ejemplo:

function Animal(name) {
    this.name = name;
}
function Dog(name) {
    this.name = name;
}
Animal.prototype.sleep = function() {
    console.log(this.name + ': Zzz...');
}

Dog.prototype = Object.create(new Animal());

var dog = new Dog('Lassie');
dog.sleep();                        // Lassie: Zzz...

Este problema puede llegar a ser menos común cada vez, debido a la nueva sintaxis para crear clases en ES6.

6. Convenciones y estándares

Javascript es un lenguaje muy flexible, frecuentemente los desarrolladores tienen diferentes puntos de vista en cómo programarlo o sus fundamentos son distintos, siempre hay que apegarnos a las convenciones ya sea de la comunidad o del proyecto donde estés trabajando, esto no es un problema propiamente de javascript pero es muy común ver diferentes estilos de programación y convenciones conviviendo juntas, dificultando su lectura y generando comportamientos inesperados.

Algunos ejemplos que deberían estar bien definidos en tu equipo son:

  • Cómo nombrar las variables y métodos
  • Longitudes en clases y métodos
  • Uso de variables globales

7. El abuso de las nuevas librerías

Javascript está creciendo aceleradamente en los últimos años, tiene un mercado muy amplio gracias a la cantidad de developers familiarizados con páginas webs, esto hace que cada día aparezcan nuevas librerías, frameworks, técnicas, etc que parecen sencillas, útiles y divertidas, sin embargo es más importante saber porque las necesitas y si vale el riesgo de adoptarlas.

Hay que tener muy claro que son dependencias con codigo que desconocemos, en muchas ocasiones no necesitamos toda la librería y seria mas facil nuestra propia implementacion de manera mas controlada, también puede ser el caso que ya existan nativamente como Promise, reduce, etc.

Conclusión

Sin duda javascript es un lenguaje polémico y diferente que siempre nos hará querer arrancarnos los cabellos, pero incluso hasta la mejor herramienta mal usada nos dará malos resultados. Es importante comprender su mecánica y naturaleza, su acelerada evolución ha dejado lagunas de conocimiento que los developers ignoramos y asumimos que funcionan en base a nuestra experiencia en otros lenguajes, maldiciendo a javascript sin ser el culpable, así que la siguiente vez que te encuentres en esta posición de odio/amor recuerda analizar la situación y detenerte a pensar si realmente es el lenguaje o nuestra forma de utilizarlo, verás que la ultima será casi siempre la razón de nuestras frustraciones.



Adrian Castillo

Adrian Castillo


comments powered by Disqus

Siguenos

Boletí de noticias