034.2 Leçon 1

Certification :

Web Development Essentials

Version :

1.0

Thème :

034 Programmation JavaScript

Objectif :

034.2 Structures de données JavaScript

Leçon:

1 sur 1

Introduction

Les langages de programmation, comme les langages naturels, représentent la réalité par des symboles qui sont combinés pour former des énoncés significatifs. La réalité représentée par un langage de programmation est constituée par les ressources de la machine, telles que les opérations du processeur, les périphériques et la mémoire.

Chacun des innombrables langages de programmation adopte un paradigme pour représenter les informations. JavaScript adopte les conventions typiques des langages de haut niveau, où la plupart des détails tels que l’allocation de mémoire sont implicites, ce qui permet au programmeur de se concentrer sur l’objectif du script dans le contexte de l’application.

Langages de haut niveau

Les langages de haut niveau fournissent des règles abstraites afin que le programmeur n’ait besoin que d’écrire le minimum de code pour exprimer une idée. JavaScript offre des moyens pratiques pour utiliser la mémoire de l’ordinateur, en utilisant des concepts de programmation qui simplifient l’écriture de routines récurrentes et qui sont généralement suffisants pour l’objectif du développeur web.

Note	Bien qu’il soit possible d’utiliser des mécanismes spécialisés pour un accès méticuleux à la mémoire, les types de données plus simples que nous allons examiner sont d’un usage plus général.

Les opérations typiques d’une application web consistent à demander des données par le biais d’une instruction JavaScript et à les stocker pour qu’elles soient traitées et finalement présentées à l’utilisateur. Ce stockage est assez flexible en JavaScript, avec des formats de stockage appropriés pour chaque objectif.

Déclaration des constantes et des variables

La déclaration des constantes et des variables pour contenir des données est la pierre angulaire de tout langage de programmation. JavaScript adopte la convention de la plupart des langages de programmation, en assignant des valeurs aux constantes ou aux variables avec la syntaxe name = value. La constante ou la variable de gauche prend la valeur de droite. Le nom de la constante ou de la variable doit commencer par une lettre ou un trait de soulignement.

Le type de données stockées dans la variable n’a pas besoin d’être indiqué, car JavaScript est un langage à typage dynamique. Le type de la variable est déduit de la valeur qui lui est attribuée. Cependant, il est pratique de désigner certains attributs dans la déclaration pour garantir le résultat souhaité.

Note	TypeScript est un langage inspiré de JavaScript qui, comme les langages de bas niveau, vous permet de déclarer des variables pour des types de données spécifiques.

Constantes

Une constante est un symbole qui est attribué une fois au démarrage du programme et qui ne change jamais. Les constantes sont utiles pour spécifier des valeurs fixes, comme définir la constante PI comme étant 3.14159265, ou COMPANY_NAME pour contenir le nom de votre entreprise.

Dans une application Web, par exemple, prenons un client qui reçoit des informations météorologiques d’un serveur distant. Le programmeur peut décider que l’adresse du serveur doit être constante, car elle ne changera pas pendant l’exécution de l’application. En revanche, les informations sur la température peuvent changer à chaque nouvelle réception de données du serveur.

L’intervalle entre les requêtes faites au serveur peut également être défini comme une constante, qui peut être demandée à partir de n’importe quelle partie du programme :

const update_interval = 10;

function setup_app(){
  console.log("Update every " + update_interval + "minutes");
}

Lorsqu’elle est appelée, la fonction setup_app() affiche le message Update every 10 minutes sur la console. Le terme const placé devant le nom update_interval permet de s’assurer que sa valeur restera la même tout au long de l’exécution du script. Si l’on tente de modifier la valeur d’une constante, une erreur TypeError: Assignment to constant variable est générée.

Variables

Sans le terme const, JavaScript suppose automatiquement que update_interval est une variable et que sa valeur peut être modifiée. Ceci est équivalent à déclarer la variable explicitement avec var :

var update_interval;
update_interval = 10;

function setup_app(){
  console.log("Update every " + update_interval + "minutes");
}

