Les variables JavaScript peuvent être déclarées de 4 manières :
Automatiquement
Utilisation de var
Utiliser let
Utilisation de const
Dans ce premier exemple, x
, y
et z
sont des variables non déclarées.
Ils sont automatiquement déclarés lors de la première utilisation :
x = 5;
y = 6;
z = x + y;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Il est considéré comme une bonne pratique de programmation de toujours déclarer les variables avant utilisation.
À partir des exemples, vous pouvez deviner :
x stocke la valeur 5
y stocke la valeur 6
z stocke la valeur 11
var x = 5;
var y = 6;
var z = x + y;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Le mot-clé var
a été utilisé dans tout le code JavaScript de 1995 à 2015.
Les mots-clés let
et const
ont été ajoutés à JavaScript en 2015.
Le mot clé var
ne doit être utilisé que dans le code écrit pour les navigateurs plus anciens.
let x = 5;
let y = 6;
let z = x + y;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Les deux variables price1
et price2
sont déclarés avec le mot clé const
.
Ce sont des valeurs constantes et ne peuvent pas être modifiées.
La variable total
est déclarée avec le mot clé let
.
La valeur total
peut être modifiée.
1. Déclarez toujours les variables
2. Utilisez toujours const
si la valeur ne doit pas être modifiée
3. Utilisez toujours const
si le type ne doit pas être modifié (Tableaux et Objets)
4. N'utilisez let
que si vous ne pouvez pas utiliser const
5. N'utilisez var
que si vous DEVEZ prendre en charge les anciens navigateurs.
Tout comme en algèbre, les variables contiennent des valeurs :
let x = 5;
let y = 6;
Tout comme en algèbre, les variables sont utilisées dans les expressions :
let z = x + y;
D’après l’exemple ci-dessus, vous pouvez deviner que le total calculé est de 11.
Les variables sont des conteneurs pour stocker des valeurs.
Toutes les variables JavaScript doivent être identifiés avec des noms uniques.
Ces noms uniques sont appelés identifiants.
Les identifiants peuvent être des noms courts (comme x et y) ou des noms plus descriptifs (âge, somme, volume total).
Les règles générales de construction des noms de variables (identifiants 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 également commencer par $et _ (mais nous ne l'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.
Les identifiants JavaScript sont sensibles à la casse.
En JavaScript, le signe égal (=
) est un opérateur « d'affectation », pas un opérateur "égal à".
C’est différent de l’algèbre. Ce qui suit n'a pas de sens dans algèbre:
x = x + 5
En JavaScript, cependant, cela est parfaitement logique : il attribue la valeur de x + 5 à X.
(Il calcule la valeur de x + 5 et met le résultat dans x. La valeur de x est incrémenté de 5.)
L'opérateur "égal à" s'écrit comme ==
en JavaScript.
Les variables JavaScript peuvent contenir des nombres comme 100 et des valeurs de texte comme « John Biche".
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 citations.
Si vous mettez un nombre entre guillemets, il sera traité comme une chaîne de texte.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Créer une variable en JavaScript s'appelle « déclarer » une variable.
Vous déclarez une variable JavaScript avec le mot clé var
ou let
:
var carName;
let carName;
Après la déclaration, la variable n'a plus de valeur (techniquement elle est non définie
).
Pour attribuer une valeur à la variable, utilisez le signe égal :
carName = "Volvo";
Vous pouvez également attribuer une valeur à la variable lorsque vous la déclarez :
let carName = "Volvo";
Dans l'exemple ci-dessous, nous créons une variable appelée carName
et attribuons la valeur "Volvo" à ça.
Ensuite, nous "affichons" la valeur dans un paragraphe HTML avec id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
C'est une bonne pratique de programmation de déclarer toutes les variables au début d'un script.
Vous pouvez déclarer plusieurs variables dans une seule instruction.
Commencer la déclaration avec let
et séparez les variables par virgule :
let person = "John Doe", carName = "Volvo", price = 200;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Une déclaration peut s'étendre sur plusieurs lignes :
let person = "John Doe",
carName = "Volvo",
price = 200;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Dans les programmes informatiques, les variables sont souvent déclarées sans valeur. La valeur peut être quelque chose qui doit être calculé, ou quelque chose qui sera fourni plus tard, comme la saisie de l'utilisateur.
Une variable déclarée sans valeur aura la valeur indéfini
.
La variable carName aura la valeur undefined
après l'exécution de cette instruction :
let carName;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Si vous déclarez à nouveau une variable JavaScript déclarée avec var
, elle ne perdra pas sa valeur.
La variable carName
aura toujours la valeur "Volvo" après l'exécution de ces instructions :
var carName = "Volvo";
var carName;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Vous ne pouvez pas re-déclarer une variable déclarée avec let
ou const
.
Cela ne fonctionnera pas :
let carName = "Volvo";
let carName;
Comme pour l'algèbre, vous pouvez faire de l'arithmétique avec des variables JavaScript, en utilisant opérateurs comme =
et +
:
let x = 5 + 2 + 3;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Vous pouvez également ajouter des chaînes, mais les chaînes seront concaténées :
let x = "John" + " " + "Doe";
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Essayez aussi ceci :
let x = "5" + 2 + 3;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Si vous mettez un nombre entre guillemets, le reste des nombres sera traité comme des chaînes et concaténé.
Maintenant, essayez ceci :
let x = 2 + 3 + "5";
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Puisque JavaScript traite le signe dollar comme une lettre, les identifiants contenant $sont des noms de variables valides :
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
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 main $
est utilisé pour sélectionner des éléments HTML. Dans jQuery $ ("p");
signifie "sélectionner tous les éléments p".
Puisque JavaScript traite le trait de soulignement comme une lettre, les identifiants contenant _ sont des noms de variables valides :
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
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 variables "privées (cachées)".