ES6+ : les nouveautes modernes

Pourquoi ES6+ : les nouveautes modernes ?

Dans un monde où JavaScript est omniprésent, avoir une connaissance approfondie des dernières versions de l'ECMAScript (ES6+) peut grandement améliorer votre productivité et la qualité de vos applications. Ces nouvelles fonctionnalités offrent des moyens plus efficaces et plus lisibles de manipuler les données, d'écrire du code asynchrone et de gérer les états.

Un cas concret est le développement moderne d'applications web qui nécessitent souvent une gestion complexe des états et un traitement asynchrone en temps réel. ES6+ offre des solutions telles que les Promises, les async/await, et les objets immuables, qui facilitent la gestion de ces scénarios.

Prerequis

• Connaissances de base de JavaScript
• Un environnement de développement (IDE) comme Visual Studio Code
• Node.js installé (pour exécuter des exemples côté serveur)
• npm installé (pour gérer les dépendances)

Concepts fondamentaux

1. Les variables let et const

Les mots-clés let et const permettent de déclarer des variables avec une portée limitée à leur bloc, fonction ou expression.

// Utilisation de let
let x = 10;
if (true) {
    let x = 20; // x est maintenant 20 dans ce bloc
}
console.log(x); // Affiche 10

// Utilisation de const
const y = 30;
y = 40; // Erreur: Assignment to constant variable.

2. Les fonctions fléchées

Les fonctions fléchées offrent une syntaxe plus concise et facilitent l'implémentation d'une interface fonctionnelle.

// Fonction traditionnelle
function multiply(a, b) {
    return a * b;
}

// Fonction fléchée équivalente
const multiply = (a, b) => a * b;

3. Les modèles littéraux

Les modèles littéraux permettent de créer des chaînes de caractères plus facilement et plus lisible.

const name = "Alice";
const age = 25;
const message = `Bonjour, mon nom est ${name} et j'ai ${age} ans.`;
console.log(message); // Affiche: Bonjour, mon nom est Alice et j'ai 25 ans.

4. Les tableaux

ES6+ offre de nouvelles méthodes pour manipuler les tableaux.

const numbers = [1, 2, 3, 4];

// Filtrer les nombres pairs
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Affiche: [2, 4]

// Ajouter un élément au début du tableau
numbers.unshift(0);
console.log(numbers); // Affiche: [0, 1, 2, 3, 4]

5. Les objets

ES6+ permet de créer des objets plus simplement et d'utiliser les syntaxes plus modernes.

const name = "Alice";
const age = 25;

// Objet littéral
const person = { name, age };
console.log(person); // Affiche: { name: 'Alice', age: 25 }

// Méthodes de l'objet
const math = {
    add(a, b) {
        return a + b;
    }
};
console.log(math.add(3, 4)); // Affiche: 7

6. Les Promises

Les Promises facilitent la gestion des opérations asynchrones.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Données récupérées");
        }, 1000);
    });
}

fetchData().then(data => console.log(data)); // Affiche: Données récupérées après 1 seconde

7. Les async/await

async/await simplifie la gestion des Promises.

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

getData().then(data => console.log(data));

8. Les modules ES6+

Les modules ES6+ permettent de structurer le code en fichiers réutilisables.

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';

console.log(add(2, 3)); // Affiche: 5

Mise en pratique : projet fil rouge

Pour illustrer les concepts vus, nous allons créer un simple gestionnaire de tâches.

Étape 1 : Initialiser le projet

mkdir todo-app
cd todo-app
npm init -y

Étape 2 : Créer la structure du projet

Créez les fichiers suivants :

• index.html
• src/main.js
• src/todoManager.js

Étape 3 : Configurer le script dans package.json

"scripts": {
    "start": "node src/main.js"
}

Étape 4 : Implémenter la gestion des tâches

src/todoManager.js

class TodoManager {
    constructor() {
        this.todos = [];
    }

    addTodo(task) {
        this.todos.push({ task, completed: false });
    }

    removeTodo(index) {
        this.todos.splice(index, 1);
    }

    toggleTodo(index) {
        this.todos[index].completed = !this.todos[index].completed;
    }
}

export default TodoManager;

src/main.js

import TodoManager from './todoManager.js';

const todoManager = new TodoManager();
todoManager.addTodo('Faire les courses');
todoManager.addTodo('Nettoyer la maison');

console.log(todoManager.todos);
// Affiche: [{ task: 'Faire les courses', completed: false }, { task: 'Nettoyer la maison', completed: false }]

Étape 5 : Créer l'interface utilisateur

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestionnaire de tâches</title>
</head>
<body>
    <h1>Gestionnaire de tâches</h1>
    <input type="text" id="taskInput" placeholder="Ajouter une tâche">
    <button onclick="addTask()">Ajouter</button>
    

    <script src="../src/main.js"></script>
    <script>
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const todoList = document.getElementById('todoList');

            if (taskInput.value.trim()) {
                todoManager.addTodo(taskInput.value);
                renderTodos();
                taskInput.value = '';
            }
        }

        function renderTodos() {
            const todoList = document.getElementById('todoList');
            todoList.innerHTML = '';

            todoManager.todos.forEach((todo, index) => {
                const li = document.createElement('li');
                li.textContent = todo.task;

                if (todo.completed) {
                    li.classList.add('completed');
                }

                li.addEventListener('click', () => {
                    todoManager.toggleTodo(index);
                    renderTodos();
                });

                todoList.appendChild(li);
            });
        }
    </script>
</body>
</html>

Étape 6 : Exécuter le projet

npm start

Erreurs frequentes et debugging

Erreur 1: Assignation à une variable constante

Code incorrect

const x = 10;
x = 20; // Erreur

Code correct

let y = 10;
y = 20; // Correct

Erreur 2: Mauvaise utilisation des Promises

Code incorrect

fetchData()
    .then(data => console.log(data))
    .catch(error => error); // Ne gère pas l'erreur correctement

Code correct

fetchData()
    .then(data => console.log(data))
    .catch(error => {
        console.error('Erreur:', error);
    });

Erreur 3: Mauvaise utilisation de async/await

Code incorrect

async function getData() {
    const response = await fetch('https://api.example.com/data');
    return response.json(); // Ne traite pas les erreurs correctement
}

getData().then(data => console.log(data));

Code correct

async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        return await response.json();
    } catch (error) {
        console.error('Erreur:', error);
    }
}

getData().then(data => console.log(data));

Pour aller plus loin

1. Destructuring assignments : Permet de déstructurer des objets et des tableaux directement dans la déclaration de variables.

   • MDN Web Docs

2. Classes ES6+ : Facilite la création et l'héritage de classes en JavaScript.

   • MDN Web Docs

3. Modules ES6+ : Permet une meilleure organisation du code avec des fichiers importants et exportables.

   • MDN Web Docs

Défi pratique

Créez un mini-projet de gestionnaire de notes. Utilisez les nouvelles fonctionnalités ES6+ pour gérer les notes (ajouter, supprimer, modifier) et affichez-les dans une interface utilisateur simple.