Notez que bien que la variable update_interval ait été définie en dehors de la fonction, elle a été accédée depuis l’intérieur de la fonction. Toute constante ou variable déclarée en dehors des fonctions ou des blocs de code définis par des accolades ({}) a une portée globale, c’est-à-dire qu’on peut y accéder depuis n’importe quelle partie du code. L’inverse n’est pas vrai : une constante ou une variable déclarée à l’intérieur d’une fonction a une portée locale, c’est-à-dire qu’elle n’est accessible qu’à l’intérieur de la fonction elle-même. Les blocs de code délimités par des accolades, comme ceux placés dans les structures de décision if ou les boucles for, délimitent la portée des constantes, mais pas des variables déclarées comme var. Le code suivant, par exemple, est valide :

var success = true;
if ( success == true )
{
  var message = "Transaction succeeded";
  var retry = 0;
}
else
{
  var message = "Transaction failed";
  var retry = 1;
}

console.log(message);

L’instruction console.log(message) est capable d’accéder à la variable message, même si elle a été déclarée dans le bloc de code de la structure if. La même chose ne se produirait pas si message était constante, comme le montre l’exemple suivant :

var success = true;
if ( success == true )
{
  const message = "Transaction succeeded";
  var retry = 0;
}
else
{
  const message = "Transaction failed";
  var retry = 1;
}

console.log(message);

Dans ce cas, un message d’erreur du type ReferenceError : message is not defined serait émis et le script serait arrêté. Bien que cela puisse sembler une limitation, restreindre la portée des variables et des constantes permet d’éviter toute confusion entre les informations traitées dans le corps du script et dans ses différents blocs de code. Pour cette raison, les variables déclarées avec let au lieu de var ont également une portée limitée par les blocs délimités par des accolades. Il existe d’autres différences subtiles entre la déclaration d’une variable avec var ou avec let, mais la plus importante d’entre elles concerne la portée de la variable, comme nous le verrons ici.

Types de valeurs

La plupart du temps, le programmeur n’a pas à se soucier du type de données stockées dans une variable, car JavaScript l’identifie automatiquement avec l’un de ses types primitifs lors de la première affectation d’une valeur à la variable. Certaines opérations, cependant, peuvent être spécifiques à un type de données ou à un autre et peuvent entraîner des erreurs si elles sont utilisées sans précautions. En outre, JavaScript propose des types structurés qui vous permettent de combiner plusieurs types primitifs en un seul objet.

Types primitifs

Les instances de type primitif correspondent aux variables traditionnelles, qui ne stockent qu’une seule valeur. Les types sont définis implicitement, de sorte que l’opérateur typeof peut être utilisé pour identifier quel type de valeur est stocké dans une variable :

console.log("Undefined variables are of type", typeof variable);

{
  let variable = true;
  console.log("Value `true` is of type " + typeof variable);
}

{
  let variable = 3.14159265;
  console.log("Value `3.14159265` is of type " + typeof variable);
}

{
  let variable = "Text content";
  console.log("Value `Text content` is of type " + typeof variable);
}

{
  let variable = Symbol();
  console.log("A symbol is of type " + typeof variable);
}

Ce script affichera sur la console quel type de variable a été utilisé dans chaque cas :

undefined variables are of type undefined
Value `true` is of type boolean
Value `3.114159265` is of type number
Value `Text content` is of type string
A symbol is of type symbol

Remarquez que la première ligne essaie de trouver le type d’une variable non déclarée. Cela fait que la variable donnée est identifiée comme undefined. Le type symbol est le type primitif le moins intuitif. Son but est de fournir un nom d’attribut unique dans un objet lorsqu’il n’est pas nécessaire de définir un nom d’attribut spécifique. Un objet est l’une des structures de données que nous examinerons ensuite.

Types structurés

Si les types primitifs sont suffisants pour écrire des routines simples, leur utilisation exclusive dans des applications plus complexes présente des inconvénients. Une application de commerce électronique, par exemple, serait beaucoup plus difficile à écrire, car le programmeur devrait trouver des moyens de stocker des listes d’articles et les valeurs correspondantes en utilisant uniquement des variables de types primitifs.

