Variables JavaScript
4 façons de déclarer une variable JavaScript :
- Utilisant
var - Utilisant
let - Utilisant
const - Ne rien utiliser
Qu'est-ce qu'une variable ?
Les variables sont des conteneurs pour stocker des données (stocker des valeurs de données).
Dans cet exemple, x, y, et z, sont des variables, déclarées avec le varmot clé :
Exemple
var x = 5;
var y = 6;
var z = x + y;
Dans cet exemple, x, y, et z, sont des variables, déclarées avec le letmot clé :
Exemple
let x = 5;
let y = 6;
let z = x + y;
Dans cet exemple, x, yet z, sont des variables non déclarées :
Exemple
x = 5;
y = 6;
z = x + y;
De tous les exemples ci-dessus, vous pouvez deviner :
- x stocke la valeur 5
- y stocke la valeur 6
- z stocke la valeur 11
Quand utiliser JavaScript var ?
Déclarez toujours les variables JavaScript avec var, letou const.
Le varmot-clé est utilisé dans tout le code JavaScript de 1995 à 2015.
Les mots clés letet constont été ajoutés à JavaScript en 2015.
Si vous souhaitez que votre code s'exécute dans un navigateur plus ancien, vous devez utiliser var.
Quand utiliser JavaScript const ?
Si vous voulez une règle générale : déclarez toujours les variables avec const.
Si vous pensez que la valeur de la variable peut changer, utilisez let.
Dans cet exemple, price1, price2, et total, sont des variables :
Exemple
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Les deux variables price1et price2
sont déclarées avec le constmot clé.
Ce sont des valeurs constantes et ne peuvent pas être modifiées.
La variable totalest déclarée avec le letmot clé.
C'est une valeur qui peut être modifiée.
Comme l'algèbre
Comme en algèbre, les variables contiennent des valeurs :
let x = 5;
let y = 6;
Comme en algèbre, les variables sont utilisées dans les expressions :
let z = x + y;
À partir de l'exemple ci-dessus, vous pouvez deviner que le total calculé est 11.
Noter
Les variables sont des conteneurs pour stocker des valeurs.
Identifiants JavaScript
Toutes les variables JavaScript doivent être identifiées par des noms uniques .
Ces noms uniques sont appelés identificateurs .
Les identifiants peuvent être des noms courts (comme x et y) ou des noms plus descriptifs (age, sum, totalVolume).
Les règles générales de construction des noms de variables (identificateurs uniques) sont :
- Les noms peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar.
- Les noms doivent commencer par une lettre
- Les noms peuvent aussi commencer par $ et _ (mais nous ne les utiliserons pas dans ce tutoriel)
- Les noms sont sensibles à la casse (y et Y sont des variables différentes)
- Les mots réservés (comme les mots-clés JavaScript) ne peuvent pas être utilisés comme noms
Noter
Les identifiants JavaScript sont sensibles à la casse.
L'opérateur d'affectation
En JavaScript, le signe égal ( =) est un opérateur "d'affectation", et non un opérateur "égal à".
Ceci est différent de l'algèbre. Ce qui suit n'a pas de sens en algèbre :
x = x + 5
En JavaScript, cependant, cela prend tout son sens : il attribue la valeur de x + 5 à x.
(Il calcule la valeur de x + 5 et place le résultat dans x. La valeur de x est incrémentée de 5.)
Noter
L'opérateur "égal à" s'écrit comme ==en JavaScript.
Types de données JavaScript
Les variables JavaScript peuvent contenir des nombres comme 100 et des valeurs textuelles comme "John Doe".
En programmation, les valeurs de texte sont appelées chaînes de texte.
JavaScript peut gérer de nombreux types de données, mais pour l'instant, pensez simplement aux nombres et aux chaînes.
Les chaînes sont écrites entre guillemets doubles ou simples. Les nombres sont écrits sans guillemets.
Si vous mettez un nombre entre guillemets, il sera traité comme une chaîne de texte.
Exemple
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Déclarer une variable JavaScript
Créer une variable en JavaScript s'appelle "déclarer" une variable.
Vous déclarez une variable JavaScript avec le varou le letmot clé :
var carName;
ou:
let carName;
Après la déclaration, la variable n'a pas de valeur (techniquement c'est undefined).
Pour affecter une valeur à la variable, utilisez le signe égal :
carName = "Volvo";
Vous pouvez également affecter une valeur à la variable lorsque vous la déclarez :
let carName = "Volvo";
Dans l'exemple ci-dessous, nous créons une variable appelée carNameet lui attribuons la valeur "Volvo".
Ensuite, nous "produisons" la valeur dans un paragraphe HTML avec id="demo":
Exemple
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Noter
C'est une bonne pratique de programmation de déclarer toutes les variables au début d'un script.
Une déclaration, de nombreuses variables
Vous pouvez déclarer plusieurs variables dans une seule instruction.
Commencez l'instruction par varet séparez les variables par des virgules :
Exemple
let person = "John Doe", carName = "Volvo", price = 200;
Une déclaration peut s'étendre sur plusieurs lignes :
Exemple
let person = "John Doe",
carName = "Volvo",
price = 200;
Valeur = indéfini
Dans les programmes informatiques, les variables sont souvent déclarées sans valeur. La valeur peut être quelque chose qui doit être calculée, ou quelque chose qui sera fourni plus tard, comme une entrée utilisateur.
Une variable déclarée sans valeur aura la valeur
undefined.
La variable carName aura la valeur undefinedaprès l'exécution de cette instruction :
Exemple
let carName;
Re-déclarer des variables JavaScript
Si vous re-déclarez une variable JavaScript déclarée avec var, elle ne perdra pas sa valeur.
La variable carNameaura toujours la valeur "Volvo" après l'exécution de ces instructions :
Exemple
var carName = "Volvo";
var carName;
Noter
Vous ne pouvez pas re-déclarer une variable déclarée avec letou const.
Cela ne fonctionnera pas :
let carName = "Volvo";
let carName;
Arithmétique JavaScript
Comme pour l'algèbre, vous pouvez faire de l'arithmétique avec des variables JavaScript, en utilisant des opérateurs comme =et +:
Exemple
let x = 5 + 2 + 3;
Vous pouvez également ajouter des chaînes, mais les chaînes seront concaténées :
Exemple
let x = "John" + " " + "Doe";
Essayez aussi ceci :
Exemple
let x = "5" + 2 + 3;
Noter
Si vous mettez un nombre entre guillemets, le reste des nombres sera traité comme des chaînes et concaténé.
Maintenant, essayez ceci :
Exemple
let x = 2 + 3 + "5";
Signe dollar JavaScript $
Étant donné que JavaScript traite un signe dollar comme une lettre, les identifiants contenant $ sont des noms de variables valides :
Exemple
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
L'utilisation du signe dollar n'est pas très courante en JavaScript, mais les programmeurs professionnels l'utilisent souvent comme alias pour la fonction principale dans une bibliothèque JavaScript.
Dans la bibliothèque JavaScript jQuery, par exemple, la fonction principale
$est utilisée pour sélectionner des éléments HTML. Dans jQuery $("p");signifie "sélectionner tous les éléments p".
Soulignement JavaScript (_)
Étant donné que JavaScript traite le trait de soulignement comme une lettre, les identifiants contenant _ sont des noms de variables valides :
Exemple
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
L'utilisation du trait de soulignement n'est pas très courante en JavaScript, mais une convention parmi les programmeurs professionnels est de l'utiliser comme alias pour les variables "privées (cachées)".