Skip to content

ES6: A few basic tricks

javascript

It is true that Javascript is not my favorite language, but it does not mean that it should not be aware of it, although everything that is valid for Javascript is also valid for TypeScript. Today I’d like to comment on a few basic tricks that will make you take advantage of all the resources better than ES6 (and in future versions)!

Template Strings

One of the things I like most about Python is the way to create expressions of strings, you don’t need to be chaining things, like that:


hello = "My name is" + name

And instead, you can do:


hello = "My name is %s" % name

In Javascript, you always had to do it as in the initial form, with the particularity that you can use both single and double quotation marks, with the same result.

Now, it turns out that there is a new type of quotation markup that is for writing literals ` and using the variables between ${ }. Without a doubt, a great advance that improves the visibility of the code!

To see how it works, type the following Javascript code:

const name =’ Manejando datos’;
console.log (Hello ${name}`);
console.log (‘ Hello ${name}’);
console.log (“Hello ${name}”);

You can check that only the last one with ` takes place the real conversion.

string templates

string templates

Variables declaration

The second recommendation is on the declaration of variables, since you now have 3 options: in addition to the classic var, there is let and const. The first is global, the second is to work with it within the block that contains it, and the third is how the first, but immutable, that is, you cannot change the value.

Over time, I have been migrating in my developments of declaring variables with var to let, mainly because the scope of influence of the variables is better managed, something fundamental when doing medium-large developments.

Let’s see how statements work:

var variable =’ test’;
let letvar =’ variable with let’;
const name =’ Handling data’;
console. log (variable); console. log (letvar); console. log (name);
{
let letvar2 =’ me ves’;
var var2 =’ Hello’;
console. log (letvar); console. log (letvar2);
}
console. log (var2); console. log (letvar2);

While the 3 variables defined in the global are perfectly visible within the internal block, the letvar2 variable is not visible outside of where it is defined, while var2 variable is visible outside.

declaración de variables

Variable’s declaration

Without a doubt, controlling the scope of variables is fundamental for large projects, so I recommend that you pay close attention to the issue of declaring variables.

Constants of an object

If you need an object to be completely constant and cannot be modified, the best option is to use Object. freeze (object), and in this way, it will be immutable, including its properties.

The solution to “defrost” an object can be found by clicking here. With this, it is quite clear that const is not synonymous with constant that cannot vary!!

Object.freeze

Object.freeze

Be careful, because this freezen process is not reversible.

The solution to “defrost” an object can be found by clicking here. With this, it is quite clear that const is not synonymous with constant that cannot vary!!

I leave you the full code:

Object. unfreeze=function (o){
var oo=undefined;
if (o instanceof Array){
oo=[]; var clone=function (v){oo. push (v)};
o. forEach (clone);
}else if (or instanceof String{)
oo=new String (o). toString ();
}else if (typeof or ==’ 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 (‘ Constant of an object…’);
const obj = {‘ prop’: 1,’ prop2′: 2};
console. log (default object);
Prop object = 3;
console. log (default object);
console. log (‘ Freeze…’);
const obj2 = Object. freeze (obj);
console. log (obj2. prop);
obj2. prop = 5;
console. log (obj2. prop);
console. log (‘ Defrost…’);
const obj3 = Object. unfreeze (obj2);
obj3. prop = 5;
console. log (obj3. prop);

and the result:

>img class= “size-medium wp-image-5005” src= “http://www.manejandodatos.es/wp-content/uploads/2018/02/unfreeze-300×118.jpg” alt= “Object. unfreeze” width= “300” height= “118” /> Object. unfreeze”.

And that’s all, I hope it works for you, because it’s also valid for TypeScript.

Happy coding!

Manejando Datos Newsletter

Noticias, entradas, eventos, cursos, … News, entrances, events, courses, …


Gracias por unirte a la newsletter. Thanks for joining the newsletter.