Les types structurés simplifient la tâche consistant à regrouper des informations de même nature dans une seule variable. La liste des articles d’un panier d’achat, par exemple, peut être stockée dans une seule variable de type array :

let cart = ['Milk', 'Bread', 'Eggs'];

Comme le montre l’exemple, un tableau d’éléments est désigné par des crochets. L’exemple a rempli le tableau avec trois valeurs de chaîne littérales, d’où l’utilisation de guillemets simples. Les variables peuvent également être utilisées comme éléments d’un tableau, mais dans ce cas, elles doivent être désignées sans guillemets. Le nombre d’éléments d’un tableau peut être interrogé avec la propriété length :

let cart = ['Milk', 'Bread', 'Eggs'];
console.log(cart.length);

Le nombre 3 sera affiché dans la sortie console. De nouveaux éléments peuvent être ajoutés au tableau avec la méthode push() :

cart.push('Candy');
console.log(cart.length);

Cette fois, le nombre affiché sera 4. On peut accéder à chaque élément de la liste par son indice numérique, en commençant par 0 :

console.log(cart[0]);
console.log(cart[3]);

La sortie affichée sur la console sera :

Milk
Candy

Tout comme vous pouvez utiliser push() pour ajouter un élément, vous pouvez utiliser pop() pour retirer le dernier élément d’un tableau.

Les valeurs stockées dans un tableau ne doivent pas nécessairement être du même type. Il est possible, par exemple, de stocker la quantité de chaque article à côté de celui-ci. Une liste de courses comme celle de l’exemple précédent pourrait être construite comme suit :

let cart = ['Milk', 1, 'Bread', 4, 'Eggs', 12, 'Candy', 2];

// Item indexes are even
let item = 2;

// Quantities indexes are odd
let quantity = 3;

console.log("Item: " + cart[item]);
console.log("Quantity: " + cart[quantity]);

La sortie affichée sur la console après l’exécution de ce code est la suivante :

Item: Bread
Quantity: 4

Comme vous l’avez peut-être déjà remarqué, combiner les noms des articles avec leurs quantités respectives dans un seul tableau n’est pas une bonne idée, car la relation entre eux n’est pas explicite dans la structure de données et elle est très sensible aux erreurs (humaines). Même si l’on utilisait un tableau pour les noms et un autre pour les quantités, le maintien de l’intégrité de la liste exigerait le même soin et ne serait pas très productif. Dans ces situations, la meilleure alternative est d’utiliser une structure de données plus appropriée : un objet.

En JavaScript, une structure de données de type objet vous permet de lier des propriétés à une variable. De plus, contrairement à un tableau, les éléments qui composent un objet n’ont pas un ordre fixe. Un article de liste de courses, par exemple, peut être un objet avec les propriétés name et quantity :

let item = { name: 'Milk', quantity: 1 };
console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);

Cet exemple montre qu’un objet peut être défini en utilisant des accolades ({}), où chaque paire propriété/valeur est séparée par un deux-points et les propriétés sont séparées par des virgules. La propriété est accessible sous le format variable.propriété, comme dans item.name, à la fois pour la lecture et pour l’attribution de nouvelles valeurs. La sortie affichée sur la console après l’exécution de ce code est :

Item: Milk
Quantity: 1

Enfin, chaque objet représentant un article peut être inclus dans le tableau de la liste de courses. Cela peut être fait directement lors de la création de la liste :

let cart = [{ name: 'Milk', quantity: 1 }, { name: 'Bread', quantity: 4 }];

Comme précédemment, un nouvel objet représentant un élément peut être ajouté ultérieurement au tableau :

cart.push({ name: 'Eggs', quantity: 12 });

Les éléments de la liste sont désormais accessibles par leur index et leur nom de propriété :

console.log("Third item: " + cart[2].name);
console.log(cart[2].name + " quantity: " + cart[2].quantity);

La sortie affichée sur la console après l’exécution de ce code est la suivante :

third item: eggs
Eggs quantity: 12

