JavaScript - Variables

Salut là, future super star du codage ! ? Bienvenue dans notre incroyable voyage à travers le monde des variables JavaScript. En tant que votre professeur de sciences informatiques du coin, je suis ravi de vous guider à travers ce concept fondamental. Alors, mettez votre casque de pensée virtuel, et plongeons dedans !

Variables JavaScript

Imaginez que vous organisez une fête (car qui n'aime pas une bonne fête de codage, hein ?). Vous avez besoin d'un endroit pour stocker toutes les informations importantes - comme combien de pizzas commander, qui vient, et quels jeux jouer. En JavaScript, les variables sont comme ces conteneurs de stockage pour votre planification de fête. Elles conservent les données dont nous avons besoin pour faire fonctionner nos programmes.

Commençons par un exemple simple :

let partyGuests = 10;

Ici, nous avons créé une variable appelée partyGuests et lui avons affecté la valeur 10. C'est comme écrire sur un post-it, "Nous attendons 10 invités."

Déclaration de Variables en JavaScript

Maintenant, parlons de la manière dont nous créons réellement ces variables. En JavaScript, nous avons trois façons de déclarer des variables :

var - La vieille école (fonctionne toujours, mais a quelques bizarreries)
let - Le nouveau venu cool (utilisez-le pour des variables qui pourraient changer)
const - Le gardien fidèle (utilisez-le pour des variables qui ne changeront pas)

Voyons-les en action :

var oldSchoolCool = "Je suis une variable var";
let modernAndFlexible = "Je suis une variable let";
const rockSolid = "Je suis une variable const";

Pensez à var comme aux vinyles de votre grand-père, let comme à votre CD réinscriptible, et const comme à votre chanson préférée que vous ne souhaitez jamais modifier.

Initialisation des Variables Using l'Opérateur d'Affectation

Souvenez-vous du signe = de votre cours de mathématiques ? En JavaScript, il s'appelle l'opérateur d'affectation. C'est comme une baguette magique qui met des valeurs dans nos variables :

let magicNumber;  // Déclaration
magicNumber = 42; // Initialisation

// Ou nous pouvons faire les deux à la fois :
let theAnswerToEverything = 42;

Astuce pro : Always initializez vos variables. C'est comme vérifier que vous avez mis de la nourriture dans le réfrigérateur avant d'inviter des amis !

Types de Données JavaScript

JavaScript est assez flexible en ce qui concerne le type de données que nous pouvons stocker dans des variables. Voici les principaux types :

Type de Donnée	Exemple	Description
Number	`let age = 25;`	Pour les valeurs numériques
String	`let name = "Alice";`	Pour le texte
Boolean	`let isAwesome = true;`	Pour les valeurs vrai/faux
Undefined	`let mystery;`	Pour les variables sans valeur
Null	`let emptyBox = null;`	Pour les variables intentionnellement vides
Object	`let person = {name: "Bob", age: 30};`	Pour les structures de données complexes
Array	`let fruits = ["apple", "banana", "cherry"];`	Pour les listes d'items

Voyons-les en action :

let myAge = 30;
let myName = "JavaScript Ninja";
let canCode = true;
let futureSkill;
let emptyMind = null;
let myProfile = {job: "Coder", hobby: "Boire du café"};
let myTodoList = ["Apprendre JS", "Construire des choses incroyables", "Changer le monde"];

console.log(typeof myAge);  // Output: number
console.log(typeof myName);  // Output: string
console.log(typeof canCode);  // Output: boolean
console.log(typeof futureSkill);  // Output: undefined
console.log(typeof emptyMind);  // Output: object (cette particularité de JavaScript !)
console.log(typeof myProfile);  // Output: object
console.log(typeof myTodoList);  // Output: object (les tableaux sont des objets spéciaux en JS)

Noms de Variables JavaScript (Identifiants)

Nommer des variables, c'est comme nommer vos animaux de compagnie - il y a des règles, mais vous pouvez quand même être créatif ! Voici les règles clés :

Commencez par une lettre, un underscore (_) ou un signe dollar ($)
Peut contenir des lettres, des chiffres, des underscores ou des signes dollar
Est sensible à la casse (myVar ≠ myvar)
Ne peut pas utiliser des mots-clés réservés (comme let, const, function, etc.)

Bons exemples :

let camelCase = "Je suis nommé d'après un animal bossu";
let _underscoreFirst = "Je commence par un underscore";
let $dollarSign = "Je me sens riche";
let mix123 = "Je suis un mélange de lettres et de chiffres";

Mauvais exemples :

let 123abc = "Je commence par un nombre, donc je suis invalide";
let my-variable = "Les tirets ne sont pas autorisés dans les noms de variables";
let let = "Je suis un mot-clé réservé, donc je suis interdit";

Le Signe Dollar ($) et le Souligné (_)

Le signe dollar ($) et le souligné (_) sont des caractères spéciaux en JavaScript. Ils sont souvent utilisés dans les noms de bibliothèques ou à des fins spéciales :

let $_$ = "Je suis un nom de variable valide, mais je parais bizarre";
let _privateVariable = "Je suis souvent utilisé pour indiquer une variable privée";
let $jQueryObject = "Je suis souvent utilisé dans jQuery pour représenter un objet jQuery";

Valeur de Variable Non Définie en JavaScript

Lorsque vous déclarez une variable sans l'initialiser, elle reçoit une valeur spéciale appelée undefined :

let myFuturecar;
console.log(myFuturecar);  // Output: undefined

// Cela diffère de null :
let myEmptyGarage = null;
console.log(myEmptyGarage);  // Output: null

Pensez à undefined comme "J'ai oublié de mettre une valeur ici," et à null comme "J'ai intentionnellement laissé cela vide."

Portée des Variables JavaScript

La portée en JavaScript est comme la visibilité d'un ninja. Certaines variables peuvent être vues partout (portée globale), tandis que d'autres ne sont visibles que dans certaines zones (portée locale).

let globalNinja = "Je suis visible partout !";

function stealthMission() {
let localNinja = "Je suis seulement visible à l'intérieur de cette fonction";
console.log(globalNinja);  // Ça fonctionne
console.log(localNinja);   // Ça fonctionne aussi
}

console.log(globalNinja);  // Ça fonctionne
console.log(localNinja);   // Ça génère une erreur - localNinja n'est pas défini ici

Souvenez-vous, ce qui se passe à Vegas... Je veux dire, dans une fonction, reste dans la fonction (sauf si vous le retournez explicitement).

Et voilà, mon apprenti codeur ! Vous venez de monter en niveau vos compétences JavaScript. Souvenez-vous, la pratique rend parfait, donc continuez à coder et à expérimenter. Avant de savoir, vous serez jonglant avec des variables comme un artiste de cirque ! ??‍♀️

Bonne programmation, et puissent les variables toujours être en votre faveur ! ?✨

Credits: Image by storyset

Tutoriel précédent:

JavaScript - Commentaires

Tutoriel suivant:

JavaScript - Instruction let