ES6: unos cuantos trucos básicos

Cierto es que Javascript no es mi lenguaje favorito, pero no por ello, no significa que no debe de ser conocedor del mismo, si bien, todo lo que es válido para Javascript también es valido para TypeScript. Hoy me gustaria comentar unos cuantos trucos básicos que hará que aproveches mucho mejor todos los recursos que ES6 (y en futuras versiones)!

Template Strings

Una de las cosas que más me gusta de Python es que para crear expresiones de cadenas, no es necesario ir encadenando cosas, tal que así:

hola = "Mi nombre es" + nombre

Y en su lugar, puedes hacer:

hola = "Mi nombre es %s" % nombre

En Javascript, siempre había que hacerlo cómo en la forma inicial, con la particularidad de que puedes usar tanto comillas simples como dobles, con el mismo resultado.

Ahora, resulta que hay un nuevo tipo de comillas que es para escribir literales ` y usando las variables entre ${ }. Sin duda, un genial avance que mejora la visibilidad del código!

Para ver cómo funciona, escribe el siguiente código Javascript:

const name = 'Manejando datos';
console.log(`Hola ${name}`);
console.log('Hola ${name}');
console.log("Hola ${name}");

Puedes comprobar que sólo la última con ` tiene lugar la verdadera conversión.

Declaración de variables

La segunda recomendación es sobre la declaración de variables, pues ahora dispones de 3 opciones: además de la clásica var, existe let y const. La primera es global, la segunda es para trabajar con la misma dentro del bloque que la contiene, y la tercera const es cómo la primera, pero inmutable, o sea, no puedes cambiar el valor.

Con el paso del tiempo, he ido migrando en mis desarrollos de declarar variables con var a let, sobre todo porque se gestiona mejor el ámbito de influencia de las variables, algo fundamental cuando haces desarrollos medianamente grandes.

Veamos cómo funcionan las declaraciones:

var variable = 'test';
 let letvar = 'variable con let';
 const name = 'Manejando datos';
 console.log(variable); console.log(letvar); console.log(name);
 {
 let letvar2 = 'me ves';
 var var2 = 'Hola';
 console.log(letvar); console.log(letvar2); 
 }
 console.log(var2); console.log(letvar2);

Mientras las 3 variables definidas en el global son perfectamente visibles dentro del bloque interno, la variable letvar2 no lo es fuera de donde queda definida, mientras que var2 si es visible fuera.

Sin duda, el control del ámbito de las variables es fundamental para grandes proyectos, por lo que te recomiendo que prestes mucha atención al tema de declaración de variables.

Constantes de objetos

Si necesitas que un objeto sea totalmente constante y no se pueda modificar, la mejor opción es usar Object.freeze(objeto), y de esta forma, será inmutable, incluyendo sus propiedades.

Ojo, porque este proceso de “freezen” no es reversible.

La solución para “descongelar” un objeto la puedes encontrar aquí. Con esto, queda bastante claro que const no es sinonimo de constante que no puede variar!!

Te dejo el código completo:

Object.unfreeze=function(o){
var oo=undefined;
if( o instanceof Array){
oo=[];var clone=function(v){oo.push(v)};
o.forEach(clone);
}else if(o instanceof String){
oo=new String(o).toString();
}else if(typeof o =='object'){

oo={};
for (var property in o){oo[property] = o[property];} }
return oo;
}
// https://stackoverflow.com/questions/19293321/opposite-of-object-freeze-or-object-seal-in-javascript
console.log('Constante de un objeto ...');
const obj = {'prop': 1, 'prop2': 2};
console.log(obj.prop);
obj.prop = 3;
console.log(obj.prop);
console.log('Congelo ...');
const obj2 = Object.freeze(obj);
console.log(obj2.prop);
obj2.prop = 5;
console.log(obj2.prop);
console.log('Descongelo ...');
const obj3 = Object.unfreeze(obj2);
obj3.prop = 5;
console.log(obj3.prop);

y el resultado:

Y eso es todo, que espero que te sirva, pues también es válido para TypeScript. Además, si lees la guia de Javascript de Google, podrás comprobar que estamos en línea con sus propuestas.

Happy coding!