Vous êtes sur la page 1sur 15

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

Variables JavaScript
❮ Précédent Suivant ❯

Les variables sont des conteneurs pour stocker des données


Les variables JavaScript peuvent être déclarées de 4 manières :

Automatiquement
En utilisant var
En utilisant let
En utilisant 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
Tutorials  »
Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

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 »

Note
Le var mot-clé 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 var mot-clé ne doit être utilisé que dans du code écrit pour les anciens navigateurs.

Exemple utilisant let


let x = 5;
Tutorials 
let y = 6;
Exercises  Services   Sign Up Log in

let z = x + y;
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

Essayez-le vous-même »

Exemple utilisant const


const x = 5;
const y = 6;
const z = x + y;

Essayez-le vous-même »

Exemple mixte
const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Essayez-le vous-même »

Les deux variables price1 et price2 sont déclarées avec le const mot clé.

Ce sont des valeurs constantes et ne peuvent pas être modifiées.

La variable total est déclarée avec le let mot clé.

La valeur total peut être modifiée.

Quand utiliser var, let ou const ?


1. Déclarez toujours les variables
 Tutorials  Exercises  Services  
2. Toujours utiliser const si la valeur ne doit pas être modifiée
Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C
3. Toujours utiliser const si le type ne doit pas être modifié (Tableaux et Objets)

4. N'utilisez que let si vous ne pouvez pas l'utiliser const

5. À utiliser uniquement var 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
 Tutorials  JavaScript
Exercises  Services   Sign Up Log in

HTML
 Toutes CSS JAVASCRIPT
les variables JavaScript SQL PYTHON
doivent être JAVA
identifiées PHP
par des nomsCOMMENT
uniques . W3.C

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 », et non un opérateur
« égal à ».

C’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 est parfaitement logique : il attribue la valeur x + 5 à x.


(It calculates the value of x + 5 and puts the result into x. The value of x is incremented
by 5.) Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

Note
The "equal to" operator is written like == in JavaScript.

JavaScript Data Types


JavaScript variables can hold numbers like 100 and text values like "John Doe".

In programming, text values are called text strings.

JavaScript can handle many types of data, but for now, just think of numbers and
strings.

Strings are written inside double or single quotes. Numbers are written without quotes.

If you put a number in quotes, it will be treated as a text string.

Example
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Try it Yourself »

Declaring a JavaScript Variable


Creating a variable in JavaScript is called "declaring" a variable.

You declare a JavaScript variable with the var or the let keyword:
var carName;
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C
or:

let carName;

After the declaration, the variable has no value (technically it is undefined ).

To assign a value to the variable, use the equal sign:

carName = "Volvo";

You can also assign a value to the variable when you declare it:

let carName = "Volvo";

In the example below, we create a variable called carName and assign the value "Volvo"
to it.

Then we "output" the value inside an HTML paragraph with id="demo":

Example
<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Try it Yourself »
 Tutorials  Exercises  Services   Sign Up Log in


NoteCSS
HTML JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C
It's a good programming practice to declare all variables at the beginning of a script.

One Statement, Many Variables


You can declare many variables in one statement.

Start the statement with let and separate the variables by comma:

Example
let person = "John Doe", carName = "Volvo", price = 200;

Try it Yourself »

A declaration can span multiple lines:

Example
let person = "John Doe",
carName = "Volvo",
price = 200;

Try it Yourself »

Value = undefined
In computer programs, variables are often declared without a value. The value can be
 Tutorials
something  to Exercises
that has 
be calculated, Services
or 
something that will  Sign Up
be provided later, Log in
like user
input.
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C
A variable declared without a value will have the value undefined .

The variable carName will have the value undefined after the execution of this
statement:

Example
let carName;

Try it Yourself »

Re-Declaring JavaScript Variables


If you re-declare a JavaScript variable declared with var , it will not lose its value.

The variable carName will still have the value "Volvo" after the execution of these
statements:

Example
var carName = "Volvo";
var carName;

