Le jargon technique complet en JavaScript
Concepts fondamentaux étendus
Opérateurs et expressions
Opérateurs d'égalité
== : égalité avec conversion de type
=== : égalité stricte (valeur et type)
!= : inégalité avec conversion
!== : inégalité stricte
javascript
// Toujours préférer === pour éviter les erreurs de conversion
5 === "5" // false
5 == "5" // true (conversion implicite)
Opérateurs logiques
&& : ET logique (court-circuit)
|| : OU logique (court-circuit)
! : NON logique
?? : coalescence des nuls
javascript
// && est souvent utilisé pour l'exécution conditionnelle
isAdmin && executerFonctionAdmin();
// || est utilisé pour les valeurs par défaut (attention aux falsy values)
const nom = inputNom || "Anonyme";
// ?? est préférable quand seuls null/undefined doivent être évités
const quantite = valeurEntrée ?? 0; // 0, "", false sont préservés
Types de données avancés
WeakMap et WeakSet
Collections qui permettent la collecte de garbage
javascript
const weakMap = new WeakMap();
let obj = {data: "valeur"};
[Link](obj, "métadonnées");
// Si obj est supprimé, weakMap libère automatiquement sa référence
TypedArray
Arrays à type fixe pour les performances
javascript
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
Symbols
Identifiants uniques, souvent utilisés comme clés d'objet
javascript
const ID = Symbol("id");
const objet = {
[ID]: "valeur unique"
};
Prototypes et chaîne de prototypes
Prototype
Mécanisme d'héritage en JavaScript
javascript
function Personne(nom) {
[Link] = nom;
}
[Link] = function() {
return `Bonjour, je suis ${[Link]}`;
};
const alice = new Personne("Alice");
[Link]()
Crée un objet avec un prototype spécifié
javascript
const personnePrototype = {
saluer() {
return `Bonjour, je suis ${[Link]}`;
}
};
const alice = [Link](personnePrototype);
[Link] = "Alice";
Manipulation du DOM approfondie
API Modernes du DOM
querySelector et querySelectorAll
Sélection d'éléments avec sélecteurs CSS
javascript
// Un seul élément
const header = [Link]("header");
// Tous les éléments correspondants
const paragraphes = [Link]("[Link]");
Méthodes de traversée
closest() : trouve l'ancêtre correspondant
matches() : vérifie si un élément correspond à un sélecteur
javascript
const enfant = [Link](".enfant");
const parent = [Link](".parent");
if ([Link](".classe")) {
// L'élément a la classe spécifiée
}
Manipulation de classes
classList : interface pour gérer les classes CSS
javascript
[Link]("active");
[Link]("inactive");
[Link]("visible");
[Link]("old", "new");
Web APIs
Intersection Observer
Détecte quand un élément entre dans le viewport
javascript
const observer = new IntersectionObserver(entries => {
[Link](entry => {
if ([Link]) {
[Link]("visible");
}
});
});
[Link]([Link](".element-a-observer"));
MutationObserver
Observe les changements dans le DOM
javascript
const observer = new MutationObserver(mutations => {
[Link](mutation => {
[Link]("DOM modifié:", mutation);
});
});
[Link](element, { childList: true, subtree: true });
ResizeObserver
Détecte les changements de taille d'un élément
javascript
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
[Link]("Élément redimensionné:", [Link]);
}
});
[Link]([Link](".conteneur"));
Programmation asynchrone avancée
Promise API complète
[Link]()
Attend que toutes les promesses soient résolues
javascript
const promesses = [fetch("/api/1"), fetch("/api/2"), fetch("/api/3")];
[Link](promesses)
.then(resultats => {
[Link]("Toutes les requêtes terminées");
})
.catch(erreur => {
[Link]("Au moins une requête a échoué");
});
[Link]()
Retourne la première promesse résolue ou rejetée
javascript
const timeout = new Promise((_, reject) => setTimeout(() => reject("Timeout"), 5000));
const donnees = fetch("/api/donnees");
[Link]([donnees, timeout])
.then(result => [Link]("Données obtenues à temps"))
.catch(err => [Link]("Trop lent ou erreur:", err));
[Link]()
Attend que toutes les promesses soient soit résolues soit rejetées
javascript
[Link]([
fetch("/api/1"),
fetch("/api/2")
])
.then(resultats => {
[Link](resultat => {
if ([Link] === "fulfilled") {
[Link]("Réussi:", [Link]);
} else {
[Link]("Échoué:", [Link]);
}
});
});
[Link]()
Retourne la première promesse résolue avec succès
javascript
[Link]([
fetch("[Link]
fetch("[Link]
fetch("[Link]
])
.then(premiereReponse => [Link]("Première API qui répond:", premiereReponse))
.catch(erreur => [Link]("Toutes les API ont échoué"));
Générateurs et itérateurs
Générateurs
Fonctions qui peuvent être suspendues et reprises
javascript
function* generatrice() {
yield 1;
yield 2;
yield 3;
}
const gen = generatrice();
[Link]([Link]().value); // 1
[Link]([Link]().value); // 2
Itérateurs
Objets implémentant l'interface d'itération
javascript
const iterable = {
[[Link]]() {
let i = 0;
return {
next() {
return i < 5 ? { value: i++, done: false } : { done: true };
}
};
}
};
for (const valeur of iterable) {
[Link](valeur); // 0, 1, 2, 3, 4
}
Générateurs asynchrones
Générateurs qui produisent des promesses
javascript
async function* streamData() {
let i = 0;
while (i < 5) {
const response = await fetch(`/api/data/${i}`);
yield await [Link]();
i++;
}
}
(async () => {
for await (const data of streamData()) {
[Link](data);
}
})();
API du navigateur et Web APIs
Storage API
localStorage et sessionStorage
Stockage de données côté client
javascript
// Persiste après fermeture du navigateur
[Link]("userPrefs", [Link]({ theme: "dark" }));
const prefs = [Link]([Link]("userPrefs"));
// Persiste uniquement pendant la session
[Link]("tempData", "valeur");
Service Workers
Enregistrement et utilisation
Scripts qui s'exécutent en arrière-plan
javascript
// Enregistrement
[Link]('/[Link]')
.then(registration => [Link]('SW enregistré'))
.catch(error => [Link]('Échec:', error));
// Dans [Link]
[Link]('fetch', event => {
[Link](
[Link]([Link])
.then(response => response || fetch([Link]))
);
});
WebSockets
Communication bidirectionnelle
Connexion persistante pour échange en temps réel
javascript
const ws = new WebSocket('[Link]
[Link] = () => {
[Link]('Connexion établie');
[Link]('Hello server');
};
[Link] = event => {
[Link]('Message reçu:', [Link]);
};
Fetch API avancée
Options avancées
Configuration des requêtes HTTP
javascript
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: [Link]({ name: 'Jean' }),
credentials: 'include', // Envoie les cookies
mode: 'cors',
cache: 'no-cache'
})
AbortController
Annulation des requêtes fetch
javascript
const controller = new AbortController();
const signal = [Link];
fetch('/api/data', { signal })
.then(response => [Link]())
.catch(err => {
if ([Link] === 'AbortError') {
[Link]('Requête annulée');
}
});
// Pour annuler
setTimeout(() => [Link](), 5000);
JavaScript moderne (ES6+)
Fonctionnalités ES6+
Template Literals
Chaînes multilignes et interpolation
javascript
const nom = "Alice";
const message = `Bonjour ${nom},
Comment allez-vous aujourd'hui?`;
Paramètres par défaut
Valeurs par défaut pour les paramètres de fonction
javascript
function creerUtilisateur(nom, role = "utilisateur", actif = true) {
return { nom, role, actif };
}
Paramètres rest
Collecte les arguments restants dans un tableau
javascript
function somme(...nombres) {
return [Link]((total, n) => total + n, 0);
}
[Link](somme(1, 2, 3, 4)); // 10
Optional chaining
Accès aux propriétés imbriquées sans erreur
javascript
const valeur = objet?.propriete?.sousPropriete;
Nullish coalescing vs OR
Différence subtile entre ?? et ||
javascript
// || considère 0, "", false comme "falsy"
0 || "défaut" // "défaut"
// ?? ne considère que null et undefined
0 ?? "défaut" // 0
Modules ECMAScript
Exports nommés et par défaut
Organisation du code avec exports multiples
javascript
// [Link]
export function formater(texte) { return [Link](); }
export function capitaliser(texte) { return [Link](); }
export default class Utilitaire { /* ... */ }
// [Link]
import Utilitaire, { formater, capitaliser as majuscules } from './[Link]';
Import dynamique
Chargement à la demande des modules
javascript
async function chargerModule() {
if (condition) {
const module = await import('./[Link]');
[Link]();
}
}
Patrons de conception (Design Patterns)
Patrons créationnels
Factory
Crée des objets sans spécifier leur classe exacte
javascript
function creerUtilisateur(type) {
if (type === "admin") return new Admin();
if (type === "editeur") return new Editeur();
return new Utilisateur();
}
Singleton
Assure qu'une classe n'a qu'une seule instance
javascript
class Database {
static instance;
constructor() {
if ([Link]) {
return [Link];
}
[Link] = "connexion à la DB";
[Link] = this;
}
}
const db1 = new Database();
const db2 = new Database();
[Link](db1 === db2); // true
Patrons structurels
Module
Encapsule des fonctionnalités
javascript
const monModule = (function() {
// Variables privées
let compteur = 0;
// Retourne l'API publique
return {
incrementer() {
compteur++;
return compteur;
},
getCompteur() {
return compteur;
}
};
})();
Observer
Communication par événements
javascript
class Sujet {
constructor() {
[Link] = [];
}
souscrire(observateur) {
[Link](observateur);
}
notifier(data) {
[Link](obs => [Link](data));
}
}
class Observateur {
update(data) {
[Link]("Données mises à jour:", data);
}
}
Techniques d'optimisation
Memoization
Mise en cache des résultats
Optimisation des fonctions coûteuses
javascript
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = [Link](args);
if ([Link](key)) {
return [Link](key);
}
const result = [Link](this, args);
[Link](key, result);
return result;
};
}
const calculCouteux = memoize(function(n) {
[Link]("Calcul...");
return n * n;
});
Debounce et Throttle
Debounce
Limite l'exécution après un délai d'inactivité
javascript
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => [Link](this, args), delay);
};
}
const rechercheDebounced = debounce(function(terme) {
[Link]("Recherche:", terme);
}, 300);
// Usage: l'utilisateur tape rapidement
[Link]("input", e => rechercheDebounced([Link]));
Throttle
Limite la fréquence d'exécution
javascript
function throttle(fn, limit) {
let estEnAttente = false;
return function(...args) {
if (!estEnAttente) {
[Link](this, args);
estEnAttente = true;
setTimeout(() => {
estEnAttente = false;
}, limit);
}
};
}
const scrollThrottled = throttle(() => {
[Link]("Position scroll:", [Link]);
}, 100);
[Link]("scroll", scrollThrottled);
Testing
Types de tests
Tests unitaires
Test de fonctions/composants isolés
javascript
// Avec Jest
test('additionne deux nombres', () => {
expect(additionner(1, 2)).toBe(3);
});
Tests d'intégration
Vérifie l'interaction entre composants
javascript
test('formulaire soumet les données correctement', async () => {
render(<Formulaire />);
[Link]([Link]('Nom'), { target: { value: 'Alice' } });
[Link]([Link]('Soumettre'));
await waitFor(() => {
expect([Link]).toHaveBeenCalledWith({ nom: 'Alice' });
});
});
Tests E2E
Tests d'interface utilisateur complets
javascript
// Avec Cypress
describe('Authentification', () => {
it('permet à l\'utilisateur de se connecter', () => {
[Link]('/login');
[Link]('input[name=email]').type('test@[Link]');
[Link]('input[name=password]').type('password123');
[Link]('button[type=submit]').click();
[Link]().should('include', '/dashboard');
});
});
État et gestion de données
State Management
Context API
Partage d'état global dans React
javascript
// Création du contexte
const ThemeContext = [Link]('light');
// Provider
function App() {
const [theme, setTheme] = useState('light');
return (
<[Link] value={{ theme, setTheme }}>
<Main />
</[Link]>
);
}
// Utilisation
function Bouton() {
const { theme } = useContext(ThemeContext);
return <button className={theme}>Cliquez-moi</button>;
}
Redux
Gestion d'état prédictible
javascript
// Action
const INCREMENT = 'INCREMENT';
const incrementer = () => ({ type: INCREMENT });
// Reducer
function compteurReducer(state = 0, action) {
switch ([Link]) {
case INCREMENT:
return state + 1;
default:
return state;
}
}
// Store
const store = [Link](compteurReducer);
[Link](() => [Link]([Link]()));
[Link](incrementer());
Débogage et Performance
Console API avancée
Méthodes avancées
Outils de débogage avancés
javascript
// Grouper les logs
[Link]("Données utilisateur");
[Link]("Nom:", [Link]);
[Link]("Email:", [Link]);
[Link]();
// Tableau formaté
[Link]([
{ nom: "Alice", age: 25 },
{ nom: "Bob", age: 30 }
]);
// Chronométrage
[Link]("opération");
// opération longue...
[Link]("opération");
// Comptage
function processItem(item) {
[Link]("Items traités");
// traitement...
}
Performance
Performance API
Mesure précise des performances
javascript
[Link]("debut-calcul");
// Code à mesurer
[Link]("fin-calcul");
[Link]("Durée calcul", "debut-calcul", "fin-calcul");
const mesures = [Link]("measure");
[Link](mesures[0].duration + " ms");
requestAnimationFrame
Animations fluides
javascript
function animer() {
// Mise à jour des éléments visibles
[Link] = `${position++}px`;
// Planifie la prochaine mise à jour
if (position < 500) {
requestAnimationFrame(animer);
}
}
requestAnimationFrame(animer);
Tooling moderne
Build tools
Bundlers
Webpack, Rollup, Parcel, Vite
javascript
// [Link] exemple simplifié
[Link] = {
entry: './src/[Link]',
output: {
filename: '[Link]',
path: [Link](__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
Package managers
npm, yarn, pnpm
bash
# npm
npm install react --save
npm run build
# yarn
yarn add react
yarn build
# pnpm (plus rapide et efficient en espace)
pnpm add react
pnpm build
ESLint et Prettier
Linting
Analyse statique du code
javascript
// .[Link]
[Link] = {
extends: ['eslint:recommended', 'plugin:react/recommended'],
rules: {
'no-unused-vars': 'error',
'react/prop-types': 'warn'
}
};
Formatting
Formatage automatique du code
javascript
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
Frameworks et bibliothèques modernes
React
Hooks
Gestion d'état et cycle de vie dans les composants fonctionnels
javascript
function CompteurAvecEffets() {
const [compteur, setCompteur] = useState(0);
// Similaire à componentDidMount + componentDidUpdate
useEffect(() => {
[Link] = `Vous avez cliqué ${compteur} fois`;
// Similaire à componentWillUnmount
return () => {
[Link] = 'React App';
};
}, [compteur]); // Uniquement réexécuté si compteur change
return (
<div>
<p>Vous avez cliqué {compteur} fois</p>
<button => setCompteur(compteur + 1)}>
Cliquez-moi
</button>
</div>
);
}
Custom Hooks
Extraction de logique réutilisable
javascript
function useLocalStorage(key, valeurInitiale) {
const [valeur, setValeur] = useState(() => {
try {
const item = [Link](key);
return item ? [Link](item) : valeurInitiale;
} catch (error) {
return valeurInitiale;
}
});
const setValue = value => {
try {
setValeur(value);
[Link](key, [Link](value));
} catch (error) {
[Link](error);
}
};
return [valeur, setValue];
}
// Utilisation
function MonComposant() {
const [nom, setNom] = useLocalStorage('nom', '');
// ...
}
[Link]
Composition API
Alternative à l'API Options
javascript
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
const compteur = ref(0);
const double = computed(() => [Link] * 2);
function incrementer() {
[Link]++;
}
onMounted(() => {
[Link]('Composant monté');
});
return {
compteur,
double,
incrementer
};
}
};
Angular
Decorators
Annotations pour définir les composants
typescript
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-salutation',
template: '<h1>Bonjour {{nom}}!</h1>'
})
export class SalutationComponent {
@Input() nom: string;
}
Tendances émergentes
WebAssembly (WASM)
Intégration avec JS
Exécution de code compilé dans le navigateur
javascript
// Chargement d'un module WebAssembly
[Link](fetch('[Link]'))
.then(obj => {
// Appel d'une fonction exportée depuis WASM
const resultat = [Link](10, 20);
[Link](resultat);
});
Web Components
Custom Elements
Composants réutilisables natifs
javascript
class MonComposant extends HTMLElement {
constructor() {
super();
[Link]({ mode: 'open' });
[Link] = `
<style>
:host { display: block; border: 1px solid black; }
</style>
<div>
<h2>Mon composant custom</h2>
<slot></slot>
</div>
`;
}
connectedCallback() {
[Link]('Composant ajouté au DOM');
}
}
[Link]('mon-composant', MonComposant);
CSS-in-JS
Styled Components
Styles encapsulés dans les composants
javascript
import styled from 'styled-components';
const Button = [Link]`
background: ${props => [Link] ? 'blue' : 'white'};
color: ${props => [Link] ? 'white' : 'blue'};
font-size: 1em;
padding: 0.25em 1em;
border: 2px solid blue;
border-radius: 3px;
`;
function App() {
return (
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
}
Sécurité en JavaScript
Attaques courantes
Cross-Site Scripting (XSS)
Injection de code malveillant
javascript
// Dangereux
[Link] = userInput; // Potentiel XSS
// Sécurisé
[Link] = userInput;
// ou
function escapeHTML(str) {
return [Link](/[&<>"']/g, m => ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
})[m]);
}
[Link] = escapeHTML(userInput);
CSRF (Cross-Site Request Forgery)
Protection avec des tokens
javascript
// Ajout d'un token CSRF dans chaque requête
const csrfToken = [Link]('meta[name="csrf-token"]').content;
fetch('/api/action', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
body: [Link](data)
});
Validation des données
Schémas de validation
Vérification des données entrantes
javascript
// Avec une bibliothèque comme Joi ou Yup
const schema = [Link]({
nom: [Link]().required("Le nom est requis"),
email: [Link]().email("Email invalide").required("L'email est requis"),
age: [Link]().positive().integer().min(18).required()
});
try {
const donnees = await [Link](formData);
// Données valides
} catch (error) {
[Link]("Erreur de validation:", [Link]);
}
Architecture de code
Conception modulaire
Component-Based Architecture
Organisation par composants réutilisables
javascript
// Structure typique d'une application React
/src
/components
/Button
[Link]
[Link]
[Link]
/Card
[Link]
[Link]
[Link]
/pages
[Link]
[Link]
/services
[Link]
[Link]
/utils
[Link]
[Link]
[Link]
Feature-First Architecture
Organisation par fonctionnalités
javascript
/src
/features
/auth
/components
[Link]
[Link]
/services
[Link]
[Link]
/products
/components
[Link]
[Link]
/services
[Link]
[Link]
/shared
/components
[Link]
[Link]
/utils
[Link]
[Link]
[Link]
Patrons architecturaux
Flux unidirectionnel
Flux de données à sens unique (React, Redux)
Action → Dispatcher → Store → View → Action → ...
MVC (Model-View-Controller)
Séparation des responsabilités
javascript
// Model: gestion des données
class UserModel {
constructor() {
[Link] = [];
}
async fetchUsers() {
const response = await fetch('/api/users');
[Link] = await [Link]();
return [Link];
}
}
// View: affichage
class UserView {
render(users) {
const html = [Link](user => `<li>${[Link]}</li>`).join('');
[Link]('.users-list').innerHTML = html;
}
}
// Controller: coordination
class UserController {
constructor(model, view) {
[Link] = model;
[Link] = view;
}
async init() {
const users = await [Link]();
[Link](users);
}
}
Accessibilité (a11y)
ARIA (Accessible Rich Internet Applications)
Attributs pour améliorer l'accessibilité
javascript
// Attributs ARIA
<button
aria-label="Fermer la boîte de dialogue"
aria-pressed="false"
> >
<span aria-hidden="true">×</span>
</button>
// Navigation au clavier
<div
role="tablist"
> >
<button
role="tab"
tabIndex="0"
aria-selected="true"
>
Premier onglet
</button>
<button
role="tab"
tabIndex="-1"
aria-selected="false"
>
Second onglet
</button>
</div>
Focus management
Gestion du focus pour la navigation
