Maîtriser JavaScript 5/5 : Async/Await, fonctions fléchées, exports/imports

Les techniques de raccourci, également appelées « shorthand techniques », sont un moyen puissant d’écrire un code JavaScript concis et expressi. Des fonctions fléchées (arrow functions) à async/await, plongeons dans le monde du codage efficace !

Fonctions fléchées avec retour implicite

Pour les fonctions à une seule expression, exploitez les fonctions fléchées avec un retour implicite pour un code plus concis.

// Syntaxe normale
const multiply = function(x, y) {
  return x * y;
};

// Utilisation d'une fonction fléchée avec retour implicite
const multiply = (x, y) => x * y;

Exportations et importations par défaut

Pour les modules avec une seule exportation, utilisez les exportations et importations par défaut pour une syntaxe plus courte.

// Syntaxe d'exportation normale
export const greet = (name) => {
  return `Bonjour, ${name} !`;
};

// Utilisation de l'exportation par défaut
const greet = (name) => {
  return `Bonjour, ${name} !`;
};

export default greet;

// L'importation normale
import { default as sum } from './module';

// L'importation optimisée
import sum from './module';

Array.find() et Array.findIndex()

Grâce aux méthodes Array.find() et Array.findIndex() , trouvez des éléments dans un tableau en fonction d’une condition.

const numbers = [10, 20, 30, 40, 50];

// Utilisation de Array.find()
const foundNumber = numbers.find(number => number > 25); // Trouver le premier nombre supérieur à 25

// Utilisation de Array.findIndex()
const foundIndex = numbers.findIndex(number => number > 25); // Trouver l'index du premier nombre supérieur à 25

Async/Await

async/await est une approche moderne pour gérer le code asynchrone, le rendant plus proche de l’apparence du code synchrone et plus facile à lire.

// Utilisation de promesses
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

// Utilisation d'async/await
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Maîtriser les techniques de raccourci en JavaScript est une compétence précieuse pour améliorer considérablement l’efficacité et la lisibilité de votre codage. En utilisant les fonctions fléchées avec retour implicite, les exportations et importations par défaut, Array.find(), Array.findIndex() et async/await, réduisez la verbosité inutile et améliorez la qualité globale de vos projets.

Cet article vous a intéressé ? Consultez les premiers articles sur les techniques abrégées, qui renforceront vos compétences et vous aidera à développer un code concis, clair et lisible.