Try it Yourself »

Note
You cannot re-declare a variable declared with let or const .
This will not work:
 Tutorials  Exercises  Services   Sign Up Log in
let carName = "Volvo";
HTML CSS
 let carName; JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like =
and + :

Example
let x = 5 + 2 + 3;

Try it Yourself »

You can also add strings, but strings will be concatenated:

Example
let x = "John" + " " + "Doe";

Try it Yourself »

Also try this:

Example
let x = "5" + 2 + 3;
Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

Note
If you put a number in quotes, the rest of the numbers will be treated as strings, and
concatenated.

Now try this:

Example
let x = 2 + 3 + "5";

Try it Yourself »

JavaScript Dollar Sign $


Since JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable
names:

Example
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Try it Yourself »
Using the dollar sign is not very common in JavaScript, but professional programmers
 Tutorials
often use it as an aliasExercises Servicesina JavaScript
 function
for the main library. Sign Up Log in

HTML
 Dans la CSS JAVASCRIPT
bibliothèque SQL parPYTHON
JavaScript jQuery, exemple, laJAVA
fonction PHP COMMENT
main $ est utilisée pourW3.C
sélectionner des éléments HTML. En 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 »

L'utilisation du trait de soulignement n'est pas très courante en JavaScript, mais une
convention parmi les programmeurs professionnels consiste à l'utiliser comme alias pour
les variables « privées (cachées) ».

Testez-vous avec des exercices

Exercice:
Créez une variable appelée carName et attribuez Volvo -lui la valeur.
 Tutorials 
laisser
Exercises 
= "
Services 
" ;
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

Soumettre la réponse »

Commencer l'exercice

❮ Précédent Connectez-vous pour suivre les progrès Suivant ❯

PIPETTE À COULEURS
 Tutorials  Exercises   
Services 
  Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP COMMENT W3.C

 LES ESPACES MISE À NIVEAU BULLETIN

OBTENIR UNE CERTIFICATION RAPPORT D'ERREUR

Meilleurs tutoriels
Tutoriel HTML Tutoriel
CSS Tutoriel
JavaScript Tutoriel
Comment faire Tutoriel
SQL Tutoriel
Python Tutoriel
W3.CSS Tutoriel
Bootstrap Tutoriel
PHP Tutoriel
Java Tutoriel
C++ Tutoriel
jQuery

Principales références
Référence HTML Référence
CSS Référence
JavaScript Référence
SQL Référence
Python Référence
W3.CSS Référence
Bootstrap Référence
PHP
Couleurs HTML Référence
Java Référence
Angular Référence
jQuery

Meilleurs exemples Obtenir une certification


Exemples HTML Exemples Certificat HTML Certificat
CSS Exemples CSS Certificat
JavaScript Exemples JavaScript Certificat
pratiques Exemples Front End Certificat
SQL Exemples SQL Certificat

 Python Exemples
Tutorials  Exercises
W3.CSS Exemples
 Services  Python Certificat

PHP Certificat
Sign Up Log in
d'amorçage Exemples jQuery Certificat
HTML
 CSSPHP Exemples
JAVASCRIPT SQL PYTHON Java Certificat PHP
JAVA COMMENT W3.C
Java Exemples C++ Certificat
XML Exemples C# Certificat
jQuery XML

    FORUM À PROPOS
W3Schools est optimisé pour l'apprentissage et la formation. Les exemples pourraient
être simplifiés pour améliorer la lecture et l’apprentissage.
Les didacticiels, références et exemples sont constamment révisés pour éviter les
erreurs, mais nous ne pouvons garantir l'exactitude totale
de tout le contenu. En utilisant W3Schools, vous acceptez d'avoir lu et accepté nos
conditions d'utilisation , nos cookies et notre politique de confidentialité .

Copyright 1999-2023 par Refsnes Data. Tous droits réservés. W3Schools est propulsé
par W3.CSS .

Vous aimerez peut-être aussi