ECMAScript6 (ES6): ¿What’s new in the next version of Javascript?

First…What is JavaScript?

JavaScript is a programming language that allows you to create new and dynamic content. It is the third layer of a cake, the first two being HTML, a markup language that uses structure to give meaning to web content and CSS, a cascading rule language that we use to apply a style to our HTML content.

These three HTML, CSS and JavaScript layers complement each other.

JavaScript allows you to do things like:

- Store useful values ​​within variables.

- Run the code in response to some events that are happening on the web page. We use an event, such as a click to detect when the button has been clicked to then operate the code and perform the functions that correspond.

- A function is a procedure in JS, a set of statements that perform a task or calculate a value.

So…What is ES6?

JavaScript is based on a standard called ECMAScript. The sixth version called ES2015 for the year in which it was published; It is also informally known as ES6 (ECMA Script 6).
This is ES6, a version of JavaScript that brings great improvements in syntax and operation.

6 Javascript New ES6 functionalities That Every Web Developer Should Know!

Interpolation of chains

ES6 makes it easy for us to insert variables and operations into text strings. For that we will write the strings between serious accents or backticks (`This is a string`), instead of in quotation marks, and expressions or variables between ${ and } ( ${expressionOrVariable} ).

The let and const variables

When we declare variables with let or const, the variables are only available inside the scope of the block (between { and } ) where they were declared and if we try to use them outside, they will give us an error and warn us that the variable does not exist in that context.

On the other hand, const allows us to declare a variable whose value never changes once we assign it, this variable is called a constant.

However, if the value assigned to a constant is an array or an object, its members or internal properties can change.

Loop for… of

The for…of loop of ES6 it allows us to go through an array, for example, without having to write the conditions of a normal for. In addition, it allows us to use much more recognizable names for the values inside the array.

We can not forget that if we wanted to modify the values ​​of the array, we would have to make a for loop as we already knew, since the for… of only allows us to read the data.

The arrow functions

Este nuevo tipo de funciones nos dan una sintaxis mucho más limpia, el código es mucho más limpio, ya que no tenemos que escribir las palabras function y return, sino que tan solo introducimos una flecha ‘=>’ después de los parámetros.

This new type of functions gives us a much cleaner syntax, the code is much cleaner, since we do not have to type the words function and return, but we only introduce an arrow ‘=>’ after the parameters.

Destructuring

The syntax of destructuring of ES6 allows us to obtain values ​​of a data structure, such as arrays or objects, simulating their syntax, in each case, we can declare several variables at the same time.

Spread

The spread operator (…) converts an array or an object into the set of values ​​it contains, so it allows us to use them as if they were written in the code itself. One of the advantages offered by the spread operator is that we do not have to know what is in the array or object at any time.

And that’s only a few, you can find more at https://developer.mozilla.org/es/docs/Web/JavaScript/Novedades_en_JavaScript/ECMAScript_6_support_in_Mozilla .

As a programmer, it is important to stay up to date on the newest technology in your field. By understanding the new features and functionality of ES6, you will avoid becoming a dinosaur.