Variables dans JavaScript
1. Qu'est-ce que Variable?
Une variable (variable) est un "endroit dans la mémoire" (Memory location) où un programme utilise pour stocker des valeurs. Le nom de la variable est nommée un identificateur ou identifiant (identifier).
Le nom de variable doit être suivi par un principe. Voici les principes pour donner un nom à une variable :
- Les noms de variables ne doivent pas être identiques aux mots-clés (keyword).
- Les noms de variable peuvent contenir des alphabets ou des chiffres, mais ne doivent pas commencer par un chiffre.
- Les noms de variable ne peuvent pas contenir d'espaces (white space) ni de caractères spéciaux, à l'exception des caractères de soulignement (_) et dolar ($).
2. Déclarer variable
La déclaration de variable est nécessaire parce que vous l'avez fait avant de l'utiliser. La syntaxe ES5 utilise le mot de passe var pour déclarer une variable. La syntaxe ES6 ajoute 2 nouveaux mots de passe qui sont let & const pour déclarer une variable.
// Declare variables:
var a1;
console.log(a1); // undefined
var a2 = 100;
console.log(a2); // 100
var a3, a4;
var a5, a6 = 200;
console.log(a5); // undefined
console.log(a6); // 200
var a7= 100, a8 = 300;
let b1;
console.log(b1); // undefined
let b2 = "Hello";
console.log(b2); // Hello
const c = 100;
console.log(c); // 100
block
Un bloc (block) est un ensemble de commandes situé dans des "accolades ouvrantes et fermantes" (Curly brackets) { }.
let
Le mot de passe let est utilisé pour déclarer un bloc de code et la portée d'une variable (block scope), ca veut dire que cette variavle se sera rendue compte par le programme dans tel bloc père ou le bloc enfant, mais il est à noter que la variable ne se sera pas rendue par autres programme en dehors du bloc qui la définit.
if(true) {
let a = 200;
console.log(a); // 200
}
// Program will ignore this statement:
console.log(a);
Si vous utilisez le mot de passe let pour définir deux variables avec le même nom, une variable est déclarée dans le bloc père; une est déclaré dans le bloc enfant, le programme la traitera comme deux variables différentes.
let i = 1000;
let j = 2000;
if(true) {
i = 100; // Assign new value to 'i'
let j = 200; // A new variable (***)
console.log("Test1: " + i + " : " + j); // Test1: 100 : 200
}
console.log("Test2: "+ i + " : " + j); // Test2: 100 : 2000
var
Le mot clé var déclare une variable dont la portée (scope) est plus large de celle de variable let. Elle s'est rendue par le programme intérieur du bloc qui la définit, dans des blocs enfants, même s'est rendue en dehors du bloc qui la déclare.
if(true) {
var a = 200;
console.log(a); // 200
}
console.log(a); // 200
Si vous déclarez deux variables avec le même nom avec le mot clé var, une variable est déclaré dans le bloc père, une autre dans le bloc enfant, le programme considère que ces deux variables sont de même (Dans la même position du mémoire).
var i = 1000;
var j = 2000;
if(true) {
i = 100; // Assign new value
var j = 200; // Assign new value
console.log("Test1: " + i + " : " + j); // Test1: 100 : 200
}
console.log("Test2: "+ i + " : " + j); // Test2: 100 : 200
Les variables qui sont déclarées dans le mot clé var dans une fonction se sera uniquement rendu compte par le programme dans la même fonction. Elle ne se sera pas rendue compte en dehors de la fonction.
// A function
var test = function() {
var a = 200;
console.log(a); // 200
}
// Call function.
test();
console.log(a); // Not work!!
const
Le mot clé const sert à déclarer un constant. Lorsque vous déclarez un constant, vous devez toujours attribuer une valeur à ce constant. Mais vous ne pouvez pas attribuer une nouvelle valeur à cette variable. Il est à noter que: Comme la variable let, la variable const contient la portée de bloc (block scope).
// Declare a constant with a value
const greeting = "Hello";
// Assign new value to 'greeting'
greeting = "Hi"; // ==> Error!!
// Declare a constant without a value
const i ; // ==> Error!!
Une variable est déclaré avec le mot clé const, et elle sera un constant si vous ne pouvez pas l'attribuer une nouvelle valeur, mais elle n'est pas immuable (immutable), vous pouvez changer ses property.
Observez l'exemple ci-dessous: une variable est déclaré avec le mot clé const, dont la valeur est un objet avec plusieurs property. Vous pouvez attribuer de nouvelles valeurs pour ses property de cet objet.
// Declaring a constant is an object
const person = {
name: "Clinton",
gender : "Female"
};
console.log(person.name); // Clinton
// Can assign new values to properties of const object.
person.name = "Trump";
person.gender = "Male";
console.log(person.name); // Trump
// ** Error! (Cannot assign new value to const variable).
person = {
name : "Trump";
}
+ const: Object.freeze()
La méthode Object.freeze() vous aide à geler (freeze) un objet. Vous ne pouvez pas changer ni attribuer une nouvelle valeur à ses property.
Object.freeze()
// Declaring a constant is an object
const person = {
name: "Clinton",
gender : "Female"
};
console.log(person.name); // Clinton
Object.freeze(person); // Freeze object 'person'.
person.name = "Trump";
console.log(person.name); // Clinton
Tutoriels de programmation ECMAScript, Javascript
- Introduction à Javascript et ECMAScript
- Démarrage rapide avec Javascript
- Boîte de dialogue Alert, Confirm, Prompt en Javascript
- Démarrage rapide avec JavaScript
- Variables dans JavaScript
- Opérations sur les bits
- Les Tableaux (Array) en JavaScript
- Boucles dans JavaScript
- Le Tutoriel de JavaScript Function
- Le Tutoriel de JavaScript Number
- Le Tutoriel de JavaScript Boolean
- Le Tutoriel de JavaScript String
- Le Tutoriel de instruction JavaScript if/else
- Le Tutoriel de instruction JavaScript switch
- Tutoriel de gestion des erreurs JavaScript
- Le Tutoriel de JavaScript Date
- Le Tutoriel de JavaScript Module
- L'histoire des modules en JavaScript
- Fonctions setTimeout et setInterval dans JavaScript
- Le Tutoriel de Javascript Form Validation
- Le Tutoriel de JavaScript Web Cookie
- Mot clé Void dans JavaScript
- Classes et objets dans JavaScript
- Techniques de simulation classe et héritage en JavaScript
- Héritage et polymorphisme dans JavaScript
- Comprendre Duck Typing dans JavaScript
- Le Tutoriel de JavaScript Symbol
- Le Tutoriel de JavaScript Set Collection
- Le Tutoriel de JavaScript Map Collection
- Comprendre JavaScript Iterable et Iterator
- Expression régulière en JavaScript
- Le Tutoriel de JavaScript Promise, Async Await
- Le Tutoriel de Javascript Window
- Le Tutoriel de Javascript Console
- Le Tutoriel de Javascript Screen
- Le Tutoriel de Javascript Navigator
- Le Tutoriel de Javascript Geolocation API
- Le Tutoriel de Javascript Location
- Le Tutoriel de Javascript History API
- Le Tutoriel de Javascript Statusbar
- Le Tutoriel de Javascript Locationbar
- Le Tutoriel de Javascript Scrollbars
- Le Tutoriel de Javascript Menubar
- Le Tutoriel de Javascript JSON
- La gestion des événements en JavaScript
- Le Tutoriel de Javascript MouseEvent
- Le Tutoriel de Javascript WheelEvent
- Le Tutoriel de Javascript KeyboardEvent
- Le Tutoriel de Javascript FocusEvent
- Le Tutoriel de Javascript InputEvent
- Le Tutoriel de Javascript ChangeEvent
- Le Tutoriel de Javascript DragEvent
- Le Tutoriel de Javascript HashChangeEvent
- Le Tutoriel de Javascript URL Encoding
- Le Tutoriel de Javascript FileReader
- Le Tutoriel de Javascript XMLHttpRequest
- Le Tutoriel de Javascript Fetch API
- Analyser XML en Javascript avec DOMParser
- Introduction à Javascript HTML5 Canvas API
- Mettre en évidence le code avec la bibliothèque Javascript de SyntaxHighlighter
- Que sont les polyfills en science de la programmation?
Show More