JavaScript ES6 trae una nueva sintaxis y nuevas características asombrosas para hacer su código más moderno y más legible. Te permite escribir menos código y hacer más. ES6 nos presenta muchas características excelentes como funciones de flecha, cadenas de plantillas, destrucción de clases, módulos ... y más. Vamos a ver.
const y dejar
constes una nueva palabra clave en ES6 para declarar variables. constes más poderoso que var. Una vez utilizada, la variable no se puede reasignar. En otras palabras, es una variable inmutable excepto cuando se usa con objetos.
Esto es realmente útil para apuntar a los selectores. Por ejemplo, cuando tenemos un solo botón que dispara un evento, o cuando desea seleccionar un elemento HTML en JavaScript, use en constlugar de var. Esto se debe a que varestá 'izado'. Siempre es preferible usarlo constcuando no se desea reasignar la variable.
En el código anterior, constno cambiará y no se puede reasignar. Si intenta darle un nuevo valor, le devolverá un error.
letse puede reasignar y tomar un nuevo valor. Crea una variable mutable .
letes lo mismo que consten que ambos son de alcance bloqueado. Significa que la variable solo está disponible dentro de su alcance.
Funciones de flecha
La función de flecha es realmente impresionante y hace que su código sea más legible, más estructurado y se vea como un código moderno. En lugar de usar esto:
Utilizar este:
Como puede ver, la función de flecha parece más legible y limpia. Ya no necesitará usar la sintaxis anterior.
Además, se puede utilizar la función de Flecha con map, filteryreducefunciones integradas.
La función de mapa con flechas parece más clara y legible que mapen ES5. Con ES6 puede escribir código más corto e inteligente. Puede usar lo mismo con filtery reduce.
Literales de plantilla
Los literales de plantilla o las cadenas de plantilla son geniales. No tenemos que usar el operador más (+) para concatenar cadenas, o cuando queremos usar una variable dentro de una cadena.
La vieja sintaxis:
Con la nueva sintaxis de ES6:
¡Tan sencillo! Es una gran diferencia entre la sintaxis anterior y ES6. Cuando se juega con cadenas, la cadena literal en ES6 parece más organizada y estructurada que en ES5.
Parámetros predeterminados
Cuando trabajo en PHP, suelo utilizar parámetros predeterminados. Estos le permiten definir un parámetro por adelantado.
Entonces, cuando olvide escribir el parámetro, no devolverá un error indefinido porque el parámetro ya está definido por defecto. Entonces, cuando ejecuta su función con un parámetro perdido, tomará el valor del parámetro predeterminado ty no devolverá un error.
Mira este ejemplo:
La función anterior devuelve undefined, porque olvidamos darle el segundo parámetro age.
Pero si usamos el parámetro predeterminado, no devolverá undefined y usará su valor cuando olvidemos asignar un parámetro.
Como puede ver, la función devuelve un valor aunque nos perdimos el segundo parámetro. Ahora, con el parámetro predeterminado, podemos manejar el error de antemano.
Destrucción de matrices y objetos
La destrucción facilita la asignación de los valores de una matriz u objeto a la nueva variable.
La vieja sintaxis:
Con sintaxis ES6:
Con ES5, tenemos que asignar cada valor a cada variable. Con ES6, simplemente ponemos nuestros valores entre corchetes para obtener cualquier propiedad del objeto.
Nota:si asigna una variable que no es idéntica al nombre de la propiedad, devolverá undefined. Por ejemplo, si el nombre de la propiedad es namey lo asignamos a unusernamevariable,volverá indefinido.
Siempre tenemos que nombrar la variable igual que el nombre de la propiedad. Pero en caso de que queramos cambiar el nombre de la variable, podemos usar dos puntos en su :lugar.
For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.
Import and export
Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.
If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?
It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.
For example, we have two files. The first is named detailComponent.jsand the second is namedhomeComponent.js.
In detailComponent.jswe are going to export the detail function.
And if we want to use this function in homeComponent.js,we will just use import.
If we want to import more than one module, we just put them within curly brackets.
So cool, isn’t it?!
Promises
Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!
If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.
Note: the fetch function returns a Promise itself!
const url="//jsonplaceholder.typicode.com/posts";const getData=(url)=>{return fetch(url);}getData(url).then(data=> data.json()).then(result=> console.log(result));Now if you log your console it will return an array of data.
Rest parameter and Spread operator
The rest parameters are used to get the argument of an array, and return a new array.
The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"Classes
Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.
To create a class, use the class keyword followed by the name of the class with two curly brackets.
Now we can access the class methods and properties using the new keyword.
class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// saidPara heredar de otra clase, use la extendspalabra clave seguida del nombre de la clase de la que desea heredar.
Puede obtener más información sobre las clasesaquí.
ES6 tiene otras características sorprendentes; puede explorarlas aquí.
Conclusión
Espero que este artículo les haya resultado útil y espero poder presentarles algunas de las características de ES6. Si es así, suscríbase a esta lista de correo para obtener más información sobre los temas de Front-end. Gracias por tu tiempo.
Por cierto, recientemente trabajé con un grupo sólido de ingenieros de software para una de mis aplicaciones móviles. La organización fue excelente y el producto se entregó muy rápido, mucho más rápido que otras empresas y autónomos con los que he trabajado, y creo que puedo recomendarlos honestamente para otros proyectos. Envíeme un correo electrónico si desea ponerse en contacto: [email protected]