Liste des raccourcis JavaScript utiles

Dans cet article, nous verrons comment écrire du code JavaScript en utilisant des raccourcis pratiques qui rendent notre code plus propre et plus facile à lire.

JavaScript est un langage de programmation populaire pour le développement d’applications Web et plus encore. Il est passé d’un langage utilisé pour créer des scripts simples pour créer des pages Web à un langage dynamique qui peut être utilisé pour créer de nombreux programmes.

Nous pouvons rendre notre code JavaScript plus propre en utilisant des raccourcis faciles à lire pour effectuer diverses opérations – et c’est ce que nous examinerons dans cet article.

L’opérateur ternaire (?)

L’opérateur ternaire nous permet de retourner une valeur si une condition est vraie et de retourner une valeur différente sinon.

Nous pouvons écrire une expression avec en écrivant une expression booléenne, suivie de ?la valeur à renvoyer lorsque l’expression booléenne renvoie une valeur véridique, : et la valeur renvoyée lorsque l’expression booléenne renvoie une valeur fausse.

Par exemple, on l’utilise en écrivant :

const foo = true;
const bar = foo ? "heads" : "tails";
console.log(bar);

pour retourner « faces » si foo renvoie une valeur de vérité et « queue » sinon.

Par conséquent, bar est heads depuis foo est truece qui est vrai.

C’est le raccourci pour cela:

const foo = true;
let bar;
if (foo) {
  bar = "heads";
} else {
  bar = "tails";
}
console.log(bar);

Comme nous pouvons le voir, nous avons simplifié notre code en remplaçant les instructions if-else par une expression ternaire.

Nous avons également évité d’utiliser let ce qui est mieux puisque nous n’aurons pas à nous soucier de réaffecter un const variable à une nouvelle valeur par accident.

Opérateur de chaînage facultatif (?.)

L’opérateur de chaînage facultatif nous permet d’obtenir des propriétés profondément imbriquées sans nous soucier d’une propriété de la chaîne qui n’existe pas ou qui n’a pas de valeur d’objet.

L’opérateur est noté par ?..

Par exemple, on peut l’utiliser en écrivant

const obj = {
  foo: {
    bar: {
      baz: {
        qux: 1,
      },
    },
  },
};
console.log(obj?.foo?.bar?.baz?.qux);

Alors 1 est enregistré dans le journal de la console depuis obj?.foo?.bar?.baz?.qux rendements immobiliers 1.

L’avantage de ceci est que nous n’avons pas à nous soucier d’une propriété de la chaîne qui n’existe pas ou qui n’a pas de valeur d’objet.

Par exemple, nous écrivons :

const obj = {
  foo: {
    baz: {
      qux: 1,
    },
  },
};
console.log(obj?.foo?.bar?.baz?.qux);

Ensuite, le journal de la console enregistre undefined puisque nous n’avons plus le bar propriété dans le obj objet.

Si nous utilisons la norme . opérateur pour accéder à la même propriété, nous obtiendrons le bar la propriété est une erreur indéfinie puisqu’elle n’existe pas.

obj?.foo?.bar?.baz?.qux est équivalent à obj && obj.foo && obj.foo.bar && obj.foo.bar.baz && obj.foo.bar.baz.qux.

Comme on peut le voir, la première expression est beaucoup plus courte.

Le chaînage optionnel est disponible depuis la version ES2020.

Opérateur de coalescence nulle (??)

L’opérateur de coalescence nul est un autre opérateur introduit avec ES2020.

Il nous permet de retourner une valeur de repli si la valeur que nous voulons retourner est null ou undefined.

L’opérateur est noté par ??.

Par exemple, on l’utilise en écrivant :

const foo = null;
const bar = foo ?? "bar";
console.log(bar);

const baz = undefined;
const qux = baz ?? "baz";
console.log(qux);

const x = 1;
const y = x ?? 2;
console.log(y);

Si le premier opérande est null ou undefinedla valeur du deuxième opérande est renvoyée.

Donc, bar est 'bar' et qux est 'baz'. y est 1 depuis x est 1, ce qui n’est pas null ou undefined.

Vérifications de la valeur réelle

Si nous voulons vérifier si une expression retourne truenous n’avons pas à vérifier true avec ===.

Au lieu de cela, nous mettons simplement l’expression dans le if déclaration.

Par exemple, au lieu d’écrire :

if (isHappy === true) {
  
}

Nous écrivons:

if (isHappy) {
  
}

La première if l’instruction ne vérifie que si isHappy est true.

Et le deuxième if déclaration vérifie si isHappyrenvoyant une valeur de vérité.

Par conséquent, si isHappy peut renvoyer une valeur de vérité autre que truealors nous voudrons peut-être changer le premier if déclaration pour vérifier plus précisément.

Valeurs des paramètres par défaut

Depuis ES2015, les fonctions JavaScript peuvent avoir des valeurs de paramètres par défaut.

