Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Los memes de Javascript

No pasan más de 10 minutos desde que algo ocurre en el mundo hasta que Internet se llena de memes al respecto; sin embargo últimamente se ven muchos memes sobre Javascript y la idea de este post es explicarlos, o mejor dicho, explicar por qué son incorrectos.

El meme en cuestión

En meme del que voy a hablar en esta ocasión es éste, con Patrick Star de protagonista:

 

image

 

En este caso es una burla acerca de ciertos casos con las comparaciones en Javascript, y si bien tiene algo de gracia demuestra más que nada desconocimiento del lenguaje y vamos a explicarlo.

El comparador de igualdad

El comparador de igualdad de Javascript tiene una característica interesante que se podría resumir como que “hace el mejor esfuerzo por comparar los dos términos” para explicarlo simple: el comparador convierte los dos término en caso de no ser del mismo tipo y luego hace una comparación estricta, entonces esto nos lleva a la primera parte del meme:

0 == “0”

Básicamente al usar el comparador de igualdad == Javascript detecta que los términos no son del mismo tipo y los convierte, entonces esta comparación pasa a ser verdad como podemos ver al probarlo en Nodejs

image

es por eso que si queremos una comparación estricta usamos el operador de comparación estricta ===

image

Entonces, primer caso resulto, Javascript hace exactamente lo que dice la documentación que debe hacer, una comparación con conversión de tipos.

Un array vacío

Los arrays siempre tienen sus bemoles en todos los lenguajes y Javascript no es la excepción, pero por qué  0 == [ ] ?

La respuesta es que la conversión de un array vacío a entero nos retorna el valor de una posición de memoria vacía que es comparable con 0, entonces la comparación es verdadera, una vez más si usamos el comparador estricto es no es así:

image

La comparación con un string es false

 

"0" == [] 

Acá es simple, basados en lo anterior, es evidente que podemos convertir un array vacío a entero y nos retorna algo comprable con false porque después de todo estamos pidiendo que haga un esfuerzo por convertir una posición sin valores. En este caso el término de la derecha resultará ser o o algo comparable con false, sin embargo ahora el término de la izquierda es un string que a lo sumo es comparable con un 0.

Conclusión

Un lenguaje de programación es complejo y tiene detalles, si en el día a día lo usamos debemos conocer sus características y no olvidarnos que puede ser (como en el caso de Javascript) un lenguaje diseñado hace muchos años y si estamos acostumbrados a lenguajes más modernos que han aprendido de los problemas que pueden acarrear estas cosas y que los programadores de hoy en día usan un lenguaje sin conocerlo…

 

Nos leemos.

Javascript tips: Jugando con strings, interpolación y otras yerbas.

Hace un tiempo (3 años) hablé sobre cómo tener strings multilínea en Javascript, una opción no tan conocida incluso hoy en día.

Bien, con las posteriores versiones del estándar y los navegadores de hoy en día ya contamos con algunas características más avanzadas para el manejo de strings, vamos a ver un poco de qué se trata.

Interpolación de strings

Una de las novedades de ECMA Script 6 2015 son los template string (o string interpolado) muy similar a C#, nos permite tener un texto (template) y que el interprete reemplace ciertas cadenas especiales con variables que están dentro del contexto, por ejemplo

var s = "mundo";
`Hola ${s}`

En este caso la variable s tiene el valor “mundo” y cuando hacemos referencia en la siguiente línea a la variable por nombre escribiéndola con esa sintaxis ${variable} y usando las comillas invertidas igual que el en caso de los strings multilínea.

Por supuesto que podemos hacer referencia a objetos complejos

var o = {"nombre": "Leonado", "twitter": "@leomicheloni"}
`Hola, mi nombre es ${o.nombre} puedes seguirme en twitter en ${o.twitter}`
"Hola, mi nombre es Leonado puedes seguirme en twitter en @leomicheloni"

Perfecto, y muy útil para que nuestro código sea más limpio y sea menos propenso a errores, pero hay más.