Les structures de données permettent au programmeur de garder son code beaucoup plus organisé et plus facile à maintenir, que ce soit par l’auteur original ou par d’autres programmeurs de l’équipe. En outre, de nombreux résultats des fonctions JavaScript sont des types structurés, qui doivent être traités correctement par le programmeur.

Opérateurs

Jusqu’à présent, nous n’avons vu que la manière d’attribuer des valeurs aux variables nouvellement créées. Aussi simple que cela soit, tout programme effectuera plusieurs autres manipulations sur les valeurs des variables. JavaScript propose plusieurs types d'opérateurs qui peuvent agir directement sur la valeur d’une variable ou stocker le résultat de l’opération dans une nouvelle variable.

La plupart des opérateurs sont orientés vers les opérations arithmétiques. Pour augmenter la quantité d’un article dans la liste des courses, par exemple, il suffit d’utiliser l’opérateur d’addition + :

item.quantity = item.quantity + 1;

Le bout de code suivant imprime la valeur de item.quantity avant et après l’ajout. Ne confondez pas les rôles du signe plus dans le bout de code. Les instructions console.log utilisent un signe plus pour combiner deux chaînes de caractères.

let item = { name: 'Milk', quantity: 1 };
console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);

item.quantity = item.quantity + 1;
console.log("New quantity: " + item.quantity);

La sortie affichée sur la console après l’exécution de ce code est la suivante :

Item: Milk
Quantity: 1
New quantity: 2

Notez que la valeur précédemment stockée dans item.quantity est utilisée comme opérande de l’opération d’addition : item.quantity = item.quantity + 1. Ce n’est qu’une fois l’opération terminée que la valeur de item.quantity est mise à jour avec le résultat de l’opération. Ce type d’opération arithmétique impliquant la valeur courante de la variable cible est assez courant, c’est pourquoi il existe des opérateurs raccourcis qui vous permettent d’écrire la même opération dans un format réduit :

item.quantity += 1;

Les autres opérations de base ont également des opérateurs raccourcis équivalents :

a = a - b est équivalente à a -= b.
a = a * b est équivalente à a *= b.
a = a / b est équivalente à a /= b.

Pour l’addition et la soustraction, il existe un troisième format disponible lorsque le second opérande n’est que d’une unité :

a = a + 1 est équivalente à a++.
a = a - 1 est équivalente à a--.

Plusieurs opérateurs peuvent être combinés dans la même opération et le résultat peut être stocké dans une nouvelle variable. Par exemple, l’instruction suivante calcule le prix total d’un article plus les frais d’expédition :

let total = item.quantity * 9.99 + 3.15;

L’ordre d’exécution des opérations suit l’ordre de priorité traditionnel : on exécute d’abord les opérations de multiplication et de division, puis seulement les opérations d’addition et de soustraction. Les opérateurs ayant la même priorité sont exécutés dans l’ordre où ils apparaissent dans l’expression, de gauche à droite. Pour remplacer l’ordre de priorité par défaut, vous pouvez utiliser des parenthèses, comme dans a * (b + c).

Dans certaines situations, le résultat d’une opération n’a même pas besoin d’être stocké dans une variable. C’est le cas lorsque vous voulez évaluer le résultat d’une expression dans une instruction if :

if ( item.quantiy % 2 == 0 )
{
  console.log("Quantity for the item is even");
}
else
{
  console.log("Quantity for the item is odd");
}

L’opérateur % (modulo) renvoie le reste de la division du premier opérande par le second opérande. Dans l’exemple, l’instruction if vérifie si le reste de la division de item.quantity par 2 est égal à zéro, c’est-à-dire si item.quantity est un multiple de 2.

Lorsque l’un des opérandes de l’opérateur + est une chaîne de caractères, les autres opérateurs sont contraints en chaînes de caractères et le résultat est une concaténation de chaînes de caractères. Dans les exemples précédents, ce type d’opération a été utilisé pour concaténer des chaînes de caractères et des variables dans l’argument de l’instruction console.log.