Par exemple, nous écrivons :

const add = (a = 1, b = 2) => {
  return a + b;
};
console.log(add(5, 6));

pour définir la valeur par défaut du a paramètre à 1 et la valeur par défaut de b à 2 dans le add fonction.

Cela nous permet de définir une valeur de repli au cas où un paramètre n’aurait pas de valeur définie.

Paramètres de fonction par défaut si raccourci pour quelque chose comme :

const add = (a, b) => {
  if (!a) {
    a = 1;
  }

  if (!b) {
    b = -2;
  }
  return a + b;
};
console.log(add(5, 6));

où nous attribuons a et b valeurs par défaut si elles n’ont pas de valeur de vérité.

Comme on peut le voir, le premier add fonction est beaucoup plus courte que la seconde en raison de l’utilisation de la fonction de paramètres de fonction par défaut.

Les paramètres de fonction par défaut sont courts et faciles à comprendre.

Boucle pour de

Souvent, nous voulons parcourir chaque élément d’un tableau.

Cela peut facilement être fait avec la boucle JavaScript for-of qui est disponible depuis ES2015.

On peut l’utiliser en écrivant :

const arr = [1, 2, 3, 4, 5, 6];
for (const a of arr) {
  console.log(a);
}

pour parcourir les entrées du arr tableau avec la boucle for-of.

a est la variable de boucle qui a l’entrée actuelle dans arr étant en boucle.

Et nous enregistrons la valeur de a dans la boucle.

Par conséquent, nous voyons :

1
2
3
4
5
6

dans le journal de la console.

C’est plus court que d’utiliser une boucle for normale où nous devons définir une variable d’index et l’utiliser pour accéder à l’entrée en boucle comme :

const arr = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

où i est la variable d’index qui est incrémentée de 1 à chaque itération jusqu’à ce qu’elle atteigne arr.length - 1.

Un autre avantage de la boucle for-of est que nous pouvons l’utiliser pour parcourir n’importe quel objet itérable.

Par exemple, nous écrivons :

const set = new Set([1, 2, 1, 1, 4, 5, 6]);
for (const s of set) {
  console.log(s);
}

faire une boucle à travers le set avec la boucle for-of.

s a l’entrée en boucle.

Étant donné que les ensembles suppriment toutes les entrées en double lorsqu’ils sont ajoutés, nous obtenons :

1
2
4
5
6

depuis le journal de la console.

Propriétés de l’objet

Nous pouvons ajouter des propriétés à un objet en définissant la valeur de la propriété de l’objet sur la valeur d’une variable.

Par exemple, nous écrivons

const x = 1;
const y = 2;
const obj = {
  x,
  y,
};
console.log(obj);

pour créer le obj objet avec propriétés x et y mis aux valeurs des variables x et y respectivement.

En conséquence, nous pouvons voir objla valeur de est :

{
  x: 1,
  y: 2
}

C’est l’abréviation de :

const x = 1;
const y = 2;
const obj = {
  x: x,
  y: y,
};
console.log(obj);

Nous pouvons éliminer les deux-points et l’expression après cela si le nom de la propriété est le même que le nom de la variable de la valeur de la propriété.

Ceci est disponible depuis ES2015.

Exposants (**)

JavaScript a l’opérateur d’exponentiation (**), ce qui équivaut à utiliser le Math.pow méthode.

L’opérateur de gauche est la base et l’opérande de droite est l’exposant.

Par exemple, nous écrivons :

const x = 2 ** 3;

pour retourner la valeur de 2 élevée à la puissance 3 et l’affecter à x.

Par conséquent x est 8.

On peut faire la même chose en écrivant :

const x = Math.pow(2, 3);

Mais ** est plus court et n’implique pas l’appel de fonctions que nous n’avons pas besoin d’appeler.

Fonctions fléchées

Les fonctions fléchées nous permettent de définir des fonctions sans utiliser les function mot-clé.

Il ne se lie pas à sa propre valeur de this nous ne pouvons donc pas les utiliser comme fonctions constructeurs, ce qui peut être utile selon la raison pour laquelle nous voulons définir la fonction.

Si nous ne voulons pas créer une instance du constructeur, nous pouvons utiliser des fonctions fléchées.

Par exemple, nous écrivons :

const add = (a, b) => {
  return a + b;
};
console.log(add(1, 2));

pour définir le add fonction.

Comme nous pouvons le voir, nous avons défini une fonction sans utiliser le function raccourci, ce qui le rend plus court.

Et puisque nous ne voulons pas créer une fonction constructeur, où nous manipulons la valeur de thisdéfinir une fonction fléchée est un bon choix.

C’est plus court que d’écrire :

const add = function (a, b) {
  return a + b;
};

Modèles littéraux

Nous pouvons utiliser l’emplacement littéral du modèle pour définir des chaînes pouvant contenir des expressions interpolées.

Par exemple, nous écrivons :