Qué pasa si hacemos referencia a algo que no existe, por ejemplo a una propiedad que no existe en el objeto, nada, como Javascript es dinámico simplemente nos muestra undefined.

var o = {"nombre": "Leonado"}
`Hola, mi nombre es ${o.nombre} y mi apellido es ${o.apellido}`
"Hola, mi nombre es Leonado y mi apellido es undefined"

Perfecto, no problem.

Sin embargo si hacemos referencia a una variable que no existe….

`Hola, mi nombre es ${nombre}`
Uncaught ReferenceError: nombre is not defined
    at :1:23

Pumm! se rompe, es decir se comporta igual que si concatenando el strings a la viaja usanza.

"Hola, mi nombre es " + nombre

Pero hay más

Procesar expresiones

También es posible procesar expresiones dentro de un template string, por ejemplo

`Hola, la suman de 1+2 es ${1+2}`
"Hola, la suman de 1+2 es 3"

Por supuesto que podemos sumar elementos de objetos

var o = {a : 1, b: 7};
`La suman de ${o.a} + ${o.b} es ${o.a + o.b}`
"La suman de 1 + 7 es 8"

Y listo, no podemos reemplazar una biblioteca de procesamiento de templates como Mustache con esto pero nos permite ahorrar trabajo y evitar errores, además de hacer nuestro código más limpio.

Nos leemos.

Javascript: Arrow functions

Arrow function es otra de las novedades de Ecma Script 6 y para quienes usamos C# nos va a resultar familiar la sintaxis.

Básicamente nos permite expresar cualquier función usando una flecha ( => ) hasta ahora podíamos hacer esto:

 

[1,2,3,4,5,6,7,8].filter(function(item) { 
  return item > 4 ;
});

con ES6 se puede hacer así:

[1,2,3,4,5,6,7,8].filter( item => { 
  return item > 4;
});

En definitiva no es más que una forma corta de declarar una función anónima.

Parámetros

Con respecto a los parámetros podemos hacer varias cosas dependiendo de si tenemos parámetros, o cuántos tengamos uno o muchos, por ejemplo.

cuando no tenémos  parámetros podemos poner los dos paréntesis o un guión bajo.

var a = () => { console.log("hola");}
var a = _ => { console.log("hola”);}

Cuando tenemos un único parámetro podemos usar o no los paréntesis

var a = (y) => { return y };
var a = y => { return y };

En cuando a varios parámetros siempre usamos los paréntesis

var a = (x,y) => { return x + y;}

Retorno implícito

En ciertas circunstancias las arrow functions crean el return por nosotros, es decir, no siempre es requerido utilizar return

var a = (x, y) => x + y;

Es equivalente a

var a = (x, y)=> { return x + y; }

En resultado

Usando arrow functions el primer ejemplo quedaría así:

[1,2,3,4,5,6,7,8].filter(item => item > 4)

Nos leemos.

Tips de Javascript: Lograr que JSON.stringify se comporte a nuestro gusto

Hace ya bastante tiempo que contamos con JSON.parse() y JSON.stringify() para des-serializar y serializar objetos, lo que hace este último es generar una representación JSON de nuestro objeto, al recorrer todas las propiedades del objeto y sus propiedades anidades también, algo así:

image

Esto está muy bien, pero existen ocasiones en las que no queremos esto, por diferentes motivos: no queremos serializar todo, queremos que tenga otra forma, etc. por supuesto que podemos siempre echar mano de un método propio y no usar JSON.stringify, pero si quien consume nuestro código no sabe de la situación es probable que termine haciéndolo, entonces, ¿podemos modificar este comportamiento?

Modificando el comportamiento de JSON.stringify

Sí, existe una forma estándar de decirle al navegador que en lugar de comportarse como lo hace siempre haga exactamente lo que nosotros queremos cuando se usa JSON.stringify, y es tan simple como escribir nuestro propio método toJSON, así algo así;

image

Y magia, vemos que ahora utilizando la función estándar del navegador obtenemos justo lo que queremos.

Nos leemos.