Bienvenue à ce nouveau tuto dans le quel nous allons apprendre la déclaration des variables dans JavaScript 🙂 🙂
accès rapide
- La démo
- Qu’est ce qu’une variable ?
- Comment déclarer une variable ?
- Différence entre let , var et const
- Comment choisir le nom de ma variable ?
- Quiz de ce tuto
La démo
mettre ici la vidéo de la démonstration
Qu’est ce qu’une variable ?
Pour faire simple, une variable est un conteneur (caractérisé par son nom) qui garde des valeurs durant toute l’exécution de notre programme.
Les variables en JavaScript ne sont pas typés, c’est-à-dire qu’elles peuvent contenir toutes sortes d’informations comme un nombre entier une chaîne de caractères, un tableau…
Autrement dit, nous n’avons pas besoin de mettre le type de la variable pour la déclarer c’est à dire le langage déterminera automatiquement le type d’une variable, donc pas besoin de spécifier le type d’une variable à sa création.
Comment déclarer une variable ?
En Javascript, pour déclarer une variable nous pouvons utiliser trois mots clé : let, const et var.
let et var permettent de déclarer des variables qui peuvent changer durant l’exécution du programme.
const quand à lui permet de déclarer des constantes qui ne changeront pas durant l’exécution du programme.
Exemple de déclaration :
var user = 'John'
let age = 25
const message = 'Hello'- var sert à définir une variable globale
- let sert à définir une variable locale
- const sert à déclarer une référence constante
Découvrons maintenant quelques exemple en pratique pour mieux voir la différence entre ces trois déclarations :
Se limite à la portée d’un bloc ?
- var : non ❌
- let : oui ✔️
- const : oui ✔️
Explication
Un bloc est l’ensemble des instructions comprises entre deux accolades « {…} »
Donc si on déclare une var dans une fonction, nous pouvons récupérer le contenu de cette variable en dehors de cette fonction. Cependant, let et const sont reconnues que dans le bloc dans lequel elles sont déclarées.
Cet exemple explique bien cette propriété :
Nous allons faire un test rapide, allez dans la console de votre navigateur en exécutant ce raccourcis (ctrl + shift + i) et suivez étape par étape ce qui est motionné dans cette explication :
1- Déclarer une variable booléenne :
var test = true // déclarer une variable booléenne
2- Déclarer et afficher les trois types de variable dans un même bloc :
if (test)
{
var a = 20
let b = 30
const c = 40
console.log(a) // la console affiche 20
console.log(b) // la console affiche 30
console.log(c) // la console affiche 40
}3- Essayer d’utiliser les trois type en dehors du bloc précédant :
console.log(a) // la console affiche 20
console.log(b) // la console affiche l'erreur b is not defined
console.log(c) // la console affiche l'erreur c is not definedRésultat :
Cet exemple montre que let et const se limitent à la portée d’un bloc donc elles ne sont pas disponibles en dehors de ce bloc
Stocké en global ?
- var : oui ✔️
- let : non ❌
- const : non ❌
C’est à dire var est utilisé pour définir une variable globale donc à n’importe quelle fonction du programme le contenu de cette variable peut être utilisé.
Explication
Donc si on déclare une var dans un bloc , nous pouvons récupérer le contenu de cette variable en dehors de cette fonction. Cependant, let et const sont reconnues que dans le bloc dans lequel elles sont déclarées.
Cet exemple explique bien cette propriété :
Nous allons faire un test rapide, allez dans la console de votre navigateur en exécutant ce raccourcis (ctrl + shift + i) et suivez étape par étape ce qui est motionné dans cette explication :
1- Déclarer les trois types de variables dans un bloc :
{
var a = 20
let b = 30
const c = 40
}2- Essayer d’afficher ces trois types de variable après la fin de ce bloc :
console.log(a) // la console affiche 20
console.log(b) // la console affiche l'erreur b is not defined
console.log(c) // la console affiche l'erreur c is not defined
Résultat :
Cet exemple montre que let et const se limitent à la portée d’un bloc tandis que var possède un critère globale donc elle est reconnue tout les long de l’exécution du programme.
Peut être modifiée ?
- var : oui ✔️
- let : oui ✔️
- const : non ❌
C’est à dire nous pouvons modifier les valeurs des variables déclarées comme étant var ou let tandis que le contenue de const reste inchangeable.
Cet exemple explique bien cette propriété :
Nous allons faire un test rapide, allez dans la console de votre navigateur en exécutant ce raccourcis (ctrl + shift + i) et suivez étape par étape ce qui est motionné dans cette explication :
1- Déclarer les trois types de variable :
var a = 20
let b = 30
const c = 402- Essayer de modifier la valeur de ces trois variables :
a = 22 // la valeur a été modifiée à 22
b = 33 // la valeur a été modifiée à 33
c = 44 // une erreur s'affiche: on peut pas modifier le contenuRésultat :
Cet exemple montre qu’on peut modifier les valeurs des variables let et var. Cependant, la valeur de const ne peut pas être modifiée.
Comment choisir le nom de ma variable ?
Le nom d’une variable en JavaScript doit respecter les conditions suivantes :
- commencer par une lettre , un underscore (tiret du bas « _ ») ou le signe $
- Pour le reste du nom,il ne doit contenir que : de lettres, chiffres, underscore et $
- Pas d’espace dans le nom d’une variable, mais vous pouvez utiliser une parmi ces méthodes pour que le nom sera facile à comprendre:
- utiliser le camelCase () par exemple si vous voulez déclarer la variable qui prendrai comme valeur un nom d’une personne vous pouvez mettre: nomPersonne
- utiliser les underscores () par exemple si vous voulez déclarer la variable qui prendrai comme valeur un prénom d’une personne vous pouvez mettre: prenom_personne
- ne pas utiliser pas les mots clés réservés par JavaScript : exemple ne pas mettre les noms suivants : var , if , const , for, int, etc..
Javascript est sensible à la casse, cela veut dire que la variable
birthDateest différente dequi est aussi différenteBirthDate.birthdate
Exercice d’application :
Parmi les noms des variables ci-dessous , indiquez les noms valides :
- 3_tiers
- NomPersonne
- Prenom Personne
- Age200
- $ligne_Facture
- let_nom
- for
- nom&prenom
Correction
- 3_tiers : non ❌ : car il commence par un chiffre
- NomPersonne : oui ✔️
- Prenom Personne : non ❌ : car il contient un espace
- Age200 : oui ✔️
- $ligne_Facture : oui ✔️
- let_nom : oui ✔️ : même si let et réservé
- for : non ❌ : car for est réservé par JavaScript pour faire les boucles.
- nom&prenom: non ❌ : car il contient le caractère « & »
Dans ce tuto , nous avons vu comment déclarer les variables en JavaScript.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons voir quels sont les types de données qu’on peut mettre dans les variables.
Quiz de ce tuto
Vous pouvez tester que vous avez bien assimiler tous ce que nous avons appris ensemble via ce quiz 🙂 🙂 amusez vous bien.