const numBottles = 100;
const str = `There are ${numBottles} bottles of beer on the wall.`;
console.log(str);

pour interpoler la valeur de numBottles variable dans la chaîne.

Par conséquent, str est "There are 100 bottles of beer on the wall."

C’est plus court que :

const numBottles = 100
const str = 'There are ' + numBottles + ' bottles of beer on the wall.`

qui utilise la concaténation pour mettre la valeur de numBottles dans la ficelle.

La notation littérale du modèle est meilleure si nous voulons concaténer des chaînes et des expressions ensemble.

Et il préserve également tous les espaces et caractères de saut de ligne que nous ajoutons à la chaîne, ce que les chaînes normales n’ont pas.

Mission de déstructuration

La syntaxe d’affectation de déstructuration est un raccourci pratique introduit avec ES2015.

Il nous permet d’affecter des propriétés d’objet et des entrées de tableau comme valeurs de variables sur une seule ligne.

Par exemple, nous écrivons :

const arr = [1, 2, 3, 4, 5];
const [a, b, c] = arr;
console.log(a, b, c);

pour attribuer les trois premières entrées de arr aux variables a, b et c respectivement avec la déstructuration.

Donc a est 1, b est 2 et c est 3.

C’est beaucoup plus court que :

const arr = [1, 2, 3, 4, 5];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a, b, c);

Puisque nous devons utiliser l’index pour obtenir la valeur des entrées que nous voulons, puis les affecter aux variables individuellement.

La syntaxe de déstructuration élimine une fois de plus de nombreuses répétitions lorsque nous attribuons plusieurs entrées de tableau à des valeurs de variables différentes.

La syntaxe d’affectation de déstructuration fonctionne également avec les propriétés d’objet.

Pour l’utiliser avec des objets, on écrit :

const obj = {
  x: 1,
  y: 2,
  z: 3,
};
const { x, y, z } = obj;
console.log(x, y, z);

pour obtenir les valeurs de x, y et z propriétés dans obj et les affecter aux variables x,
y et z respectivement.

Par conséquent, x est 1, y est 2 et z est 3.

C’est beaucoup plus court que :

const obj = {
  x: 1,
  y: 2,
  z: 3,
};
const x = obj.x;
const y = obj.y;
const z = obj.z;

qui obtient la valeur de chaque propriété et les affecte à des variables dans leurs propres lignes.

La syntaxe de déstructuration élimine une fois de plus beaucoup de répétitions.

Opérateur de propagation (…)

L’opérateur de propagation nous permet de copier des entrées de tableau et des valeurs d’objet.

Par exemple, nous écrivons :

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);

Alors arr3 est [1, 2, 3, 4, 5, 6] puisque nous avons copié les entrées de arr1 et arr2 dans le nouveau tableau avec l’opérateur de propagation et l’a affecté comme valeur de arr3.

Cela équivaut à :

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3);

qui a également renvoyé la version fusionnée de arr1 et arr2 avec arr1.concat.

Pour utiliser l’opérateur de propagation avec des objets, nous écrivons :

const obj1 = {
  a: 1,
  b: 2,
  c: 3,
};
const obj2 = {
  b: 4,
  c: 5,
  d: 6,
};
const obj3 = {
  ...obj1,
  ...obj2,
};
console.log(obj3);

fusionner les propriétés de obj1 et obj2 dans le même objet et affectez l’objet fusionné à obj3.

Par conséquent, obj3 est:

{
  a: 1,
  b: 4,
  c: 5,
  d: 6
}

puisque les propriétés b et c depuis obj2 remplacer les valeurs des mêmes propriétés dans obj1 dans l’objet fusionné car ils sont fusionnés plus tard.

d n’existe pas dans obj1 il est donc simplement copié.

C’est plus court que :

const obj1 = {
  a: 1,
  b: 2,
  c: 3,
};
const obj2 = {
  b: 4,
  c: 5,
  d: 6,
};
const obj3 = Object.assign({}, obj1, obj2);

qui fait la même chose mais nécessite d’appeler le Object.assign méthode, qui est plus longue que la ... opérateur de propagation.

L’opérateur de propagation fonctionne également avec d’autres objets itérables pour répartir les entrées d’objets itérables dans des tableaux.

On peut l’utiliser en écrivant :

const arr = [...new Set([1, 2, 3])];

qui copie les entrées de l’objet set iterable dans un tableau et l’affecte à arr.

L’opérateur de propagation pour les objets itérables est disponible depuis ES2015 et l’opérateur de propagation d’objet depuis ES2018.

Conclusion

JavaScript est un langage de programmation populaire pour le développement d’applications Web et plus encore.

De nombreuses nouvelles fonctionnalités JavaScript depuis 2015 qui nous aident à écrire des programmes JavaScript de manière plus courte et lisible. L’opérateur ternaire était même disponible avant 2015.

Ces raccourcis pratiques rendent notre code plus propre et plus facile à lire.