Cette transformation automatique peut ne pas être le comportement souhaité. Une valeur fournie par l’utilisateur dans un champ de formulaire, par exemple, peut être identifiée comme une chaîne de caractères, mais il s’agit en fait d’une valeur numérique. Dans ce cas, la variable doit d’abord être convertie en un nombre avec la fonction Number() :

sum = Number(value1) + value2;

De plus, il est important de vérifier que l’utilisateur a fourni une valeur valide avant de procéder à l’opération. En JavaScript, une variable sans valeur assignée contient la valeur null. Cela permet au programmeur d’utiliser une instruction de décision telle que if ( value1 == null ) pour vérifier si une valeur a été attribuée à une variable, quel que soit le type de la valeur attribuée à la variable.

Exercices Guidés

Un tableau est une structure de données présente dans plusieurs langages de programmation, dont certains ne permettent que des tableaux avec des éléments de même type. Dans le cas de JavaScript, est-il possible de définir un tableau avec des éléments de types différents ?
D’après l’exemple let item = { name: 'Milk', quantity: 1 } pour un objet dans une liste de courses, comment pourrait-on déclarer cet objet pour inclure le prix de l’article ?
Dans une seule ligne de code, quelles sont les façons de mettre à jour la valeur d’une variable à la moitié de sa valeur actuelle ?

Exercices d’exploration

Dans le code suivant, quelle valeur sera affichée dans la sortie de la console ?

var value = "Global";

{
  value = "Location";
}

console.log(value);

Que se passe-t-il lorsque l’un ou plusieurs des opérandes impliqués dans une opération de multiplication est une chaîne de caractères ?
Comment est-il possible de supprimer l’élément Eggs du tableau cart déclaré avec let cart = ['Milk', 'Bread', 'Eggs'] ?

Résumé

Cette leçon couvre l’utilisation de base des constantes et des variables en JavaScript. JavaScript est un langage à typage dynamique, le programmeur n’a donc pas besoin de spécifier le type de la variable avant de la définir. Cependant, il est important de connaître les types primitifs du langage pour garantir le résultat correct des opérations de base. En outre, les structures de données telles que les tableaux et les objets combinent les types primitifs et permettent au programmeur de construire des variables composites plus complexes. Cette leçon aborde les concepts et procédures suivants :

Comprendre les constantes et les variables
Portée des variables
Déclarer des variables avec `var' et `let'.
Les types primitifs
Opérateurs arithmétiques
Tableaux et objets
Contrainte et conversion de types

Réponses aux exercices guidés

Un tableau est une structure de données présente dans plusieurs langages de programmation, dont certains ne permettent que des tableaux avec des éléments de même type. Dans le cas de JavaScript, est-il possible de définir un tableau avec des éléments de types différents ?

Oui, en JavaScript, il est possible de définir des tableaux avec des éléments de différents types primitifs, tels que des chaînes de caractères et des nombres.
D’après l’exemple let item = { name: 'Milk', quantity: 1 } pour un objet dans une liste de courses, comment pourrait-on déclarer cet objet pour inclure le prix de l’article ?

let item = { name: 'Milk', quantity: 1, price: 4.99 };
Dans une seule ligne de code, quelles sont les façons de mettre à jour la valeur d’une variable à la moitié de sa valeur actuelle ?

On peut utiliser la variable elle-même comme opérande, valeur = valeur / 2, ou l’opérateur raccourci /= : valeur /= 2.

Réponses aux exercices d’exploration

Dans le code suivant, quelle valeur sera affichée dans la sortie de la console ?
```
var value = "Global";

{
  value = "Location";
}

console.log(value);
```
Location
Que se passe-t-il lorsque l’un ou plusieurs des opérandes impliqués dans une opération de multiplication est une chaîne de caractères ?

JavaScript attribuera la valeur NaN (Not a Number : n’est pas un nombre) au résultat, indiquant que l’opération n’est pas valide.
Comment est-il possible de supprimer l’élément Eggs du tableau cart déclaré avec let cart = ['Milk', 'Bread', 'Eggs'] ?

Les tableaux en javascript ont la méthode pop(), qui supprime le dernier élément de la liste : cart.pop().