La portée des variables avec let et const

La portée des variables avec let et const

Cette vidéo est un peu plus longue que d'habitude car je ne trouvais pas utile de la couper en deux. N'hésitez pas à faire une petite pause au milieu !

NOTES

À 8:04 je montre une boucle for sans accolades.

C'est le même principe qu'avec l'instruction if. Lorsqu'une structure de contrôle ne possède qu'une seule instruction à exécuter, on a le droit de l'écrire sur une seule ligne, à la suite, sans accolades comme ceci :

if (condition) console.log("Instruction unique du if");


Avec une boucle for, on peut faire la même chose :

for (let i = 0; i < 3; i++) console.log("Je vais m'écrire 3 fois de suite");


Notez que c'est une mauvaise pratique de ne pas mettre les accolades, même pour une seule instruction comme je l'ai déjà mentionné dans une vidéo précédente.

SOMMAIRE

00:27 Définition de la portée d'une variable
01:53 Limite de la portée des variables : le bloc d'instruction (block-scoping)
03:25 Définitions de variable globale et locale
05:22 Les blocs d'instructions des structures de contrôle
05:27 Les conditions if
06:10 La boucle do...while
06:31 La boucle while
06:49 La boucle for (particularité !)
08:04 La boucle for sur une seule ligne
08:54 Interdiction de redéclarer une variable... *dans la même portée !*
09:55 Principe de masquage d'une variable par une autre
11:21 Portée des paramètres dans une fonction
13:31 Blocs d'instructions imbriqués
15:52 Problème et solution avec switch
17:53 Bonnes pratiques concernant les variables et leurs portées
20:03 Exercices à faire de votre côté

LIENS

▶︎ Accédez aux exercices depuis VSCode après avoir suivi ces instructions

Module intermédiaire

Acheter maintenantEn savoir plus

Fiche de synthèse

  • Fiche de synthèse2

Les bases du JavaScript (suite)

  • Les littéraux de gabarits (template strings) : interpolation d'expressions17
  • Raccourcis d'opérateurs, opérateurs puissance et modulo14
  • Les types primitifs5
  • La conversion de types11
  • Quiz #1
  • Structures conditionnelles else if et switch9
  • L'opérateur conditionnel '?'11
  • Déclarer des variables avec const, let et var5
  • La portée des variables avec let et const8
  • La portée des variables avec var1
  • Quiz final

Les objets

  • Introduction24
  • Différences entre classes et prototypes4
  • Que se passe-t-il dans la mémoire de l'ordinateur ?13
  • Imbrication d'objets, exemple avec l'API de Twitter12
  • Quiz final

La POO : Programmation Orientée Objet

  • Les fonctions de première classe17
  • Les méthodes : des fonctions dans des objets8
  • Pourquoi apprendre la POO ?10
  • Quiz final2

Les projets : objectifs et fonctionnement

  • Objectifs des projets2
  • Créer un site web de zéro depuis Visual Studio Code11

Lien entre HTML et JavaScript

  • Introduction au DOM et différences entre NodeJS et Chrome8
  • Qu'est-ce que le DOM ? Que contient-il ?7
  • Sélection d'éléments du DOM6
  • Modification d'éléments du DOM7
  • Création et insertion d'éléments dans le DOM10
  • Déplacer et supprimer des éléments du DOM
  • Traverser les éléments du DOM13

Projet #1 : Compteur de clics

  • Présentation du compteur de clics4
  • Les évènements (+ énoncé exercice incrémentation)8
  • Solution incrémentation et comment déboguer dans Chrome (instruction debugger)18
  • Solution décrémentation et bouton reset11
  • Détecter un clic droit10
  • Solution zone de clic12
  • Lire la valeur d'un élément input2
  • Solution incrémenter et décrémenter le compteur des valeurs des inputs3
  • Comment afficher temporairement une notification ?
  • Solution gestion des limites et notifications15
  • Conclusion et conseils5

Les tableaux

  • Introduction
  • Lecture et itération via une boucle
  • Modifier un élément et rappels
  • Documentation du MDN : l'exploiter efficacement25
  • Tableaux multidimensionnels
  • Quiz final

Les types d'objets standards en JavaScript

  • String et les objets "enveloppeurs" (wrappers)32
  • Number2
  • Boolean
  • Date
  • RegExp (expression régulières)
  • Object3
  • La librairie Math2

BONUS Projet #2 : Animation changement d'ordre

  • Démo de l'animation et explications
  • Phase de décollage
  • Phase de déplacement 1/6
  • Phase de déplacement 2/6
  • Phase de déplacement 3/6
  • Phase de déplacement 4/6
  • Phase de déplacement 5/6
  • Phase de déplacement 6/6
  • Déplacement des items de la liste 1/4
  • Déplacement des items de la liste 2/4
  • Déplacement des items de la liste 3/4
  • Déplacement des items de la liste 4/4
  • Remaniement du code
  • Mise à jour du DOM 1/4
  • Mise à jour du DOM 2/4
  • Mise à jour du DOM 3/4
  • Mise à jour du DOM 4/45
  • Sauvegarde et remaniement1

Projet #2 : Liste de courses

  • Présentation du projet2
  • Fonctionnement des exercices
  • Ajout d'un nouvel item11
  • Template nouvel item3
  • Template nouvel item (fin)5
  • Correction des espaces11
  • Majuscule première lettre3
  • Validation valeur filtrée5
  • Messages d'erreurs 1/22
  • Messages d'erreurs 2/24
  • Minimum 2 lettres 1/2
  • Minimum 2 lettres 2/2
  • Insertion intelligente 1/52
  • Insertion intelligente 2/54
  • Insertion intelligente 3/5
  • Insertion intelligente 4/5
  • Insertion intelligente 5/5
  • Refactoring
  • Réduire la maintenance
  • Sauvegarder les données 1/2
  • Sauvegarder les données 2/2
  • Chargement des données 1/2
  • Chargement des données 2/2
  • Modification du nom de l'item 1/46
  • Modification du nom de l'item 2/4
  • Modification du nom de l'item 3/4
  • Modification du nom de l'item 4/44
  • Modification de la quantité de l'item
  • Sauvegarde automatique des données 1/4
  • Sauvegarde automatique des données 2/4
  • Sauvegarde automatique des données 3/4
  • Sauvegarde automatique des données 4/43
  • target VS currentTarget
  • Supprimer un item 1/2
  • Supprimer un item 2/23
  • Exportation des données4
  • Changement de l'ordre des items 1/52
  • Changement de l'ordre des items 2/5
  • Changement de l'ordre des items 3/5
  • Changement de l'ordre des items 4/5
  • Changement de l'ordre des items 5/52
  • Affichage de l'indicateur 1/11
  • Affichage de l'indicateur 2/112
  • Affichage de l'indicateur 3/11
  • Affichage de l'indicateur 4/11
  • Affichage de l'indicateur 5/11
  • Affichage de l'indicateur 6/11
  • Affichage de l'indicateur 7/11
  • Affichage de l'indicateur 8/11
  • Affichage de l'indicateur 9/11
  • Affichage de l'indicateur 10/11
  • Affichage de l'indicateur 11/11

Module algorithmique

  • Que faire après le module intermédiaire ?3