Les Variables
Présentation
Les variables jouent un rôle fondamental au sein du processus de programmation, agissant comme des éléments clés de stockage et de manipulation des données. Chacune d'entre elles peut être assimilée à une boîte soigneusement étiquetée, offrant un emplacement destiné à contenir une valeur spécifique. Cette valeur peut adopter différentes natures, telles qu'un nombre, du texte, ou même d'autres types de données.
Au cours de l'exécution d'un programme, les valeurs à l'intérieur des variables ne sont pas fixes. Elles peuvent être modifiées, actualisées et manipulées au fur et à mesure que le programme progresse. En JavaScript, les variables peuvent même changer de nature au fil du temps, ce qui ajoute une flexibilité particulièrement puissante.
Création
Nommage
En JavaScript, un identifiant (nom d'une variable ou d'une constante) doit respecter plusieurs règles définies par le langage.
- Il commence par une lettre non accentuée, un _ ou un $.
- Les caractères suivants peuvent être des lettres, des chiffres, _ ou $. Les autres caractères Unicode sont autorisés mais rarement utilisés, car ils diminuent la lisibilité.
- JavaScript est sensible à la casse. maVariable et mavariable désignent deux identifiants distincts.
- Les mots-clés réservés ne peuvent pas servir de nom.
Variables
Les variables utilisent la convention camelCase. Le premier mot est en minuscule, puis chaque mot suivant commence par une majuscule. C'est la forme la plus utilisée pour les valeurs qui évoluent ou qui sont propres à une zone du code.
-
Exemples courants en camelCase :
- prixTotal
- nombreUtilisateurs
- quantiteRestante
- estEnStock
Constantes
Les constantes se divisent en deux catégories selon leur rôle. Elles n'ont pas la même forme, car elles ne transmettent pas la même intention.
-
Constantes locales en camelCase :
Ce sont des valeurs qui ne changent pas, mais qui n'ont de sens que dans un endroit précis du code.
Elles servent souvent à nommer proprement un calcul intermédiaire, une valeur temporaire ou un texte fixe.
Exemples :- tauxDeRemise
- messageErreur
- tempsDePause
-
Constantes symboliques en UPPER_SNAKE_CASE :
Elles représentent des valeurs fixes « de référence » qui servent à plusieurs endroits du code,
ou qui expriment une règle stable, un paramètre, une limite, une durée ou une configuration.
Leur écriture entièrement en majuscules attire l'attention et signale qu'elles jouent un rôle central.
Exemples :- URL_API
- NOMBRE_MAXIMUM_TENTATIVES
- DUREE_ANIMATION_MS
La différence fondamentale repose sur l'intention.
- camelCase : valeur locale, utilisée dans un contexte précis, souvent interne.
- UPPER_SNAKE_CASE : valeur générale, stable, utilisée comme point de repère dans plusieurs parties du code.
Cette distinction rend le code plus lisible. En voyant un nom en majuscules, on comprend immédiatement qu'il s'agit d'une constante importante et partagée, alors qu'un nom en camelCase indique une valeur propre à une zone limitée du programme.
Déclaration
Pour réaliser une déclaration de variable, vous pouvez utiliser l'instruction let :
// Déclarations de variables.
let ageMariee;
let nomDeJeuneFille;
Il est tout à fait possible d'attribuer une valeur initiale dès la déclaration de la variable :
// Déclarations de variables avec initialisation.
let reponseUltime = 42;
let tvaBelge = 'vingt et un pour cent';
let estValide = true;
let fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
Une variable peut aussi être initialisée à partir de la valeur d'une autre variable :
// Déclarations de variables avec initialisation.
let reponseUltime = 42;
let reponseUltimeCopie = reponseUltime;
console.log(reponseUltimeCopie); // Affiche: 42
Il existe une instruction plus ancienne, var, qui peut être utilisée pour déclarer des variables. Cependant, à la différence des variables déclarées avec l'instruction let, celles déclarées avec var ont une portée globale. Cette caractéristique peut complexifier la compréhension et la maintenance du code. Par conséquent, il est recommandé d'éviter son utilisation. La portée des variables nécessitant plus de connaissances, nous y reviendrons lors du chapitre consacré aux fonctions.
Affectation
Après avoir déclaré une variable, vous avez la possibilité de lui attribuer de nouvelles valeurs autant de fois que vous le souhaitez :
// Déclaration de variable (sans valeur initiale).
let ageMariee;
// Initialisation (première affectation après déclaration).
ageMariee = 51;
// Déclaration et initialisation.
let vingtPourCent = 0.2;
let tvaBelge = 'vingt et un pour cent';
// Réaffectation de valeurs.
tvaBelge = vingtPourCent;
tvaBelge = 0.21;
Constantes
Les constantes, tout comme les variables, servent à stocker des données. Cependant, comme leur nom l'indique, elles doivent impérativement être initialisées lors de leur déclaration, et il sera ensuite impossible de leur attribuer une nouvelle valeur. Pour déclarer une constante, il faut utiliser l'instruction const à la place de let :
/*
Déclaration de constantes.
Le style du nom dépend du rôle que joue la valeur dans le programme.
*/
// Constante symbolique : valeur de référence stable utilisée en plusieurs endroits.
// Elle est nommée en UPPER_SNAKE_CASE.
const TAUX_TVA_BELGE = 0.21;
// Constante locale : valeur utilisée uniquement dans cet exemple.
// Elle est nommée en camelCase.
const reponseUltime = 42;
/*
Remarque :
Dans notre monde, « 42 » n'est qu'un nombre ordinaire.
Mais si nous vivions dans l'univers du roman
« Le Guide du voyageur galactique » (The Hitchhiker's Guide to the Galaxy),
où 42 est présenté comme la réponse ultime à tout,
alors cette valeur deviendrait une véritable constante symbolique.
Dans un contexte pareil, on pourrait l'écrire en UPPER_SNAKE_CASE, par exemple :
const REPONSE_ULTIME = 42;
*/
Mode strict
Le strict mode corrige plusieurs comportements permissifs du JavaScript historique. Il empêche la création involontaire de variables globales, refuse l'usage de certains noms réservés pour des variables ou des paramètres et signale aussi des situations ambiguës comme les paramètres dupliqués dans une fonction. Ces restrictions rendent l'exécution du code plus prévisible et facilitent la détection d'erreurs dès leur apparition.
Pour l'activer, on écrit 'use strict' au début d'un script.
// Activer le mode strict pour tout le script.
'use strict';
// Code JavaScript...
let reponseUltime = 42;
Sans le mode strict, JavaScript accepte certains comportements qui peuvent rendre un programme difficile à comprendre. Le cas le plus fréquent survient lorsqu'une variable est utilisée sans avoir été déclarée. JavaScript crée alors une variable globale implicite, comme si elle avait été définie avec var au niveau global.
// Sans 'use strict'
// Déclaration correcte d'une variable appelée "score".
let score = 10;
// Faute de frappe : "scroe" au lieu de "score".
// Sans strict mode, JavaScript ne signale aucune erreur.
// Il crée automatiquement une variable globale implicite nommée "scroe",
// exactement comme si l'on avait écrit "var scroe = 20".
scroe = 20;
// La variable "score" n'a jamais été modifiée.
// Ce type d'erreur est difficile à repérer, car le programme "fonctionne"
// tout en donnant un résultat incorrect.
console.log(score); // Affiche 10
// Avec 'use strict'
'use strict';
// Déclaration correcte.
let score = 10;
// Le mode strict interdit la création de variables implicites.
// Cela empêche deux problèmes fréquents :
// - créer une variable par accident à cause d'une faute de frappe
// - manipuler des variables jamais déclarées, qui deviendraient globales
// La même faute de frappe déclenche donc une erreur immédiate.
scroe = 20; // ReferenceError : "scroe" n'existe pas
console.log(score);
En mode strict, chaque nom utilisé dans le code doit être déclaré explicitement avant de servir au stockage d'une valeur, que ce soit avec let pour une variable ou const pour une constante. Ce comportement empêche la création involontaire de valeurs globales implicites et améliore la fiabilité du code.
L'instruction var existe encore mais elle crée des variables dont la portée suit d'anciennes règles moins prévisibles. Pour cette raison, il vaut mieux éviter son utilisation.
Lorsque vous travaillerez avec des modules JavaScript, le mode strict sera appliqué automatiquement. Dans les scripts classiques, ajouter 'use strict' reste un bon réflexe pour obtenir un comportement plus fiable et plus cohérent.
Types de données
Pour identifier les différents types de données, nous aurons besoin de l'opérateur typeof. Il est possible de lui transmettre une variable, une constante ou une valeur :
const reponseUltime = 42;
// Utilisation de l'opérateur "typeof" pour obtenir le type d'une valeur.
console.log(typeof reponseUltime); // Affiche: "number" (nombre)
console.log(typeof 'Claudy'); // Affiche: "string" (chaîne de caractère)
Les valeurs primitives
Les valeurs primitives sont les valeurs de base du langage. Lorsque vous utilisez des valeurs primitives comme arguments pour les fonctions ou que vous les affectez à d'autres variables, une copie de la valeur est créée. Les modifications apportées à la copie n'affectent pas l'original. Actuellement, il y a 7 types de valeurs primitives en Javascript :
- Nombre (Number)
- Chaîne de caractères (String)
- Booléen (Boolean)
- Grand entier (Bigint)
- Symbole (symbol)
- Indéfini (Undefined)
- Nul (Null)
const reponseUltime = 42;
let copieReponseUltime = reponseUltime;
// Afficher la valeur de copieReponseUltime.
console.log(copieReponseUltime); // Affiche: 42
// Réassignation de copieReponseUltime.
copieReponseUltime = 43;
// Afficher la valeur des deux variables.
console.log(reponseUltime); // Affiche: 42
console.log(copieReponseUltime); // Affiche: 43
Nombre (Number)
Les nombres en Javascript peuvent être entiers (int) ou décimals (float) :
const nombreEntier = 42;
const nombreDecimal = 0.21;
console.log(typeof nombreEntier); // Affiche: "number"
console.log(typeof nombreDecimal); // Affiche: "number"
Il est bien entendu possible de réaliser des opérations arithmétiques sur ces types de valeurs. Prenons l'exemple d'une simple addition :
const nombreEntier = 42;
const nombreDecimal = 0.21;
const somme = nombreEntier + nombreDecimal;
console.log(somme); // Affiche: 42.21
console.log(typeof somme); // Affiche: "number"
L'opérateur d'incrémentation ++, particulièrement utile dans le contexte des boucles (dont nous discuterons plus tard), permet d'augmenter une valeur de 1 :
let reponseUltime = 42;
// Équivalent à : reponseUltime = reponseUlteime + 1.
reponseUltime++;
console.log(reponseUltime); // Affiche: 43
L'opérateur d'affectation raccourci += permet d'augmenter une valeur du nombre désiré :
let reponseUltime = 42;
// Équivalent à : reponseUltime = reponseUlteime + 10.
reponseUltime += 10;
console.log(reponseUltime); // Affiche: 52
L'opérateur modulo symbolisé par le signe %, est un outil qui permet de récupérer le reste d'une division euclidienne. En d'autres termes, il nous dit combien il reste après avoir effectué une division entière entre deux nombres :
Cette opération est précieuse dans divers contextes, notamment pour déterminer si un nombre est pair ou impair. Si le reste de la division euclidienne par deux est zéro, cela signifie que le nombre est pair. S'il y a un reste, le nombre est impair :
// La division euclidienne de 10 par 2 n'a pas de reste.
// Comme le reste est égal à 0, on peut en déduire que 10 est un nombre pair.
console.log(10 % 2); // Affiche : 0
// La division euclidienne de 9 par 2 donne un reste de 1.
// Comme le reste est égal à 1, on peut en déduire que 9 est un nombre impair.
console.log(9 % 2); // Affiche : 1
Cette liste ne couvre pas tous les opérateurs arithmétiques, et si vous souhaitez explorer davantage ce sujet, vous pouvez consulter MDN Web Docs.
Chaîne de caractère (String)
Les chaînes de caractères peuvent contenir du texte, des chiffres et des caractères spéciaux. Lors de leur assignation, elles doivent être enveloppées entre des guillemets simples (single quotes) '' ou des guillemets doubles (double quotes) "" :
const verbeAuHasard = "s'évader";
console.log(typeof verbeAuHasard); // Affiche: "string"
Si la chaîne de caractères comporte les mêmes guillemets que ceux que tu utilises pour délimiter la chaîne, il est nécessaire d'échapper ce caractère en le préfixant avec une barre oblique inverse (backslash) \ :
const verbeAuHasard = 's\'évader';
console.log(typeof verbeAuHasard); // Affiche: "string"
Dans les chaînes de caractères, il est possible de forcer le passage à la ligne suivante en utilisant la séquence de saut de ligne \n (cette séquence est gérée par le navigateur et non pas par le système d'exploitation) :
const conjugaisonManger = 'je mange \n tu manges \n il mange \n ...';
console.log(typeof conjugaisonManger); // Affiche: "string"
console.log(conjugaisonManger);
/* Affiche:
je mange
tu manges
il mange
...
*/
En Javascript, lors de la délimitation des chaînes de caractère, il n'y a pas de différence fondamentale entre l'utilisation des guillemets simples et des guillemets doubles.
Il existe une troisième façon de délimiter une chaîne de caractères en utilisant les accents graves (backquotes) ``. Celle-ci offre plusieurs avantages. Elle permet d'éviter de devoir échapper les simples et les doubles guillemets. Elle prend en compte les sauts de ligne sans avoir besoin d'utiliser des caractères de saut de ligne \n. Elle possède un dernier avantage que nous aborderons lors du chapitre sur les opérateurs pour chaînes de caractères.
Bien que cette façon de délimiter les chaînes de caractères semble n'offrir que des avantages, il faut savoir qu'elle est relativement récente (2015) et n'est pas compatible avec les vieux navigateurs tel que Internet Explorer 11 :
const conjugaisonManger =
`
je mange
tu manges
il mange
...
`;
console.log(typeof conjugaisonManger); // Affiche: "string"
console.log(conjugaisonManger);
/* Affiche:
je mange
tu manges
il mange
...
*/
Notez qu'il est possible d'effectuer la fusion de plusieurs chaînes de caractères pour en créer une nouvelle. C'est ce qu'on appelle la concaténation et cela peut être réalisé en utilisant l'opérateur + :
const prenom = "Claudy";
const nom = "Focan";
// Combiner les chaînes de caractère "prenom" et "nom"
// à l'aide de l'opérateur de concaténation "+".
const nomComplet = prenom + " " + nom;
// Afficher le résultat de la concaténation.
console.log(nomComplet); // Affiche : "Claudy Focan"
L'opérateur d'affectation raccourci += fonctionne aussi avec les chaînes de caractères :
let cadavreExquis = 'Claudy';
// Concaténer la chaîne ' aime' à la suite de la valeur stockée
// dans la variable cadavreExquis ('Claudy').
cadavreExquis += ' aime';
// Concaténer la chaîne ' les poneys !' à la suite de la valeur stockée
// dans la variable cadavreExquis ('Claudy aime').
cadavreExquis += ' les poneys !';
// Afficher le résultat de la concaténation.
console.log(cadavreExquis); // Affiche : "Claudy aime les poneys !"
Remarquez que lorsque vous utilisez les accents graves (backquotes), vous avez la possibilité d'effectuer une concaténation implicite et d'insérer dynamiquement la valeur d'une variable dans la chaîne en la délimitant avec ${} :
// Déclaration des valeurs utilisées dans le message.
const prenom = 'Claudy';
const nom = 'Focan';
const age = 52;
// Construction d'une phrase à l'aide d'un template de chaîne.
// Les expressions placées entre ${ ... } sont remplacées automatiquement
// par les valeurs des variables au moment de l'exécution.
const message = `Je m'appelle ${prenom} ${nom} et j'ai ${age} ans.`;
// Affichage du message final dans la console.
console.log(message); // Affiche : "Je m'appelle Claudy Focan et j'ai 52 ans."
Il existe aussi tout un tas de fonctions prédéfinies qui permettent de manipuler les chaînes de caractères. Voici une exemple d'utilisation de la fonction replace() permet de rechercher et de remplacer des sous-chaînes dans une chaîne principale :
const phrase = "Claudy Focan aime les poneys !";
// La méthode replace() agit sur la chaîne stockée dans la constante "phrase".
// Elle cherche le texte passé en premier argument ('aime les poneys'),
// puis le remplace par celui passé en second argument ('est louche').
// La méthode ne modifie pas la chaîne d'origine mais elle retourne une nouvelle chaîne.
const nouvellePhrase = phrase.replace('aime les poneys', 'est louche');
// Affichage du résultat obtenu.
console.log(nouvellePhrase); // Affiche : "Claudy Focan est louche !"
Booléen (Boolean)
Les booléens sont utilisés pour interroger une variable afin de déterminer si elle est vraie true ou fausse false. Il est recommandé de suivre les conventions de dénomination en préfixant le nom de la variable par "est" en français et "is" en anglais :
const estValide = true;
const estAdmin = false;
console.log(typeof estValide); // Affiche: "bool"
console.log(typeof estAdmin); // Affiche: "bool"
Indéfini (Undefined)
Le terme "undefined" est utilisé pour les variables qui n'ont pas été initialisées, c'est à dire qui n'ont encore reçu aucune assignation de valeur :
let variableNonInitialisee;
console.log(typeof variableNonInitialisee); // Affiche: "undefined"
Nul (Null)
Si vous souhaitez "vider" une variable, il est tout à fait possible de lui affecter la valeur undefined. Cependant, cette approche est déconseillée en raison de la confusion potentielle qu'elle pourrait créer entre une variable qui n'a pas encore été initialisée et une variable qui a été intentionnellement "vidée" car elle n'est plus utile. Il est généralement préférable d'assigner une valeur explicite, comme null, à une variable pour indiquer clairement qu'elle est délibérément dépourvue de contenu :
let variableTemporaire = 'saperlipopette';
variableTemporaire = null;
console.log(typeof variableTemporaire); // Affiche: "object"
En Javascript, le type de la valeur null est souvent source de confusion. Bien que, pour des raisons historiques, l'opérateur typeof renvoie "object" lorsqu'on le teste, il est important de noter que null demeure une valeur primitive.
Exercices - Part 1
Exo-variables-1
À partir des deux constantes suivantes :
const a = 10;
const b = 18;
- Créez une nouvelle constante nommée "moyenne" dans laquelle vous placerez le résultat de la moyenne de a et b
- À l'aide de ces 3 constantes et des outils de concaténation (implicite ou explicite), afficher le message suivant dans la console : La moyenne de 10 et 18 est égale à 14.
Exo-variables-2
Trouvez une solution pour obtenir un résultat de 4 en additionnant les deux valeurs suivantes :
let a = '2';
const b = 2;
Pour résoudre ce problème, vous aurez besoin d'utiliser une fonction prédéfinie que nous n'avons pas encore explorée, à savoir parseInt(). Je vous encourage à consulter la documentation MDN Web Docs et à utiliser leur moteur de recherche pour apprendre comment utiliser cette fonction.
Exo-variables-3
À partir des constantes suivantes :
const eleve1 = 'Sébastien';
const eleve2 = 'Martine';
const eleve1NoteMath = 4;
const eleve1NoteFrancais = 2;
Construisez la phrase suivante : Comme dirait Martine : " Sébastien est un cancre, il n'a que 3 de moyenne ! "
Les types complexes
Les types complexes en JavaScript, tels que les objets et les tableaux permettent de stocker et organiser des ensembles de données de manière flexible. Les objets peuvent contenir des propriétés de tout type, tandis que les tableaux sont spécialement conçus pour stocker des listes ordonnées d'éléments. Contrairement aux valeurs primitives (comme les nombres ou les chaînes de caractères), les objets et tableaux sont manipulés par référence. Cela signifie que lorsque vous affectez un objet ou un tableau à une autre variable, vous ne créez pas une copie, mais une référence au même élément. Toute modification de cette référence affectera donc l'objet ou le tableau d'origine.
Tableau (Array)
En Javascript, les tableaux sont des objet un peu particuliers. Contrairement aux objets génériques, ils sont spécialement conçus pour gérer des collections ordonnées d'éléments de manière optimisée :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
console.log(typeof fratrie); // Affiche: "object".
Dans le tableau, chaque élément peut être ciblé individuellement à l'aide de son index. En Javascript, le premier élément d'un tableau se situe à l'index 0 :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
console.log(fratrie[0]); // Affiche: Claudy.
console.log(fratrie[1]); // Affiche: Jean-Claude.
console.log(fratrie[2]); // Affiche: Fabienne.
Si l'on désire modifier la valeur d'un des éléments, on peut le cibler de la même façon et lui assigner une nouvelle valeur :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
fratrie[0] = 'Marc';
console.log(fratrie); // Affiche: ['Marc', 'Jean-Claude', 'Fabienne']
Maintenant que nous savons comment modifier les éléments d'un tableau, c'est l'occasion d'illustrant le principe de référence abordé en introduction des objets :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
const referenceFratrie = fratrie;
referenceFratrie[0] = 'Marc';
console.log(fratrie); // Affiche: ['Marc', 'Jean-Claude', 'Fabienne']
Pour manipuler les tableaux, il existe tout un tas de méthodes prédéfinies. En voici quelques-unes :
at() : Cette méthode vous permet d'accéder à un élément spécifique du tableau en fournissant un index en tant qu'argument. Il est possible d'utiliser des valeurs négatives pour accéder aux éléments depuis la fin du tableau.
const tableau = [10, 20, 30, 40, 50];
// Utilisation de la méthode "at()" avec des indices positifs, négatifs et hors limites.
console.log(tableau.at(2)); // Affiche : 30
console.log(tableau.at(-1)); // Affiche : 50 (le dernier élément)
includes() : Cette méthode permet de vérifier si une valeur se trouve dans un tableau. Elle retourne true si la valeur précisée en premier argument est présente dans le tableau, sinon elle retourne false. De plus, cette méthode peut prendre un second argument qui permet de préciser l'index à partir duquel commencer l'inspection :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
const inclutFabienne = fratrie.includes('Fabienne');
console.log(inclutFabienne); // Affiche : true
push() : Cette méthode ajoute un ou plusieurs éléments à la fin du tableau :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
fratrie.push('Natacha');
console.log(fratrie); // Affiche: ['Claudy', 'Jean-Claude', 'Fabienne', 'Natacha']
unshift() : Cette méthode ajoute un ou plusieurs éléments au début du tableau :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
fratrie.unshift('Natacha');
console.log(fratrie); // Affiche: ['Natacha', 'Claudy', 'Jean-Claude', 'Fabienne']
splice() : Cette méthode permet d'ajouter des éléments à n'importe quelle position du tableau en spécifiant l'indice de début et le nombre d'éléments à supprimer (dans ce cas, 0) :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
fratrie.splice(1, 0, 'Natacha');
console.log(fratrie); // Affiche: ['Claudy', 'Natacha', 'Jean-Claude', 'Fabienne']
concat() : Cette méthode crée une nouvelle version du tableau en concaténant un ou plusieurs tableaux ensemble. Elle ne modifie pas les tableaux d'origine :
const fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
const fratrieSuite = ['Natacha', 'Stef'];
const fratrieFusion = fratrie.concat(fratrieSuite);
console.log(fratrieFusion); // Affiche: ['Claudy', 'Jean-Claude', 'Fabienne', 'Natacha', 'Stef']
// La tableau initial, fratrie, reste inchangé.
console.log(fratrie); // Affiche: ['Claudy', 'Jean-Claude', 'Fabienne']
spread operator (...) : Tout comme concat(), cette méthode permet de fusionner les éléments de plusieurs tableaux dans un nouveau tableau :
let fratrie = ['Claudy', 'Jean-Claude', 'Fabienne'];
let fratrieSuite = ['Natacha', 'Stef'];
let fratrieFusion = [...fratrie, ...fratrieSuite];
console.log(fratrieFusion); // Affiche: ['Claudy', 'Jean-Claude', 'Fabienne', 'Natacha', 'Stef']
// La tableau initial, fratrie, reste inchangé.
console.log(fratrie); // Affiche: ['Claudy', 'Jean-Claude', 'Fabienne']
Il est envisageable d'inclure des tableaux à l'intérieur d'autres tableaux. Le ciblage s'effectue de la même façon qu'avec un tableau unidimensionnel, à la différence que vous spécifiez l'indice du tableau parent suivi des index de sa descendance jusqu'à l'élément désiré, comme ceci :
// Initialisation d'un tableau bidimensionnel.
const distribution = [
[ 'Claudy', 52, 'Photographe'],
[ 'Jean-Claude', 45, 'Prof. de sport'],
[ 'Laurence', 38, 'Gendarme']
];
// Affichage de l'élément situé à l'index 1 du tableau parent et à l'index 2 du tableau enfant.
console.log(distribution[1][2]);
// Affiche : Prof. de sport
Objet littéral
Un objet est une structure qui permet de stocker des données de manière organisée. Il peut accueillir n'importe quel type de données, qu'il s'agisse de types primitifs (comme des chaînes de caractères, des nombres ou des booléens) ou de types complexes (comme des tableaux, des objets ou des fonctions).
Les objets sont organisés à l'aide de propriétés et de méthodes. Les propriétés d'un objet sont similaires aux variables, car elles stockent des valeurs, mais elles sont spécifiquement liées à cet objet.
En plus des propriétés, un objet peut également contenir des méthodes, qui sont des fonctions associées à l'objet. Les méthodes permettent d'effectuer des actions en utilisant les propriétés de l'objet. Contrairement aux fonctions classiques, les méthodes sont liées à l'objet auquel elles appartiennent et peuvent manipuler ses données internes.
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
Dans cet exemple, personne est un objet qui a trois propriétés : nom, age, et profession. Chacune de ces propriétés a une valeur associée.
Accès aux propriétés d'un objet
Pour accéder aux propriétés d'un objet, vous pouvez utiliser la notation point objet.nomDeLaPropriété ou la notation crochets objet['nomDeLaPropriété'] :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
console.log(personne.nom); // Affiche : 'Claudy'
console.log(personne['age']); // Affiche : 52.
Il est également possible d'accéder aux propriétés d'un objet de manière dynamique en utilisant des variables comme clé :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
const cle = 'age';
console.log(personne.nom); // Affiche : 'Claudy'
console.log(personne[cle]); // Affiche : 52
Modification d'un objet
Les objets sont mutables, ce qui signifie que vous pouvez modifier leurs propriétés après leur création :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
// Modification de la propriété 'age'.
personne.age = 53;
personne['profession'] = 'contremaître';
console.log(personne);
/* Affiche :
Object { nom: "Claudy", age: 53, profession: "contremaître" }
*/
Ajout de nouvelles propriétés
Vous pouvez également ajouter de nouvelles propriétés à un objet existant à tout moment :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
// Ajout d'une nouvelle propriété 'ville'.
personne.ville = 'Bruxelles';
personne['codePostal'] = 1000;
console.log(personne);
/* Affiche :
Object { nom: "Claudy", age: 52, profession: "Photographe", ville: "Bruxelles", codePostal: 1000 }
*/
Suppression de propriétés
Pour supprimer une propriété d'un objet, vous pouvez utiliser l'opérateur delete :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe'
};
// Suppression de la propriété 'profession'.
delete personne.profession;
console.log(personne.profession); // Affiche : undefined
Les objets peuvent également contenir des méthodes (fonctions associées à un objet) :
const personne = {
nom: 'Claudy',
age: 52,
profession: 'Photographe',
direBonjour : function() { console.log('Bonjour !')}
};
// Exécuter la méthode "direBonjour()" de l'objet "personne".
personne.direBonjour(); // Affiche : Bonjour !
Il existe également d'autres types complexes, tels que les fonctions ou les objets instanciés, mais nous reviendrons sur ces sujets en temps voulu.
Exercices - Part 2
Lors des exercices, pensez à utiliser la fonction console.log() à chaque étape pour vérifier que vos manipulations sont correctes !
Exo-variables-04
Construisez et manipulez un tableau unidimensionnel :
- Créez un tableau avec les valeurs suivantes : 8, 3, 4.
- Affichez dans la console la deuxième valeur du tableau.
- Remplacez la valeur située en index 0 en lui assignant la valeur 2.
- Ajoutez la valeur 5 en fin de tableau.
- Ajoutez la valeur 1 en début de tableau.
- Créez un nouveau tableau avec les valeurs suivantes : 6, 7, 8, 9, 10.
- Fusionnez les deux tableaux dans un troisième tableau.
Exo-variables-05
Représentez les informations du film Hellraiser dans un tableau, puis manipulez ces données.
-
Créez un tableau contenant les informations suivantes dans cet ordre :
- 0 : Hellraiser (Nom du film)
- 1 : Jean-Michel Barker (Réalisateur)
- Affichez dans la console le nom du réalisateur en utilisant son index dans le tableau.
- Modifiez la valeur du réalisateur et remplacez-la par "Clive Barker".
- Ajoutez l'année de sortie du film (1987) en l'insérant comme nouvel élément du tableau.
- Affichez dans la console la version mise à jour du tableau pour vérifier vos modifications.
Exo-variables-06
Dans l'exercice précédent, les informations du film étaient stockées dans un tableau. Bien que cela fonctionne, cette approche montre vite ses limites : les données sont difficiles à lire, chaque information dépend de sa position numérique et il devient facile de se tromper d'index. Un objet littéral offre une structure bien plus claire, car chaque valeur est associée à un nom explicite. Cela rend les données plus faciles à manipuler, à comprendre et à maintenir.
Construisez et manipulez un objet contenant les informations du film Hellraiser :
- Créez un objet avec la structure suivantes (n'oubliez pas d'utiliser le camelCase pour la nomenclature des propriétés) :
- nom du film : Hellraiser
- réalisateur : Jean-Michel Barker
- Affichez le nom du réalisateur dans la console.
- Remplacez le nom du réalisateur par : Clive Barker.
- Ajoutez l'année de sortie du film dans ses propriétés : 1987.
Exo-variables-07
Nous allons regrouper plusieurs films d'horreur dans un tableau. Chaque film sera représenté par un objet contenant ses informations principales, comme dans l'activité précédente. Ce type de structure est courant dans les projets réels, car il offre une manière simple et claire d'organiser des collections de données.
-
Créez une constante nommée
horreur
contenant un tableau avec deux objets représentant les films suivants :
- Hellraiser réalisé par Clive Barker, sorti en 1987
- La colline a des yeux réalisé par Alexandre Aja, sorti en 2006
- nom du film
- réalisateur
- année de sortie
- Affichez dans la console le nom du premier film.
- Affichez dans la console le nom du réalisateur du second film.
- Modifiez l'année de sortie du premier film (à votre convenance).
-
Ajoutez un troisième film au tableau.
Le film à ajouter est :
- nom du film :Heretic
- réalisateurs : Scott Beck & Bryan Woods
- année de sortie : 2024
- Affichez dans la console la version complète et mise à jour du tableau afin de vérifier votre travail.
Exo-variables-08 (anciennement exo-06 à exo-11)
Nous allons maintenant organiser une filmothèque. L'objectif consiste à structurer les données dans un objet dont chaque propriété représentera une catégorie, contenant elle-même un tableau d'objets, et chaque objet décrira un film.
- Déclarer la filmothèque :
- horreur :
- 0 :
- nomDuFilm : 'Hellraiser'
- realisateur : 'Clive Barker'
- annee : 1987
- 1 :
- nomDuFilm : 'La colline a des yeux'
- realisateur : 'Alexandre Aja'
- annee : 2006
- 2 :
- nomDuFilm : 'Heretic'
- realisateur : 'Scott Beck & Bryan Woods'
- annee : 2024
- 0 :
- comedie :
- 0 :
- nomDuFilm : 'Dikkenek'
- realisateur : 'Olivier Van Hoofstadt'
- annee : 2006
- 0 :
- horreur :
- Affichez l'année de sortie du film "La colline a des yeux" dans la console.
-
Ajoutez (par mutation) la catégorie "science fiction" ainsi que quelques-uns de ses films à votre objet :
- scienceFiction :
- 0 :
- nomDuFilm : 'Blade Runner 2049'
- realisateur : 'Denis Villeneuve'
- annee : 2017
- 1 :
- nomDuFilm : 'Dune'
- realisateur : 'Denis Villeneuve'
- annee : 2021
- 2 :
- nomDuFilm : 'Minority Report'
- realisateur : 'Steven Spielberg'
- annee : 2002
- 0 :
- scienceFiction :
- Affichez l'ensemble de la filmothèque dans la console afin de vérifier que toutes les modifications ont bien été appliquées.
-
Ajoutez (par mutation) un film avec les propriétés suivantes à la catégorie "comedie" :
- nomDuFilm : 'Le Dîner de cons'
- realisateur : 'Francis Veber'
- annee : 1998
- Affichez l'ensemble de la filmothèque dans la console afin de vérifier que toutes les modifications ont bien été appliquées.
- Supprimez (par mutation) le film "Hellraiser" de la liste des films d'horreur.
- Affichez l'ensemble de la filmothèque dans la console afin de vérifier que toutes les modifications ont bien été appliquées.
- Supprimez (par mutation) l'année de sortie du film "Minority Report".
- Affichez l'ensemble de la filmothèque dans la console afin de vérifier que toutes les modifications ont bien été appliquées.