Comprendre les Variables en JavaScript

Salut HaWkers, c'est le troisieme article de notre serie d'articles qui vont couvrir l'approfondissement de notre Roadmap JavaScript - TOUT ce que vous devez Apprendre. Si vous ne savez pas de quoi je parle, cliquez sur le lien precedent.

Bon, commencons !

Dans l'univers de la programmation, les variables ont un role fondamental. En JavaScript, ce role est amplifie par sa dynamicite et sa versatilite. Cet article vise a elucider ce que sont les variables, comment les declarer, et comment elles se comportent dans l'environnement JavaScript.

Types de Donnees dans les Variables

En JavaScript, les variables peuvent stocker differents types de donnees. Alors que certains langages exigent que vous declariez explicitement le type de donnees d'une variable, JavaScript est dynamiquement type. Cela signifie que le type de donnees d'une variable peut changer pendant l'execution du programme. Quelques-uns des types les plus courants incluent :

Number : Pour les nombres, entiers ou decimaux.
String : Pour les sequences de caracteres.
Boolean : Pour les valeurs vrai ou faux.
Object : Pour les collections de donnees ou instances de constructeurs.
Undefined : Pour les variables non initialisees.
Null : Represente l'absence de valeur.

Variables et Types de Donnees : Un Regard Plus Approfondi

En JavaScript, le type d'une variable est determine par sa valeur :

let x = 10; // Number
let y = 'HaWkers!'; // String
let z = true; // Boolean
console.log(typeof x); // Retourne "number"
console.log(typeof y); // Retourne "string"
console.log(typeof z); // Retourne "boolean"

Cela nous permet d'utiliser la meme variable pour differents types de donnees :

let data = 2023;
console.log(data); // 2023

data = 'JavaScript';
console.log(data); // JavaScript

Que sont les variables ?

Les variables, en termes simples, sont des "boites" ou nous stockons des valeurs. Imaginez que vous avez une serie de tiroirs, et dans chacun d'eux, vous gardez un objet different. Les variables fonctionnent de maniere similaire, stockant des donnees qui peuvent etre des nombres, des strings, des objets, entre autres.

Declarer des variables

En JavaScript, nous avons plusieurs facons de declarer des variables, les plus courantes etant a travers les mots-cles var, let, const. Chacune d'elles a ses particularites :

var : C'etait la forme traditionnelle de declarer des variables avant ES6. Les variables declarees avec var sont, par defaut, hissees (hoisting) et ont une portee de fonction.
let : Introduit avec ES6, permet de declarer des variables avec une portee de bloc, evitant de nombreux problemes lies a var.
const : Egalement d'ES6, est utilise pour declarer des constantes, c'est-a-dire des valeurs qui ne peuvent pas etre reassignees apres leur declaration.

Var, Let ou Const ? Une Question d'Immutabilite

Lors du choix entre var, let et const, l'immutabilite est une consideration importante. Quand vous declarez une variable avec const, vous ne dites pas seulement que la variable ne peut pas etre reassignee ; vous faites une affirmation sur l'immutabilite :

const monArray = [1, 2, 3];
monArray.push(4);
// C'est permis !

monArray = [1, 2, 3, 4];
// Cela causera une erreur !

Bien que nous puissions modifier l'array declare comme constante, nous ne pouvons pas lui reassigner une nouvelle valeur.

Initialisation vs. Declaration

En JavaScript, il est possible de declarer une variable sans l'initialiser :

let maVariable;
console.log(maVariable);
// Retourne undefined

Mais, nous pouvons lui assigner une valeur plus tard :

maVariable = 'Maintenant j\'ai une valeur !';
console.log(maVariable);
// Retourne "Maintenant j'ai une valeur !"

Hoisting

Le hoisting est un comportement particulier de JavaScript qui "deplace" les declarations de variables vers le haut de leur portee. En pratique, cela signifie qu'une variable peut etre utilisee avant d'etre declaree. Cependant, c'est une pratique recommandee de declarer les variables au debut de leur portee pour eviter les confusions.

