JavaScript ES6 - Écrivez moins, faites plus

JavaScript ES6 apporte une nouvelle syntaxe et de nouvelles fonctionnalités impressionnantes pour rendre votre code plus moderne et plus lisible. Cela vous permet d'écrire moins de code et d'en faire plus. ES6 nous présente de nombreuses fonctionnalités intéressantes telles que les fonctions fléchées, les chaînes de modèles, la destruction de classe, les modules… et plus encore. Nous allons jeter un coup d'oeil.

const et laissez

constest un nouveau mot clé dans ES6 pour déclarer des variables. constest plus puissant que var. Une fois utilisée, la variable ne peut pas être réaffectée. En d'autres termes, c'est une variable immuable sauf lorsqu'elle est utilisée avec des objets.

Ceci est vraiment utile pour cibler les sélecteurs. Par exemple, lorsque nous avons un seul bouton qui déclenche un événement, ou lorsque vous souhaitez sélectionner un élément HTML dans JavaScript, utilisez à la constplace de var. C'est parce qu'il varest «hissé». Il est toujours préférable d'utiliser constlorsque vous ne souhaitez pas réaffecter la variable.

Dans le code ci-dessus, constne changera pas et ne pourra pas être réaffecté. Si vous essayez de lui donner une nouvelle valeur, il vous renverra une erreur.

letpeut être réaffecté et prendre une nouvelle valeur. Il crée une variable mutable .

letest le même que constdans le sens où les deux sont bloqués. Cela signifie que la variable n'est disponible que dans sa portée.

Fonctions fléchées

La fonction de flèche est vraiment géniale et rend votre code plus lisible, plus structuré et ressemble à du code moderne. Au lieu d'utiliser ceci:

Utilisez ceci:

Comme vous le voyez, la fonction flèche semble plus lisible et plus propre! Vous n'aurez plus besoin d'utiliser l'ancienne syntaxe.

Vous pouvez également utiliser la fonction FLÈCHE map, filteretreducefonctions intégrées.

La fonction de carte avec des flèches semble plus claire et lisible que mapdans ES5. Avec ES6, vous pouvez écrire un code plus court et plus intelligent. Vous pouvez utiliser la même chose avec filteret reduce.

Littéraux de modèle

Les littéraux de modèle ou les chaînes de modèle sont plutôt cool. Nous n'avons pas besoin d'utiliser l'opérateur plus (+) pour concaténer des chaînes, ou lorsque nous voulons utiliser une variable à l'intérieur d'une chaîne.

L'ancienne syntaxe:

Avec la nouvelle syntaxe ES6:

Si simple! C'est une différence vraiment énorme entre l'ancienne syntaxe et ES6. Lorsque vous jouez avec des cordes, la chaîne littérale dans ES6 semble plus organisée et bien structurée que ES5.

Paramètres par défaut

Lorsque je travaille en PHP, j'utilise généralement les paramètres par défaut. Ceux-ci vous permettent de définir un paramètre à l'avance.

Ainsi, lorsque vous oubliez d'écrire le paramètre, il ne retournera pas d'erreur non définie car le paramètre est déjà défini dans la valeur par défaut. Ainsi, lorsque vous exécutez votre fonction avec un paramètre manqué, elle prendra la valeur du paramètre par défaut t, et elle ne retournera pas d'erreur!

Regardez cet exemple:

La fonction ci-dessus renvoie undefined, car nous avons oublié de lui donner le deuxième paramètre age.

Mais si nous avons utilisé le paramètre par défaut, il ne retournera pas undefined, et il utilisera sa valeur lorsque nous oublions d'assigner un paramètre!

Comme vous le voyez, la fonction renvoie une valeur même si nous avons manqué le deuxième paramètre. Maintenant, avec le paramètre par défaut, nous pouvons gérer l'erreur à l'avance.

Destruction de tableaux et d'objets

La destruction facilite l'affectation des valeurs d'un tableau ou d'un objet à la nouvelle variable.

L'ancienne syntaxe:

Avec la syntaxe ES6:

Avec ES5, nous devons attribuer chaque valeur à chaque variable. Avec ES6, nous mettons simplement nos valeurs entre accolades pour obtenir n'importe quelle propriété de l'objet.

Remarque:si vous affectez une variable qui n'est pas identique au nom de la propriété, elle renverra undefined. Par exemple, si le nom de la propriété est nameet que nous l'attribuons à unusernamevariable,il retournera undefined.

Nous devons toujours nommer la variable de la même manière que le nom de la propriété. Mais si nous voulons renommer la variable, nous pouvons utiliser les deux points à la :place.

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)// said

Pour hériter d'une autre classe, utilisez le extendsmot - clé suivi du nom de la classe dont vous souhaitez hériter.

Vous pouvez en savoir plus sur les coursici.

ES6 a d'autres fonctionnalités étonnantes - vous pouvez les explorer ici.

Conclusion

J'espère que vous avez trouvé cet article utile et j'espère avoir été en mesure de vous présenter certaines des fonctionnalités de l'ES6. Si tel est le cas, abonnez-vous à cette liste de diffusion pour en savoir plus sur les sujets frontaux. Merci pour votre temps.

En passant, j'ai récemment travaillé avec un groupe d'ingénieurs logiciels pour l'une de mes applications mobiles. L'organisation était formidable et le produit a été livré très rapidement, beaucoup plus rapidement que les autres entreprises et indépendants avec lesquels j'ai travaillé, et je pense que je peux honnêtement les recommander pour d'autres projets. Envoyez-moi un e-mail si vous souhaitez me contacter - [email protected]