Variables JavaScript


Table des matières

    Afficher la table des matières

Les variables sont des conteneurs pour stocker des données

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 :

Exemple

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>


Note

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

Exemple utilisant var

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>


Note

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.

Exemple utilisant let

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>


Exemple utilisant const

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>


Exemple mixte

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.

Quand utiliser var, let ou const ?

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 l'algèbre

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.

Note

Les variables sont des conteneurs pour stocker des valeurs.



Identifiants JavaScript

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.

Note

Les identifiants JavaScript sont sensibles à la casse.


L'opérateur d'affectation

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.)

Note

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 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.

Exemple

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>



Déclaration d'une variable JavaScript

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":

Exemple

<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>

Note

C'est une bonne pratique de programmation de déclarer toutes les variables au début d'un script.


Une déclaration, plusieurs variables

Vous pouvez déclarer plusieurs variables dans une seule instruction.

Commencer la déclaration avec let et séparez les variables par virgule :

Exemple

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 :

Exemple

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>



Valeur=non défini

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 :

Exemple

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>



Re-déclarer les variables JavaScript

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 :

Exemple

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>


Note

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;

Arithmétique JavaScript

Comme pour l'algèbre, vous pouvez faire de l'arithmétique avec des variables JavaScript, en utilisant opérateurs comme = et + :

Exemple

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 :

Exemple

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 :

Exemple

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>

Note

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";

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>

Signe dollar JavaScript $

Puisque JavaScript traite le signe dollar comme une lettre, les identifiants contenant $sont des noms de variables valides :

Exemple

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".


Soulignement JavaScript (_)

Puisque 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;

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)".