Regles de nomenclature

Bien que JavaScript soit un langage flexible, il existe quelques regles pour nommer les variables :

Les noms peuvent contenir des lettres, des chiffres, des underscores (_) et des signes dollar ($), mais ne peuvent pas commencer par un chiffre.
Il n'est pas permis d'utiliser des mots-cles du langage comme nom de variable.
Les noms de variables sont sensibles a la casse, c'est-a-dire que Nom et nom sont differents.
Il est recommande d'utiliser la convention camelCase pour les noms de variables avec plus d'un mot.

Variables Temporelles avec les Template Strings

Au lieu de concatener des variables dans des strings en utilisant le signe plus (+), le JavaScript moderne offre les Template Strings pour incorporer des variables dans des strings :

let nom = 'HaWker';
console.log(`Bonjour, ${nom} !`);

Cela facilite la lecture et le formatage des textes qui incluent des variables.

Operations avec les Variables

Vous n'etes pas limite a simplement stocker des valeurs dans des variables. Vous pouvez aussi executer des operations :

let a = 5;
let b = 10;
let somme = a + b;
console.log(`La somme de ${a} et ${b} est ${somme}.`);
// Retourne "La somme de 5 et 10 est 15."

Portee des variables

La portee d'une variable fait reference a la partie du code ou elle peut etre accedee. En JavaScript, nous avons essentiellement trois portees : globale, de fonction et de bloc.

Portee Globale (global scope)

Les variables declarees en dehors de toute fonction ou bloc appartiennent a la portee globale. Elles peuvent etre accedees de n'importe ou dans le code, ce qui, parfois, peut causer des conflits et des erreurs inattendues.

Precautions avec les Variables Globales

Les variables globales peuvent etre utiles, mais elles sont aussi risquees. Elles peuvent etre accedees ou modifiees de n'importe ou dans le code, ce qui peut entrainer des comportements inattendus :

var globalVar = 'je suis globale !';

function modifier() {
  globalVar = 'j\'ai ete modifiee !';
}

modifier();
console.log(globalVar);
// Cela imprimera : j'ai ete modifiee !

C'est pourquoi il est conseille de limiter l'utilisation des variables globales et de preferer des portees plus restreintes autant que possible.

Portee de fonction (function scope)

Les variables declarees a l'interieur d'une fonction en utilisant var ont une portee de fonction. Cela signifie qu'elles ne peuvent etre accedees qu'a l'interieur de cette fonction.

Difference

La principale difference entre la portee globale et la portee de fonction est l'accessibilite. Alors que les variables de portee globale sont accessibles dans tout le code, celles de portee de fonction sont restreintes a la fonction ou elles ont ete declarees. Avec l'avenement d'ES6 et l'introduction de let, nous avons aussi la portee de bloc, qui limite l'acces a un certain bloc de code, comme les boucles ou les conditionnelles.

Fonction vs. Bloc : Visualiser les Portees

JavaScript ES6 a introduit let et const, qui ont une portee de bloc. Voyons la difference entre la portee de fonction et la portee de bloc :

function testFonction() {
  var porteeFonction = 'Je suis dans la fonction !';
  if (true) {
    let porteeBloc = 'Je suis dans le bloc !';
    console.log(porteeFonction);
    // Retourne "Je suis dans la fonction !"
    console.log(porteeBloc);
    // Retourne "Je suis dans le bloc !"
  }
  console.log(porteeFonction);
  // Retourne "Je suis dans la fonction !"

  // console.log(porteeBloc);
  // Cela causerait une erreur
}

testFonction();

Conclusion

Eh bien HaWkers, comme vous pouvez le constater, comprendre les variables est crucial pour maitriser JavaScript ou tout autre langage de programmation. En comprenant les nuances de declaration, hoisting et portee, vous serez mieux prepare pour ecrire du code propre, efficace et sans erreurs.

Retour au Roadmap JavaScript - TOUT ce que vous devez Apprendre.