JavaScript, créé par Brendan Eich en 1995, a été initialement développé en seulement dix jours. Conçu pour rendre les
pages web interactives, son nom original était Mocha, puis LiveScript avant d'être renommé en JavaScript. Au fil des
ans, JavaScript a évolué considérablement, passant d'un simple script côté client à un langage de programmation complet,
utilisé aussi bien sur le client que sur le serveur avec Node.js. La standardisation de JavaScript sous le nom
d'ECMAScript a permis une uniformité et une amélioration constante, avec des versions majeures comme ES5 (2009) et ES6
(2015), ajoutant de nombreuses fonctionnalités. ES6 a introduit des fonctionnalités telles que les classes, les modules,
les fonctions fléchées, et les déclarations de variables let et const. ES6 a également introduit des améliorations
de la syntaxe, comme l'interpolation de chaînes de caractères et les littéraux d'objet et de tableau. ES6 a été suivi
par des versions annuelles, avec ES2020 comme dernière version majeure. ES2020 a introduit des fonctionnalités telles
que les opérateurs de chaînes de caractères, les méthodes de tableau, et les fonctions de rappel pour les promesses.
L'introduction de frameworks et bibliothèques comme React, Angular, et Vue.js a renforcé la position de JavaScript dans le développement web moderne. En parallèle, l'écosystème Node.js a transformé JavaScript en un outil polyvalent pour le développement back-end, les scripts serveur, et même le développement d'applications mobiles et de bureau. Cette évolution continue fait de JavaScript l'un des langages de programmation les plus populaires et influents au monde. Il est utilisé par des millions de développeurs pour créer des applications web, des applications mobiles, des applications de bureau, des jeux, et bien plus encore. JavaScript est également utilisé dans des domaines comme l'intelligence artificielle, l'apprentissage automatique, et l'Internet des objets. JavaScript est un langage de programmation incontournable pour tout développeur web moderne.
// Affichage simple en JavaScript
console.log("Hello, World!");
/*
Ce code affiche la chaîne de caractères "Hello, World!" dans la console.
C'est souvent le premier programme écrit par ceux qui apprennent un nouveau langage.
*/JavaScript est un langage à typage dynamique, ce qui signifie que le type d'une variable est déterminé lors de
l'exécution et non à la compilation. Les types de données en JavaScript se divisent en deux catégories principales :
les types primitifs et les types objets.
Les types primitifs incluent String, Number, Boolean, Null, Undefined, etSymbol. Chaque type primitif
représente une valeur unique et immuable. Par exemple, une valeur de type String représente une séquence de
caractères, tandis qu'un Number peut représenter à la fois des entiers et des nombres à virgule flottante.
// Déclaration de différents types de variables en JavaScript
let name = "John Doe"; // String
let age = 30; // Number
let isActive = true; // Boolean
let address = null; // Null
let job; // Undefined
let symbol = Symbol('id'); // Symbol
console.log(typeof name); // Affiche "string"
console.log(typeof age); // Affiche "number"
/*
Ce code illustre la déclaration de variables de différents types primitifs en JavaScript.
L'utilisation de 'typeof' permet de vérifier le type de la variable.
*/Les objets, en revanche, sont des collections de propriétés, et chaque propriété est une association entre une clé ( généralement une chaîne de caractères) et une valeur, qui peut être de n'importe quel type de données, y compris un autre objet. Les fonctions en JavaScript sont également des objets, ce qui leur confère une grande flexibilité. Les tableaux, par exemple, sont des objets spéciaux qui représentent des collections ordonnées de valeurs. Cette distinction entre types primitifs et objets est cruciale pour comprendre comment manipuler les données en JavaScript.
let number = 42; // Type primitif
let user = {name: "Alice", age: 30}; // Type objet
/* Ce code illustre la différence entre les types primitifs et les objets en JavaScript. */En JavaScript, chaque valeur a une nature "truthy" ou "falsy", déterminant son comportement dans les contextes booléens,
comme les conditions if. Les valeurs "falsy" incluent false, 0, -0, 0n (BigInt), "" (chaîne
vide), null, undefined, et NaN. Toutes les autres valeurs sont considérées comme "truthy", y compris les objets
vides {} et les tableaux vides []. Cette distinction est essentielle pour comprendre le comportement des structures
conditionnelles en JavaScript.
Les opérateurs de comparaison en JavaScript peuvent être source de confusion, surtout pour les débutants. L'opérateur
d'égalité double == effectue une conversion de type avant de comparer, ce qui peut mener à des résultats non
intuitifs. Par exemple, "0" == 0 est vrai en JavaScript.
Pour une comparaison plus stricte et prévisible, il est recommandé d'utiliser l'opérateur d'égalité triple ===, qui ne
convertit pas les types. Par exemple, "0" === 0 est faux, car bien que les valeurs semblent similaires, leurs types
sont différents.
// Exemple de valeurs truthy et falsy
let emptyString = ""; // Falsy
if (emptyString) {
console.log("Ce code ne s'exécutera pas car emptyString est falsy");
}
let nonEmptyString = "Hello"; // Truthy
if (nonEmptyString) {
console.log("Ce code s'exécutera car nonEmptyString est truthy");
}
/*
Ce code démontre le comportement des valeurs truthy et falsy dans des structures conditionnelles.
*/let value = "";
if (value) {
console.log("La valeur est considérée comme vraie.");
} else {
console.log("La valeur est considérée comme fausse.");
}Les évaluations à court-circuit utilisent les opérateurs logiques && et || pour retourner une valeur sans évaluer
toute l'expression. Avec &&, si le premier opérande est falsy, il est retourné immédiatement ; avec ||, si le
premier opérande est truthy, il est retourné.
let result = false && doSomething(); // 'doSomething' n'est pas exécuté
let user = currentUser || "guest"; // 'user' vaut 'currentUser' s'il est truthy, sinon 'guest'
/* Ce code illustre l'utilisation des évaluations à court-circuit en JavaScript. */let a = false;
let result = a || "Valeur par défaut";
console.log(result);L'interpolation de chaînes, introduite avec ES6, permet d'insérer facilement des variables et des expressions dans des
chaînes de caractères à l'aide des backticks ` et de la syntaxe ${expression}.
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"
/* Ce code illustre l'interpolation de chaînes de caractères en JavaScript. */La portée des variables en JavaScript est déterminée par leur contexte d'utilisation. Avec let et const, la portée
est limitée au bloc de code dans lequel elles sont déclarées. La portée détermine la visibilité et la durée de vie des
variables.
if (true) {
let scopedVar = "I exist only here";
}
console.log(scopedVar); // ReferenceError
/* Ce code illustre la portée des variables en JavaScript. */function testScope() {
if (true) {
var x = "Je suis visible";
}
console.log(x);
}
testScope();La "Temporal Dead Zone" (TDZ) est un concept important en JavaScript, particulièrement en relation avec les variables
déclarées avec let et const. La TDZ débute au point où la variable est déclarée et se termine lorsque la variable
est
initialisée. Pendant la TDZ, toute référence à la variable entraînera une erreur ReferenceError. Ceci est différent du
comportement de var, où les variables sont
hissées (hoisted) et initialisées à undefined.
Cela signifie que les variables let et const ne peuvent pas être utilisées avant leur déclaration effective, même si
elles sont dans le même scope. Cela aide à prévenir des erreurs courantes telles que l'utilisation de variables avant
leur initialisation et contribue à rendre le code plus prévisible et plus facile à déboguer.
console.log(myVar); // undefined (car 'var' est hissée)
var myVar = 5;
console.log(myLet); // ReferenceError: myLet is not defined (TDZ)
let myLet = 10;
/*
Ce code illustre la TDZ en JavaScript.
Dans cet exemple, l'accès à myVar avant sa déclaration renvoie undefined en raison du hoisting, tandis que l'accès à myLet provoque une ReferenceError en raison de la TDZ.
*/function checkTDZ() {
console.log(myVar); // Ligne A
console.log(myLet); // Ligne B
var myVar = 3;
let myLet = 5;
}
checkTDZ();const permet de déclarer des constantes en JavaScript. Une fois une valeur assignée à une constante, elle ne peut être
réassignée. Cela est utile pour maintenir l'intégrité des données, en particulier pour les configurations et les valeurs
qui ne doivent pas changer.
const PI = 3.14;
PI = 3.15; // TypeError
/* Ce code illustre la déclaration d'une constante en JavaScript. */var est un moyen plus ancien de déclarer des variables en JavaScript. Contrairement à let et const, var a une
portée fonctionnelle et est sujet au hoisting (remontée). Son
utilisation est désormais déconseillée au profit de let et const.
function test() {
var oldVar = "ancienne variable";
}
console.log(oldVar); // ReferenceError avec `let` ou `const`, pas avec `var`function foo() {
var x = 10; // portée fonction pas bloc comme let
if (true) {
var x = 2; // c'est la même variable !
console.log(x); // 2
}
console.log(x); // 2
}
foo(); // 2 2function bar() {
let x = 10; // portée bloc
if (true) {
let x = 2; // c'est une variable différente
console.log(x); // 2
}
console.log(x); // 10
}
bar(); // 2 10Les fonctions sont des blocs de code réutilisables qui peuvent être appelés à partir d'autres parties du code. Les
fonctions peuvent prendre des paramètres et renvoyer des valeurs. Les fonctions sont un concept fondamental en
programmation, et sont utilisées pour organiser et réutiliser le code. Les fonctions sont également utiles pour créer
des objets avec des méthodes qui utilisent this. Les fonctions sont souvent utilisées dans des patterns de conception
comme les modules et les fonctions usine.
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
sayHello("Alice"); // "Hello, Alice!"
/* Ce code illustre la déclaration et l'appel d'une fonction en JavaScript. */const myFunction = function (num1, num2) {
return num1 + num2;
};
console.log(myFunction(3));JavaScript permet de définir des paramètres facultatifs dans les fonctions, avec des valeurs par défaut si le paramètre n'est pas fourni. Cela permet de rendre les fonctions plus flexibles et plus faciles à utiliser.
function sayHello(name = "World") {
console.log(`Hello, ${name}!`);
}
sayHello(); // "Hello, World!"
sayHello("Alice"); // "Hello, Alice!"
/* Ce code illustre l'utilisation de paramètres facultatifs en JavaScript. */La décomposition permet d'extraire des données d'objets ou de tableaux dans des variables distinctes, facilitant la manipulation de ces structures complexes. La décomposition est utile pour les fonctions qui prennent un nombre variable de paramètres.
function getAddress({street, city}) {
console.log(`Street: ${street}, City: ${city}`);
}
getAddress({street: "123 Main St", city: "Anytown"});
// "Street: 123 Main St, City: Anytown"
/* Ce code illustre la décomposition d'un objet en JavaScript. */function userInfo({name, age}) {
console.log(`Nom: ${name}, Age: ${age}`);
}
const user = {name: "Alice", age: 30, job: "Developer"};
userInfo(user);Les littéraux d'objet peuvent être utilisés pour passer des arguments à une fonction de manière plus flexible et lisible. Cela permet de passer des arguments dans n'importe quel ordre, et de définir des valeurs par défaut pour les paramètres.
function getAddress({street, city}) {
console.log(`Street: ${street}, City: ${city}`);
}
let address = {
street: "123 Main St",
city: "Anytown"
};
getAddress(address); // "Street: 123 Main St, City: Anytown"
/* Ce code illustre l'utilisation de littéraux d'objet pour passer des arguments à une fonction en JavaScript. */function createPerson({nom, age}) {
return {
nom,
age
};
}
const person = createPerson({age: 25, nom: "Bob"});
console.log(person);Le mot-clé this fait référence au contexte dans lequel une fonction est appelée. Dans les méthodes d'objet, this se
réfère à l'objet lui-même. Dans les fonctions, this se réfère à l'objet global (window dans le navigateur). Dans les
fonctions fléchées, this se réfère à l'objet parent.
const person = {
name: "Alice",
greet() {
console.log(`Hello, I am ${this.name}`);
}
};
person.greet(); // "Hello, I am Alice"
/* Ce code illustre l'utilisation de `this` dans le contexte d'une méthode d'objet en JavaScript. */Les déclarations de fonctions définissent des fonctions nommées, tandis que les expressions de fonction assignent une fonction anonyme à une variable. Les déclarations de fonctions sont hissées (remontées) au sommet de leur portée, tandis que les expressions de fonction ne le sont pas.
function declaredFunction() {
console.log("Declared Function");
}
let expressionFunction = function () {
console.log("Expression Function");
};
declaredFunction(); // "Declared Function"
expressionFunction(); // "Expression Function"
/* Ce code illustre la différence entre une déclaration de fonction et une expression de fonction en JavaScript. */L'objet arguments est une variable locale disponible dans toutes les fonctions. Il contient un tableau des arguments
passés à la fonction. Il est utile pour les fonctions qui prennent un nombre variable d'arguments. Les fonctions
JavaScript peuvent avoir un nombre variable de paramètres, et les paramètres facultatifs peuvent être définis avec des
valeurs par défaut.
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // 15
/* Ce code illustre l'utilisation de l'objet arguments en JavaScript. */Les fonctions anonymes sont des fonctions qui n'ont pas de nom. Elles sont souvent utilisées comme fonctions de rappel
ou comme fonctions auto-exécutées. Les fonctions anonymes sont également utiles pour créer des objets avec des méthodes
qui utilisent this.
let anonymousFunction = function () {
console.log("Anonymous Function");
};
anonymousFunction(); // "Anonymous Function"
/* Ce code illustre l'utilisation de fonctions anonymes en JavaScript. */setTimeout(function () {
console.log("Executed after 1 second");
}, 1000);
/* Ce code illustre l'utilisation de fonctions anonymes comme fonctions de rappel en JavaScript. */Les fonctions auto-exécutées s'exécutent immédiatement lors de leur définition, utiles pour créer des scopes privés. Les
fonctions auto-exécutées sont souvent utilisées dans des patterns de conception comme les modules et les fonctions
usine. Elles sont également utiles pour créer des objets avec des méthodes qui utilisent this.
(function () {
let privateVar = "I am private";
console.log(privateVar);
})(); // "I am private"
/* Ce code illustre l'utilisation de fonctions auto-exécutées en JavaScript. */Les fonctions récursives sont des fonctions qui s'appellent elles-mêmes, utiles pour des opérations comme le parcours d'arbres ou la récursivité mathématique. Les fonctions récursives doivent avoir une condition d'arrêt pour éviter une boucle infinie.
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
/* Ce code illustre l'utilisation de fonctions récursives en JavaScript. */Les fonctions fléchées sont une syntaxe plus concise pour définir des fonctions anonymes. Elles sont utiles pour les
fonctions de rappel et les fonctions auto-exécutées. Les fonctions fléchées offrent une syntaxe plus concise et ne lient
pas leur propre this, rendant leur utilisation dans les callbacks et les fonctions de haut niveau plus intuitive.
let arrowFunction = () => {
console.log("Arrow Function");
};
arrowFunction(); // "Arrow Function"
/* Ce code illustre l'utilisation de fonctions fléchées en JavaScript. */Les fonctions usine sont des fonctions qui retournent des objets. Elles sont utiles pour créer des objets avec des
propriétés et des méthodes privées. Les fonctions usine sont souvent utilisées dans des patterns de conception comme les
modules et les fonctions de rappel. Elles sont également utiles pour créer des objets avec des méthodes qui utilisent
this.
function createPerson(name, age) {
return {
name,
age,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
}
let alice = createPerson("Alice", 30);
alice.greet(); // "Hello, my name is Alice"
/* Ce code illustre l'utilisation de fonctions usine en JavaScript. */Les fonctions de rappel sont des fonctions qui sont passées comme arguments à d'autres fonctions. Elles sont utiles pour
les opérations asynchrones et les fonctions de haut niveau. Les fonctions de rappel sont souvent utilisées dans des
patterns de conception comme les modules et les fonctions usine. Elles sont également utiles pour créer des objets avec
des méthodes qui utilisent this.
function doSomething(callback) {
console.log("Doing something...");
callback();
}
doSomething(function () {
console.log("Done!");
});
/* Ce code illustre l'utilisation de fonctions de rappel en JavaScript. */function processUserInput(callback) {
let name = prompt("Please enter your name.");
callback(name);
}
processUserInput(name => {
console.log(`Hello, ${name}!`);
});
/* Ce code illustre l'utilisation de fonctions de rappel en JavaScript. */Les closures en JavaScript sont une fonctionnalité puissante, permettant à une fonction interne d'accéder au scope d'une fonction externe, même après que cette dernière ait terminé son exécution. Ce concept est étroitement lié à la portée des variables et à la gestion de la mémoire en JavaScript. Une closure se forme lorsque la fonction interne est déclarée. Cette fonction interne peut alors accéder aux variables de la fonction externe, créant ainsi une portée fermée ou "closure".
La capacité d'une closure à retenir et à accéder à l'état et au contexte dans lequel elle a été créée la rend extrêmement utile pour des tâches comme l'encapsulation de données, la création de fonctions usine, et le maintien de l'état à travers des appels de fonction asynchrones. Les closures sont souvent utilisées dans des patterns de conception comme les modules et les fonctions usine, permettant de créer des interfaces publiques et privées pour les modules et les objets.
function createCounter() {
let count = 0;
return function () {
count += 1;
console.log(count);
};
}
let counter = createCounter();
counter(); // 1
counter(); // 2
/* Ce code illustre la création d'une closure en JavaScript. */- Mise en place d'un fichier HTML, CSS et JavaScript.
- Création d'une fonction
ajouterTachequi utilise une closure pour accéder à une liste de tâches stockée dans une variable.
- Utiliser différents types de données pour gérer les tâches (par exemple, un objet pour chaque tâche).
- Appliquer les concepts de
truthyetfalsypour valider les entrées de tâches.
- Créer une page web simple pour afficher des tâches.
- Écrire une fonction
ajouterTachequi ajoute des tâches à un tableau. - Utiliser les closures pour encapsuler la liste des tâches et les opérations associées.
- Utilisez des fonctions usine pour créer des tâches avec des méthodes telles que
completeetdelete. - Utiliser des fonctions de rappel pour mettre à jour l'interface utilisateur en fonction des actions de l'utilisateur.