Il est statistiquement prouvé que JavaScript est le langage le plus largement utilisé par les programmeurs dans le monde. L’une des raisons les plus importantes à cela est qu’il est convivial pour les développeurs. Une étude récente a suggéré que le nombre de développeurs JavaScript a augmenté au cours des 4 dernières années et actuellement sur 1,8 milliard de sites Web, 95% d’entre eux fonctionnent avec JavaScript. Outre la popularité des derniers outils et méthodologies, JavaScript a réussi à conserver la 4ème position en termes de popularité.
Les développeurs ont trouvé des trucs et astuces super sympas qui facilitent le travail et le processus de codage devient sans tracas. Mais, en tant que développeur, vous devez connaître les trucs et astuces simples pour travailler sur un projet donné en maintenant l’hygiène. Tout d’abord, comprenons pourquoi Javascript est très exigeant à l’échelle mondiale.
Pourquoi JavaScript est-il préféré dans le monde ?
Les développeurs JavaScript ont non seulement une exposition supplémentaire à la création d’applications complètes en utilisant un langage, mais il existe également divers avantages lors du codage en JavaScript, en dehors de sa prise en charge complète du côté serveur au côté client, du frontend au backend, tout pourrait être géré individuellement avec le l’aide de JavaScript.
Ces suggestions amélioreraient non seulement vos compétences en matière de codage, mais rendraient également vos applications plus rapides et plus conviviales.
Nous allons maintenant discuter de 8 trucs et astuces pour améliorer votre programmation JavaScript qui vous aideront à gagner du temps et à améliorer la qualité du code.
8 trucs et astuces pour les développeurs JavaScript
1. Pour comparaison, il est préférable d’utiliser triple égal (===) au lieu de double égal (==)
Double Equals (==) vérifie vaguement, c’est-à-dire qu’il convertit automatiquement le type de données là où c’est nécessaire. Alors que le triple égal (===) vérifie strictement l’égalité, c’est-à-dire qu’il vérifie à la fois la valeur et le type de données. Ainsi, nous devons toujours utiliser des triples égaux pour comparer deux objets.
// is false, because it checks the
// datatype of both LHS and RHS
[1] === 1
// is true, because it typecasts the
// left value, which is 1, equal to RHS.
[1] == 1
// is false, because LHS is a
// character while RHS is a Int.
'2' === 2
// is true, due to
// the typecasting.
'2' == 2
'undefined'=='undefined' // is true
'undefined' === 'undefined' // is true
0 == false // is true
0 === false // is false- Double égal (==) est également dit comme vaguement égal. Il effectue des conversions de type tout en comparant deux choses.
- Triple égal (===) est aussi dit Strictement égal. Comme il ne tape pas les conversions tout en comparant deux choses.
2. Utilisez SET pour obtenir des valeurs uniques
Dans un tableau donné en JavaScript (version ES6), si nous avons des valeurs en double et que nous voulons obtenir toutes les valeurs uniques, nous pouvons stocker ce tableau dans un objet SET qui est introduit dans la version ES6
// arr is the array with duplicate integers
const arr = [10,10,20,20,30];
// Now store this array in a set called new_arr
const new_arr = [...new Set(arr)];
// Print the new_arr
console.log(new_arr); // Result: [10, 20, 30]Sortir:
[10, 20, 30]
Sans Set, le même processus prend du temps. Nous devons parcourir le tableau et stocker les éléments uniques dans un nouvel objet un par un.
3. Opérations directes dans Console.log()
Nous pouvons directement effectuer des opérations sur le console.log() lui-même. Nous n’avons pas besoin de calculer d’abord avant de l’imprimer dans la console. Il peut effectuer des opérations d’addition, de soustraction, de multiplication, de division, d’exponentiation, d’incrémentation, de décrémentation et logiques sur la console elle-même
var a = 10;
var b = 20;
// Addition
console.log("Addition of a and b: " + (a + b) );
// Subtraction
console.log("Subtraction: " + (a - b) );
// Multiplication
console.log("Multiplication between a and b: " + (a * b) );
// Division
console.log("The Quotient will be: " + (b / a) );
// Modulo, when a is divided by b
console.log((a % b));
// pre-increment
console.log("Value of a after pre-increment: " + (++a) );
// post-increment
console.log("Value of a after post-increment: " + (a++) );
// pre-decrement
console.log("Value of b after pre-decrement: " + (--b) );
// post-decrement
console.log("Value of b after post-decrement: " + (b--) );
// Exponentiation
console.log("2 raise to the power 3: " + (2**3);Sortir:
Addition de a et b : 30 Soustraction : -10 Multiplication entre a et b : 200 Le Quotient sera : 2 Le modulo lorsque b est divisé par a : 10 Valeur de a après pré-incrément : 11 Valeur de a après post-incrément : 11 Valeur de b après pré-décrémentation : 19 Valeur de b après post-décrémentation : 19 2 montée à la puissance 3 : 8
4. Réduire la longueur d’un tableau
La longueur du tableau peut être réduite par la fonction de longueur ( array.length ).
Supposons qu’il existe un tableau de taille 10. Et vous avez besoin des k premiers éléments où, (k < 10) du tableau, nous pouvons réduire la longueur du tableau pour obtenir le tableau de taille réduite.
Par exemple:
Tableau : [ 11, 12, 122, 133, 152], taille= 4 ;
Et, nous voulons un tableau de taille 2. Par conséquent, le tableau sera : [ 11,12 ]
var array = [1, 2, 5, 78, 98]
console.log("The array of size ",array.length)
// size of the array is 4
array.length=4;
console.log("The array of size ", array.length,"is :",array)
// size of the array is 3
array.length=3;
console.log("The array of size ", array.length,"is :",array)
//size of the array is 2
array.length=2;
console.log("The array of size ", array.length,"is :",array)
Sortir
Le tableau de taille 5 Le tableau de taille 4 est : [ 1, 2, 5, 78 ] Le tableau de taille 3 est : [ 1, 2, 5 ] Le tableau de taille 2 est : [ 1, 2 ]
5. Utilisez ‘Slice’ pour obtenir les éléments sélectionnés dans un tableau
La méthode Slice est utilisée dans les tableaux pour obtenir les éléments sélectionnés d’un tableau. Il renvoie un nouveau tableau contenant les éléments sélectionnés, mais le tableau d’origine reste inchangé.
Syntaxe:
array.slice(début, fin)
Il prend deux paramètres.
Le premier est start , dont la valeur par défaut est 0 et qui peut prendre à la fois des tableaux négatifs et positifs. Les valeurs positives commencent au début du tableau tandis que les valeurs négatives partent de la fin du tableau.
La seconde est la fin, sa valeur par défaut est le dernier élément du tableau. Il prend également des valeurs positives et négatives et les valeurs négatives commencent à la fin du tableau
const name = ["WCS", "WeCours", "Cours", "WeCours"];
const name11 = name.slice(1, 2);
console.log(name11)
const name1 = name.slice(1, 3);
console.log(name1)
const name2 = name.slice(-2,-1);
console.log(name2)
const name3 = name.slice(-1);
console.log(name3)
Sortir
[ 'WCS' ] [ 'WCS', 'WCS' ] [ 'WeCours' ]
6. L’opérateur Spread
Se souvenir? Copier un tableau A dans un tableau B index par index. Ce processus mouvementé et lent est converti en une opération très simple et en une seule étape grâce à l’utilisation de l’opérateur Spread. L’opérateur Spread nous permet de copier un itérable et de le diffuser dans un autre objet similaire. Il copie les propriétés de l’objet existant dans l’autre.
L’opérateur de propagation en JavaScript peut être utilisé à trois endroits :
- Sur le fonctionnement sur un tableau : Supposons que nous ayons un tableau et que vous deviez y modifier une clé à une position définie. Cette tâche peut être facilement effectuée en utilisant l’opérateur Spread.
- Dans la liste des arguments d’une fonction : Lorsqu’il y a plusieurs arguments dans une fonction, on peut tous les appeler en raccourcissant la syntaxe de l’argument.
- Littéral d’objet : chaque fois que l’on doit fusionner, cloner superficiellement ou effectuer des types d’opérations similaires sur des objets, cet opérateur Spread peut être facilement réalisé à l’aide de l’opérateur Spread dans une syntaxe beaucoup plus courte. Le seul inconvénient est qu’en utilisant l’opérateur de propagation, on ne peut pas muter l’objet
function product(a, b, c){
return a*b*c;
}
const num = [1,2,3,4,5,9,8];
console.log("the product of array's three elements are -:", product(...num));
Sortir
le produit des trois éléments du tableau est - : 6
7. L’utilisation du mot-clé “Ceci”
Le mot-clé This est sans aucun doute l’un des concepts les plus difficiles mais les plus utiles du JavaScript avancé. Ce mot-clé définit la ligne courante du contexte d’exécution du code, c’est-à-dire que ce mot-clé stocke la valeur du contexte d’exécution courant du programme JavaScript.
L’invocation d’une fonction peut se faire de différentes manières mais le mot-clé This fait référence au contexte d’exécution en cours. La valeur de This dépend de la liaison d’exécution. Il est modifié à chaque fois que la fonction est invoquée.
Chaque fois qu’il y a une liaison implicite, pour faire référence à l’objet au moment de l’invocation, nous pouvons utiliser le mot-clé This . Cela lierait le mot-clé à cet objet actuel.
Syntaxe:
soit article = {
article_name : 'Trucs et astuces JavaScript',
auteur: 'Anurag Mishra',
introduction : fonction() {
concole.log('${this.article_name} est écrit par ${author}');
}
} ;
article.intro();
Sortir:
Les trucs et astuces JavaScript sont écrits par Anurag Mishra
Pour plus d’informations sur ce mot-clé, vous pouvez vous référer à l’article : this en JavaScript
8. Utilisation de la fonction Flèche
Avec la mise à jour de JavaScript dans ES6, le changement le plus influent qui a vu le jour a été le concept de fonctions Arrow. La plupart des langages avancés utilisent des fonctions fléchées pour raccourcir leur syntaxe et exécuter des fonctions plus importantes dans un bloc de code plus petit.
Les fonctions fléchées ne peuvent être utilisées que si la fonction a une seule ligne d’instruction d’exécution. Les fonctions fléchées prennent également en charge le passage de paramètres.
Le contexte à l’intérieur de la fonction fléchée est défini lexicalement
const names = ['Cours', 'WeCours', 'We'];
console.log("The length of each string in the names array is: ", names.map(name => name.length));
Sortir
La longueur de chaque chaîne dans le tableau des noms est : [ 3, 3, 13, 4 ]
Pour en savoir plus sur les fonctions Flèche, vous pouvez vous référer à l’article – Fonctions Flèche en JavaScript
Conclusion
JavaScript est un langage de programmation très convivial. Il existe plusieurs autres concepts importants qui ne sont disponibles que dans des langages avancés comme JavaScript. La mise à niveau ES6 a apporté un changement de spectre et rendu JavaScript immensément populaire. L’avènement des fonctions fléchées, l’utilisation des opérateurs slice et spread et d’autres conventions nouvellement ajoutées sont comme la cerise sur le gâteau. En raison de sa présence à grande échelle dans toutes les piles technologiques et de multiples frameworks, ces fonctionnalités deviennent encore plus importantes car elles sont utilisées dans chacun d’eux.