Apprendre JS pas à pas
Les variables
Déclaration, affectation et portée des variables en JavaScript :
Déclaration de variables
- Utilisez
var,letouconstpour déclarer une variable.
Affectation de variables
Utilisez = pour attribuer une valeur à une variable.
Portée des variables
- Variables globales : Déclarées à l'extérieur de toutes les fonctions, accessibles partout.
- Variables locales : Déclarées à l'intérieur d'une fonction, accessibles uniquement à l'intérieur de celle-ci.
- Variables avec portée de bloc (ES6+) :
letouconstà l'intérieur d'un bloc de code délimité par des accolades{}(closure/fermeture), limitées à ce bloc. - Hoisting (hissage) : Les déclarations de variables
varuniquement sont hissées en haut de leur portée lors de l'exécution du code, mais pas leur initialisation.
Recommandations :
- Préférence pour
letetconst: Utilisezletpour les variables réaffectables,constpour les variables dont la valeur ne change pas. - Limitez la portée : Déclarez les variables dans la portée la plus étroite possible.
- Nommez les variables de manière explicite : Utilisez des noms significatifs pour faciliter la compréhension.
- Initialisez les variables : Affectez une valeur initiale dès la déclaration.
Type de données
FlashCard
| # | Type de données | Description | Exemples |
|---|---|---|---|
| 1. | Nombre | Représente les valeurs numériques | 42, 3.14, -10 |
| 2. | Chaîne de caractères | Représente une séquence de caractères | 'Bonjour', "JavaScript" |
| 3. | Booléen | Représente une valeur logique (true ou false) | true, false |
| 4. | Tableau | Collection ordonnée d'éléments | [1, 2, 3], ['a', 'b', 'c'] |
| 5. | Objet | Entité avec des propriétés et des méthodes | nom: 'John', age: 25 |
| 6. | Undefined | Indique qu'une variable n'a pas de valeur assignée | undefined |
| 7. | Null | Indique l'absence intentionnelle de valeur | null |
| 8. | Symbole | Identifiants uniques introduits dans ES6 | Symbol('description') |
| 9. | Objet Date | Représente une date et une heure spécifiques | new Date() |
| 10. | Objet RegExp | Utilisé pour les expressions régulières | /pattern/, new RegExp('pattern') |
| 11. | Fonction | Bloc de code réutilisable appelé avec un nom et des paramètres | function addition(a, b) return a + b; |
Les opérateurs
| # | Opérateur | Description |
|---|---|---|
| 1. | Opérateurs arithmétiques | +, -, *, /, % |
| 2. | Opérateurs de comparaison |
| 3. | Opérateurs logiques | &&, ||, ! | | 4. | Opérateurs d'assignation | =, +=, -=, *=, /=, %= | | 5. | Opérateurs d'incrémentation | ++, -- | | 6. | Opérateur de concaténation | + | | 7. | Opérateur ternaire | condition ? expression1 : expression2 | | 8. | Opérateurs de bitwise | | | 9. | Opérateur de concaténation de chaînes de caractères | += | | 10. | Opérateurs d'appartenance | in, instanceof | | 11. | Opérateur de sélection | . | | 12. | Opérateurs de test de type | typeof, instanceof | | 13. | Opérateurs de décalage | | | 14. | Opérateur de suppression | delete | | 15. | Opérateur de résolution de portée | :: | | 16. | Opérateurs de regroupement | (), [], {} |
Structure de contrôle
| # | Structure de contrôle | Description |
|---|---|---|
| 1. | Structure conditionnelle if/else | Permet d'exécuter un bloc de code en fonction d'une condition. |
| 2. | Structure conditionnelle switch | Permet de sélectionner un bloc de code à exécuter parmi plusieurs cas. |
| 3. | Boucle for | Exécute un bloc de code un certain nombre de fois, basé sur une condition de contrôle. |
| 4. | Boucle while | Exécute un bloc de code tant qu'une condition donnée est vraie. |
| 5. | Boucle do...while | Exécute un bloc de code au moins une fois, puis continue tant qu'une condition donnée est vraie. |
| 6. | Boucle for...in | Parcourt les propriétés énumérables d'un objet. |
| 7. | Boucle for...of | Parcourt les éléments d'une structure itérable (tableau, chaîne de caractères, etc.). |
| 8. | Structure conditionnelle ternaire | Permet d'effectuer une condition en une seule ligne. |
| 9. | Instruction break | Termine l'exécution d'une boucle ou d'une instruction conditionnelle. |
| 10. | Instruction continue | Passe à l'itération suivante d'une boucle. |
Les fonctions
| # | Fonction | Description | Cours et exemples |
|---|
| 1. | Fonction déclarative | Déclare une fonction avec le mot-clé function. | Cours : function nomFonction() { // Code }
Exemple : function afficherMessage() { console.log("Bonjour !"); } |
| 2. | Fonction avec paramètres | Permet de passer des valeurs à une fonction en utilisant des paramètres. | Cours : function nomFonction(param1, param2) { // Code } Exemple : function additionner(a, b) { return a + b; } |
| 3. | Fonction avec retour de valeur | Renvoie une valeur calculée par la fonction avec le mot-clé return. | Cours : function nomFonction() { return valeur; } Exemple : function carre(nombre) { return nombre * nombre; } |
| 4. | Fonction anonyme | Fonction sans nom, souvent utilisée comme argument d'une autre fonction. | Cours : (function() { // Code })(); Exemple : (function() { console.log("Fonction anonyme exécutée !"); })(); |
| 5. | Fonction fléchée | Syntaxe simplifiée pour déclarer une fonction. | Cours : () => { // Code } Exemple : const multiplier = (a, b) => a * b; |
| 6. | Fonction récursive | Appelle elle-même pour effectuer des opérations répétitives. | Cours : function nomFonction() { nomFonction(); } Exemple : function compteur(numero) { if (numero > 0) { console.log(numero); compteur(numero - 1); } } |
| 7. | Fonction de rappel (callback) | Fonction passée en argument à une autre fonction pour être appelée ultérieurement. | Cours : function fonctionPrincipale(callback) { // Code ; callback(); } Exemple : function afficherMessage(callback) { console.log("Bonjour !"); callback(); } afficherMessage(() => console.log("Fin du programme")); |
| 8. | Fonction auto-exécutante (IIFE) | S'exécute immédiatement après sa définition. | Cours : (function() { // Code })(); Exemple : (function() { console.log("Fonction auto-exécutante !"); })(); |
Fonction déclarative
- Une fonction déclarative est définie à l'aide du mot-clé
function. - Elle peut avoir un nom pour être réutilisée ultérieurement.
function afficherMessage() {
console.log("Bonjour !");
}
afficherMessage(); // Appel de la fonction