1. L'opérateur ternaire

// Below is the example of ternary operator (?) being used in a conditional 
// expression
condition ? (if condtion is true, run this ):(if condition is false, run this);

Le fonctionnement de cette expression est que la condition est vérifiée en premier, si la condition est vraie, l'instruction après l'opérateur ternaire ( ? ) s'exécutera, et si ce n'est pas le cas, l'instruction après les deux-points ( : ) s'exécutera.

2. Destruction

const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

Un autre exemple :

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Voici un autre exemple :

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Méthode .map() :

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)

function myFunction(num) {
  return num * 10;
} 
//this function is called by the .map() method where the numbers array 
 //each element is taken as parameter

.pop() supprime un élément à la fin d'un tableau et .push() ajoute un élément à la fin d'un tableau :

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon"); // adds Kiwi and Lemon after Mango
fruits.pop(); // removes Lemon at the end of an array

5. Fonctions fléchées

Nous aide à créer des fonctions de manière plus simple :

let hello = () => 'hello' //here we created an arrow function 
                          // assigned it to hello 
                           // this function returns 'hello'

let square = num => num * num // we can ignore bracketts 
                              //if we only have one parameter
                              // num in this case

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

1. Résolu - S'il remplit sa fonction
2. Rejeté - Si la fonction qu'il essaie de faire échoue
3. En attente — Lorsque le résultat de la fonction n'est pas encore déterminé

La fonction .catch() est utilisée pour la gestion des erreurs dans la promesse.

7. L'API de récupération

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

La fetch()méthode renvoie une Promise qui se résout en un objet Response.

8. Asynchrone/Attente

La fonctionnalité Async/Await offre un moyen meilleur et plus propre de gérer les promesses. JavaScript est de nature synchrone et async/wait nous aide à écrire des fonctions basées sur des promesses comme si elles étaient synchrones en arrêtant l'exécution de code supplémentaire jusqu'à ce que la promesse soit résolue ou rejetée.

Pour que cela fonctionne, vous devez d'abord utiliser le mot-clé async avant de déclarer une fonction. Par exemple, async function promise() {}. Mettre async avant une fonction signifie que la fonction renverra toujours une promesse.

Dans une fonction asynchrone, vous pouvez utiliser le mot clé awaitpour suspendre l'exécution du code jusqu'à ce que cette promesse soit résolue ou rejetée. Vous ne pouvez utiliser await qu'à l'intérieur d'une fonction asynchrone .

Maintenant, terminons rapidement cette section avec un exemple :

async function asyncFunction() {
    let promise = new Promise(resolve => {
        resolve();
    });
    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
    return console.log(response);

function Component() {
    return(
        <div>This is a component</div>
    )
}

export default Component

import Component from './Component'

function App() {
    return (
        <Component />
    )
}

Dans l'exemple ci-dessus, nous avons créé un composant appelé Component et l'avons exporté avec notre code export default Component. Ensuite, nous allons dans App.js et importons le Component avec le code suivant : import Component from './Component'.

A pris de l'aide d' ici. sur freecodecamp.