Let et Const : une nouvelle façon de déclarer des variables
Avant ES6, seul le mot-clé var était utilisé pour déclarer les variables, ce qui posait un certain nombre de problèmes. Le JavaScript moderne propose let et const avec une portée de bloc.
// var - zone de visibilité fonctionnelle
function oldWay() {
if (true) {
var x = 10;
}
console.log(x); // 10 - variable disponible
}
// let - zone de visibilité du bloc
function newWay() {
if (true) {
let y = 10;
}
// console.log(y); // ReferenceError
}
// const - pour les références non modifiables
const API_URL = 'https://api.example.com';
const user = { name: 'Alexey' };
user.name = 'Ivan'; // En fonctionnement - objet modifiable
// user = {}; // TypeError - ne peut pas être réaffectéUtilisez const par défaut pour toutes les variables qui ne nécessitent pas de réaffectation. Cela rend le code plus prévisible et protège contre les changements accidentels.
Fonctions de flèche : brièveté et this
Les fonctions fléchées fournissent une syntaxe plus compacte et résolvent le problème de contexte this.
// Fonction classique
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
return n * 2;
});
// Fonction de commutation
const doubledArrow = numbers.map(n => n * 2);
// Plusieurs paramètres
const sum = (a, b) => a + b;
// Corps de la fonction avec plusieurs expressions
const processUser = user => {
const name = user.name.toUpperCase();
return `Hi ${name}!`;
};Une caractéristique importante des fonctions fléchées : elles ne créent pas leur propre contexte this, mais l'héritent de la zone environnante.
class Timer {
constructor() {
this.seconds = 0;
}
// Avec la fonction habituelle, il faudrait .bind(this)
start() {
setInterval(() => {
this.seconds++; // this indique un exemple de Timer
console.log(this.seconds);
}, 1000);
}
}Déstructuration : extraction de données à partir d'objets et de tableaux
La déstructuration permet d'extraire des valeurs de tableaux et d'objets dans des variables séparées de manière élégante.
// Destruction des objets
const user = {
name: 'Alexey',
age: 30,
email: 'alexey@example.com'
};
const { name, age } = user;
console.log(name); // Alexey
// Renommer les variables
const { name: userName, age: userAge } = user;
// Valeurs par défaut
const { role = 'user' } = user;
// Déstructuration des tableaux
const colors = ['red', 'green', 'blue'];
const [primary, secondary] = colors;
// Éléments manquants
const [first, , third] = colors;
// Opérateur Rest
const [head, ...tail] = colors;
console.log(tail); // ['green', 'blue']La déstructuration est particulièrement pratique dans les paramètres de fonction.
function displayUser({ name, age, email = 'not specified' }) {
console.log(`${name}, ${age} years old, email: ${email}`);
}
displayUser(user);Opérateurs Spread et Rest : travail avec des collections
L'opérateur d'extension (spread) et l'opérateur de reste (rest) utilisent la même syntaxe ..., mais effectuent des opérations opposées.
// Spread - développe un tableau ou un objet
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Copie d'un tableau
const original = [1, 2, 3];
const copy = [...original];
// Spread pour les objets
const defaults = { theme: 'dark', language: 'ru' };
const userSettings = { language: 'en', fontSize: 14 };
const settings = { ...defaults, ...userSettings };
// { theme: 'dark', language: 'en', fontSize: 14 }
// Rest - collecte les éléments restants
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10Lignes de modèle : interpolation pratique
Les chaînes de caractères littéraux (template literals) utilisent des guillemets obliques inversés et permettent d'intégrer des expressions dans une chaîne de caractères.
const name = 'Alexey';
const age = 30;
// Ancienne méthode
const greeting = 'Hi, ' + name + '! To you ' + age + ' years.';
// Lignes de modèle
const modernGreeting = `Hi ${name}! You are ${age} years old.`;
// Lignes multilignes
const html = `
<div class="card">
<h2>${name}</h2>
<p>Age: ${age}</p>
</div>
`;
// Expressions dans les modèles
const price = 100;
const message = `Discounted price: ${price * 0.9} rub.`;Promesses et async/await : asynchronisme sans douleur
Les promesses ont considérablement simplifié le travail avec le code asynchrone, et async/await l'ont rendu similaire au synchrone.
// Promis
function fetchUser(id) {
return fetch(`/api/users/${id}`)
.then(response => response.json())
.then(data => data.user)
.catch(error => console.error('Error:', error));
}
// Async/await - code plus lisible
async function fetchUserAsync(id) {
try {
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
return data.user;
} catch (error) {
console.error('Error:', error);
}
}
// Exécution parallèle
async function fetchMultipleUsers(ids) {
const promises = ids.map(id => fetchUserAsync(id));
const users = await Promise.all(promises);
return users;
}Modules : organisation du code
Les modules ES6 vous permettent de diviser le code en parties logiques et de gérer les dépendances.
// math.js - export
export const PI = 3.14159;
export function sum(a, b) {
return a + b;
}
export class Calculator {
multiply(a, b) {
return a * b;
}
}
// main.js - import
import { PI, sum, Calculator } from './math.js';
// Importer l'ensemble du module
import * as MathUtils from './math.js';
// Exportation par défaut
// user.js
export default class User {
constructor(name) {
this.name = name;
}
}
// Importer l'exportation par défaut
import User from './user.js';
Classes : programmation orientée objet
ES6 a ajouté du sucre syntaxique pour travailler avec des prototypes sous forme de classes.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Appel du constructeur parent
this.breed = breed;
}
speak() {
console.log(`${this.name} is barking`);
}
// Méthode statique
static info() {
return 'Dogs - pets';
}
}
const dog = new Dog('Bobik', 'Labrador');
dog.speak(); // Bobik aboieMéthodes Array : map, filter, reduce et autres
Les méthodes modernes de tableaux rendent le travail avec les données plus déclaratif.
const users = [
{ name: 'Alexey', age: 30, active: true },
{ name: 'Maria', age: 25, active: false },
{ name: 'Ivan', age: 35, active: true }
];
// map - transformation des éléments
const names = users.map(user => user.name);
// filtre - filtration
const activeUsers = users.filter(user => user.active);
// réduire - agrégation
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
// find - recherche du premier élément
const alex = users.find(user => user.name === 'Alexey');
// some - vérification de la condition pour au moins un élément
const hasActive = users.some(user => user.active);
// every - vérification de la condition pour tous les éléments
const allActive = users.every(user => user.active);
// Chaînes de méthodes
const result = users
.filter(user => user.active)
.map(user => user.name)
.sort();Chaînage facultatif et coalescence nullish
Ces opérateurs simplifient le travail avec des valeurs potentiellement incertaines.
const user = {
name: 'Alexey',
address: {
city: 'Moscow'
}
};
// Chaînage facultatif (?.) - accès sécurisé
const street = user.address?.street; // non défini, sans erreur
const zip = user.address?.zip?.code; // undefined
// Avec les méthodes
const result = user.getData?.(); // non défini si la méthode n'est pas
// Nullish coalescing (??) - valeur par défaut
const port = process.env.PORT ?? 3000;
// Différence avec ||
const count = 0;
console.log(count || 10); // 10 (0 est considéré comme faux)
console.log(count ?? 10); // 0 (fonctionne uniquement avec null/undefined)Conclusion
Le JavaScript moderne offre de nombreux outils pour écrire un code propre et efficace. Les fonctionnalités ES6 et les versions ultérieures n'ajoutent pas seulement une nouvelle syntaxe, elles changent l'approche de la programmation JavaScript, la rendant plus expressive et fiable.
Commencez à appliquer progressivement ces fonctionnalités à vos projets. Au fil du temps, beaucoup d'entre elles deviendront une partie naturelle de votre style d'écriture de code. Le JavaScript moderne ouvre de nouveaux horizons pour les développeurs, rendant le processus de création d'applications plus productif et agréable.
Code — une plateforme éducative pour les développeurs débutants. Nous créons des cours et des articles clairs sur Python, JavaScript, HTML, CSS et d'autres technologies modernes.
Rejoignez notre communauté!
Abonnez-vous à notre Chaîne Telegram Kodik, où nous publions :
Nouveaux articles et tutoriels sur la programmation
Conseils utiles pour les développeurs
Analyses de sujets complexes dans un langage simple
Actualités du monde de l'informatique
Développez-vous avec Kodik ! 🚀