Introduction
JavaScript a considérablement évolué depuis ES6. Les nouvelles fonctionnalités rendent le code plus lisible, maintenable et performant. En tant que développeur freelance Lyon, j'utilise quotidiennement ces features modernes dans mes projets.
Pourquoi utiliser ES6+ ?
JavaScript moderne offre une syntaxe plus claire, moins de bugs potentiels, et de meilleures performances. C'est devenu le standard de l'industrie.
1. Arrow Functions
Les arrow functions offrent une syntaxe plus concise et gèrent automatiquement le contexte this.
Syntaxe classique vs Arrow
// Fonction classique
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
// Arrow avec bloc
const multiply = (a, b) => {
const result = a * b;
return result;
};
// Un seul paramètre
const square = x => x * x;
Gestion du contexte
// Problème avec function classique
const obj = {
count: 0,
increment: function() {
setTimeout(function() {
this.count++; // this = undefined
}, 1000);
}
};
// Solution avec arrow function
const obj = {
count: 0,
increment: function() {
setTimeout(() => {
this.count++; // this = obj
}, 1000);
}
};
2. Destructuring
Le destructuring permet d'extraire facilement des valeurs d'objets et tableaux.
Destructuring d'objets
// Sans destructuring
const user = { name: 'Tiago', age: 25, city: 'Lyon' };
const name = user.name;
const age = user.age;
// Avec destructuring
const { name, age, city } = user;
// Renommer les variables
const { name: userName, age: userAge } = user;
// Valeurs par défaut
const { country = 'France' } = user;
Destructuring de tableaux
const colors = ['red', 'green', 'blue'];
// Extraction
const [first, second] = colors;
// Skip des éléments
const [, , third] = colors;
// Rest operator
const [primary, ...others] = colors;
3. Async/Await
Async/await rend le code asynchrone beaucoup plus lisible et maintenable.
"Async/await transforme le code asynchrone pour qu'il ressemble à du code synchrone"
Promises vs Async/Await
// Avec Promises (callback hell)
fetch('/api/user')
.then(response => response.json())
.then(user => fetch(`/api/posts/${user.id}`))
.then(response => response.json())
.then(posts => console.log(posts))
.catch(error => console.error(error));
// Avec Async/Await (plus lisible)
async function getUserPosts() {
try {
const response = await fetch('/api/user');
const user = await response.json();
const postsResponse = await fetch(`/api/posts/${user.id}`);
const posts = await postsResponse.json();
console.log(posts);
} catch (error) {
console.error(error);
}
}
Async en parallèle
// Exécuter plusieurs requêtes en parallèle
async function fetchMultiple() {
const [users, posts, comments] = await Promise.all([
fetch('/api/users').then(r => r.json()),
fetch('/api/posts').then(r => r.json()),
fetch('/api/comments').then(r => r.json())
]);
return { users, posts, comments };
}
4. Spread et Rest
Les opérateurs spread et rest facilitent la manipulation d'arrays et objets.
Spread Operator
// Copier un array
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]
// Fusionner des arrays
const combined = [...arr1, 4, 5, ...arr2];
// Copier un objet
const user = { name: 'Tiago', age: 25 };
const updatedUser = { ...user, city: 'Lyon' };
// Fusionner des objets
const defaults = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, theme: 'light' };
Rest Parameters
// Fonction avec nombre variable d'arguments
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4, 5); // 15
// Extraire le reste
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [3, 4, 5]
5. Modules ES6
Les modules permettent d'organiser et réutiliser le code efficacement.
Avantages des modules
- Code organisé et maintenable
- Réutilisation facilitée
- Évite la pollution du scope global
- Chargement optimisé
Export et Import
// utils.js - Export nommé
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
// utils.js - Export par défaut
export default function calculate(x) {
return x * 2;
}
// app.js - Import
import calculate, { add, multiply } from './utils.js';
// Import tout
import * as utils from './utils.js';
utils.add(2, 3);
Conclusion
JavaScript ES6+ offre des outils puissants pour écrire du code moderne et efficace. Ces fonctionnalités sont essentielles pour tout développeur en 2025.
En tant que développeur freelance Lyon SUPINFO, j'utilise ces techniques dans tous mes projets. Contactez-moi pour vos développements JavaScript.
À retenir
- Arrow functions pour une syntaxe concise
- Destructuring pour extraire les données
- Async/await pour l'asynchrone
- Spread/rest pour manipuler collections
- Modules pour organiser le code
TP
Tiago Perrin
Développeur freelance Lyon étudiant SUPINFO, spécialisé en développement web et optimisation SEO. Je crée des sites performants et bien référencés pour les entreprises lyonnaises.
