Même si JavaScript est l’un des langages les plus populaires au monde, de nombreux développeurs peinent encore à maîtriser certaines de ses commandes fondamentales.
Cet article va vous guider à travers les méandres des commandes JavaScript les plus puissantes et les plus utiles. Nous explorerons en détail leur syntaxe, leur fonctionnement interne et leurs multiples cas d’utilisation, afin que vous puissiez les intégrer de manière optimale dans vos projets.
Préparez-vous à découvrir comment quelques lignes de code bien pensées peuvent transformer radicalement l’expérience utilisateur de vos applications web.
Dans cet article, nous allons explorer les commandes JavaScript les plus essentielles , celles qui feront de vous un développeur web hors pair !
Variables, types de données et opérateurs
Commençons par les briques de base de la programmation en JavaScript : les variables, les types de données et les opérateurs les plus communs. Maîtriser ces concepts est essentiel pour construire des applications web interactives et dynamiques.
Déclaration et affectation de variables
En JavaScript, une variable permet de stocker une valeur qui peut être récupérée, modifiée ou utilisée ultérieurement dans le code. La déclaration de variables se fait avec les mots-clés let ou const (pour les valeurs constantes). Voici un exemple :
let monNom = "Jean"; // Chaîne de caractères
const AGE = 30; // Nombre entier
let estEnLigne = true; // Booléen
console.log(monNom); // Affiche "Jean"Ces variables peuvent ensuite être réaffectées (sauf const) ou utilisées dans des calculs, conditions, boucles, etc. Une convention répandue est d’utiliser la casse cameLCase pour nommer les variables de manière claire et explicite.
Les types de données
JavaScript offre plusieurs types de données pour stocker différentes sortes de valeurs :
- String (chaîne de caractères) : « Bonjour le monde ! »
- Number (nombre) : 42, 3.14159
- Boolean (booléen) : true ou false
- Null (valeur nulle explicite)
- Undefined (valeur non définie)
- Object (objet)
- Array (tableau)
Chaque type dispose de propriétés et de méthodes spécifiques. Par exemple, les chaînes disposent de .length pour obtenir leur longueur, les nombres de .toFixed() pour arrondir, etc.
Comprendre les différents types permet d’écrire un code robuste, en évitant par exemple d’additionner une chaîne à un nombre.
Les opérateurs arithmétiques, d’affectation, de comparaison et logiques
Les opérateurs sont des symboles spéciaux qui permettent d’effectuer des calculs ou des opérations sur les valeurs en JavaScript. Il en existe plusieurs catégories essentielles :
1️⃣ Les opérateurs arithmétiques (servent à effectuer des calculs mathématiques de base) :
| Opérateur | Description | Exemple |
| + | Addition | 5 + 3 // 8 |
| – | Soustraction | 10 – 7 // 3 |
| * | Multiplication | 4 * 6 // 24 |
| / | Division | 20 / 5 // 4 |
| % | Modulo (reste de la division) | 17 % 3 // 2 |
| ** | Puissance | 2 ** 3 // 8 |
2️⃣ Les opérateurs d’affectation (permettent d’assigner une valeur à une variable) :
| Opérateur | Équivalent à | Exemple |
| = | x = y | let x = 3 |
| += | x = x + y | let x = 3; x += 5; // x vaut 8 |
| -= | x = x – y | let x = 8; x -= 3; // x vaut 5 |
| *= | x = x * y | … |
3️⃣ Les opérateurs de comparaison (comparent deux valeurs et renvoient un booléen (vrai/faux)):
| Opérateur | Description | Exemple |
| == | Égal à | 3 == 3 // true |
| === | Égal à (valeur ET type) | 3 === « 3 » // false |
| != | Différent de | 5 != 3 // true |
| !== | Différent de (valeur OU type) | 5 !== « 5 » // true |
| > | Supérieur à | 8 > 5 // true |
| >= | Supérieur ou égal à | 6 >= 6 // true |
| < | Inférieur à | 2 < 7 // true |
| <= | Inférieur ou égal à | 4 <= 4 // true |
4️⃣ Les opérateurs logiques (combinent ou inversent des valeurs booléennes) :
| Opérateur | Description | Exemple |
| && | Et logique | true && false // false |
| || | Ou logique | true || false // true |
| ! | Non logique (inverse) | !true // false |
Les opérateurs sont très importants pour manipuler les valeurs, effectuer des calculs, comparer des conditions et contrôler le flux d’exécution dans les scripts JavaScript. Ils permettent d’écrire un code clair, concis et structuré.
Les structures de contrôle
Les structures de contrôle sont essentielles en programmation pour contrôler le déroulement d’un script en fonction de conditions spécifiques. JavaScript offre plusieurs structures clés à maîtriser.
Les instructions conditionnelles (if…else)
L’instruction if…else permet d’exécuter un bloc de code si une condition donnée est vraie, et un autre bloc si elle est fausse. Voici son fonctionnement :
Condition
?
Vrai Faux
| |
[Code][Code]
Voici la syntaxe :
if (condition) {
// Code exécuté si condition est vraie
} else {
// Code exécuté si condition est fausse
}Vous pouvez imbriquer des conditions supplémentaires avec else if :
let temperature = 25;
if (temperature < 0) {
console.log("Glacial !");
} else if (temperature < 15) {
console.log("Froid");
} else if (temperature < 25){
console.log("Agréable");
} else {
console.log("Chaud");
}
// Affiche "Chaud"L’instruction switch est une alternative à if…else quand vous avez beaucoup de cas différents.
Les boucles (for, while, do…while)
Les boucles permettent d’exécuter un bloc de code de manière répétée, jusqu’à ce qu’une condition soit remplie.
Boucle for :
for (initialisation; condition; incrémentation) {
// Code exécuté à chaque itération
}Exemple :
for (let i = 0; i < 5; i++) {
console.log(i); // Affiche 0 1 2 3 4
}Boucle while :
while (condition) {
// Code exécuté tant que condition est vraie
}Boucle do…while (exécute le code AU MOINS une fois) :
do {
// Code exécuté
} while (condition);Les instructions break et continue
- break permet de sortir d’une boucle avant sa fin.
- continue passe à l’itération suivante en ignorant le reste du code.
Exemple avec break :
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // Sort de la boucle si i vaut 5
}
console.log(i);
}
// Affiche 0 1 2 3 4Exemple avec continue :
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue; // Saute à l'itération suivante si i vaut 3
}
console.log(i);
}
// Affiche 0 1 2 4Les structures de contrôle permettent de donner de la logique et de l’interactivité à vos scripts. Combinées aux opérateurs vus précédemment, elles permettent de créer des programmes complets.
Les fonctions
Les fonctions sont l’un des concepts les plus importants en programmation. Elles permettent d’encapsuler une portion réutilisable de code dans un bloc autonome.
JavaScript offre plusieurs façons de définir et d’utiliser des fonctions.
Définition (rapide) et appel de fonctions
Une fonction est définie avec le mot-clé function, suivi d’un nom, de parenthèses pour les paramètres et d’accolades englobant le code à exécuter :
function nomDeMaFonction(parametre1, parametre2) {
// Code à exécuter
return valeurDeRetour;
}Pour appeler (exécuter) une fonction, on utilise son nom suivi de parenthèses :
nomDeMaFonction(valeur1, valeur2); // Appel avec des arguments
Exemple concret :
function calculerAire(largeur, hauteur) {
let aire = largeur * hauteur;
return aire;
}
let resultat = calculerAire(5, 3);
console.log(resultat); // Affiche 15Paramètres et valeurs de retour
Les paramètres sont des variables qui représentent les entrées de la fonction. Ils récupèrent les valeurs fournies lors de l’appel (les arguments).
La valeur de retour est une valeur renvoyée par la fonction après son exécution via le mot-clé return. Elle peut être stockée dans une variable ou réutilisée ailleurs.
Les fonctions fléchées
ES6 a introduit une nouvelle syntaxe plus concise pour définir des fonctions : les fonctions fléchées. Elles se révèlent très pratiques pour les fonctions courtes :
// Fonction classique
let Addition = function(a, b) {
return a + b;
}
// Fonction fléchée équivalente
let Addition = (a, b) => a + b;Autre exemple :
// Retourne un carré
let carre = x => x * x;
console.log(carre(5)); // 25Les fonctions fléchées ont quelques différences notables :
- Syntaxe plus légère
- Le mot-clé return est implicite si l’expression tient sur une ligne
- La valeur de this est liée lexicalement (portée partagée)
Elles sont particulièrement utiles pour les fonctions de rappel (callbacks), les fonctions utilisées dans les méthodes des tableaux comme map() ou filter(), et plus généralement pour simplifier l’écriture de fonctions courtes.
Les fonctions sont au cœur de la programmation JavaScript. Leur maîtrise permet d’écrire du code modulaire, réutilisable et facilement testable, atouts essentiels pour tout développeur.
Autres commandes utiles
Au-delà des bases que nous avons vues, JavaScript dispose d’un large éventail de commandes utiles pour manipuler les données et interagir avec les pages web. En voici quelques-unes parmi les plus importantes à connaître.
Gestion des chaînes
Les chaînes de caractères ont de nombreuses méthodes pratiques :
- split() : divise une chaîne en un tableau en utilisant un séparateur
- join() : fusionne les éléments d’un tableau en une chaîne
- indexOf() / lastIndexOf() : renvoie la position d’une sous-chaîne
- replace() : remplace des parties d’une chaîne
- toLowerCase() / toUpperCase() : convertit la casse
- trim() : supprime les espaces en début et fin de chaîne
Exemple :
let phrase = "Avez-vous du foin ?";
let mots = phrase.split(" "); // ["Avez-vous", "du", "foin", "?"]
console.log(mots.join("-")); // "Avez-vous-du-foin-?"Les tableaux
Les tableaux (arrays) bénéficient de nombreuses méthodes pour les manipuler :
- push() / pop() : ajoute/retire un élément à la fin
- unshift() / shift() : ajoute/retire un élément au début
- concat() : fusionne plusieurs tableaux
- slice() : extrait une portion d’un tableau
- indexOf() : renvoie l’index d’un élément
- map() / filter() / reduce() : itère sur le tableau
- reverse() / sort() : inverse l’ordre / trie les éléments
Les objets et propriétés
Les objets permettent de stocker des collections de données et de valeurs associées à des clés (propriétés). Ils peuvent être très complexes et même imbriqués.
let personne = {
nom: "Martin",
age: 32,
adresse: {
rue: "Rue des Lilas",
ville: "Paris"
}
}
console.log(personne.nom); // "Martin"
console.log(personne.adresse.ville); // "Paris"Le format JSON (JavaScript Object Notation) est basé sur cette notation objet de JavaScript et est très utilisé pour échanger des données structurées :
{
"prenom": "Emma",
"nomDeFamille": "Dupont",
"age": 27,
"hobbies": [
"Escalade",
"Lecture"
]
}De multiples bibliothèques JavaScript comme lodash ou underscore fournissent aussi de nombreuses fonctions utilitaires pour manipuler les données.
Quelle que soit la complexité de votre projet, vous trouverez toujours en JavaScript les outils adéquats pour travailler efficacement avec les chaînes, tableaux, objets et structures de données.
Conclusion
Après avoir couvert en détail les commandes JavaScript les plus essentielles, vous disposerez des connaissances nécessaires pour écrire un code clair et de qualité. Que vous cherchiez à créer des applications, des algorithmes performants ou des expériences utilisateur riches, la maîtrise de ces concepts vous permettra de repousser les limites du développement web traditionnel.
