31:T1025,## Introduction

Le Javascript est aujourd’hui un langage incontournable du développement Web.
C'est un langage de programmation multi-paradigme : orienté objet à prototype, impératif et fonctionnel (il partage ces deux dernières caractéristiques avec Python par exemple).

Le langage a été créé Netscape (fin 1995) est standardisé sous le nom d'ECMAScript (c'est peut-être un terme que vous rencontrerez - notamment sous sa forme abrégée pour désigner les différentes versions du standard : ES5, ES6, etc.).

Sa syntaxe est dérivée de celle du C/C++.

for (let i = 0; i < 10; i++) {
  console.log("Iteration n°" + i);
}

var j = 0;
while (j < 10) {
  console.log("...");
  j++;
}

Ses autres particularités sont les suivantes :

Langage interprété (pas de compilation, exécution directe dans un interpréteur)
Typage dynamique (laisse l'ordinateur réaliser l'opération de typage à la volée)
Modèle objet à base de prototypes
Langage fonctionnel (les fonctions sont des objets de première classe : on peut passer des fonctions en argument à des fonctions, les assigner à des variables, les stocker dans des structures de données, etc.)

Pourquoi le JavaScript ?

Couche "Comportement" (JavaScript) qui s'ajoute naturellement à la couche "Présentation" (CSS) et à la couche "Contenu structuré" (HTML) des technologies web.
Création de contenus complexes, dynamiques et interactifs dont la logique est exécutée coté client, le moment venu.
Les navigateurs web disposent de plusieurs API (Application Programming Interfaces) qui permettent de manipuler le document (API DOM), de manipuler des contenus 2D ou 3D (API Canvas et API WebGL) ou les informations de géolocalisation (API Geolocation) par exemple ; ces API sont accessibles en JavaScript.

Quelques idées reçues

JavaScript n'est pas à proprement parlé le seul langage du Web. En effet d'autres solutions ont été développées pour s’exécuter coté client (c'est par exemple le cas de Adobe Flash ou des applets Java - désormais tombés en désuétude). En revanche, avec la normalisation du langage et un meilleur support par tous les navigateurs et avec l'introduction de HTML5 (et de ses nombreuses API JavaScript), le Javascript a effectué un retour en force dans l'écosystème Web coté client. Il existe également un language de bas niveau développé pour le Web et standardisé en 2019, nommé WebAssembly.
Le Javascript n'est pas seulement utilisé coté client mais également de plus en plus comme un langage de script à part entière, notamment depuis l'existence de node.js (vers 2009), ou, plus récemment de Deno (2018). Il est ainsi désormais possible de l'utiliser également pour écrire du code côté serveur. Ce point ne sera pas abordé dans ce cours.

32:T62e,### JavaScript pour la visualisation de données sur le Web Apprendre JavaScript dans le cadre de votre parcours peut s'avérer essentiel pour plusieurs raisons clés : - **C'est le langage dominant du Web** : JavaScript est le langage de programmation le plus utilisé pour le développement web interactif. Maîtriser JavaScript permet aux étudiants de créer des visualisations dynamiques et interactives directement dans un navigateur, un atout incontournable pour la communication des données. - **Il existe de puissantes bibliothèques pour la visualisation de données** : Des bibliothèques comme D3.js, Chart.js ou Plotly permettent de transformer des ensembles de données complexes en visualisations claires et interactives, idéales pour les outils décisionnels. - **Interopérabilité avec les technologies Web** : JavaScript fonctionne en harmonie avec HTML et CSS, permettant de concevoir des interfaces complètes, à la fois esthétiques et fonctionnelles, pour des solutions de visualisation sur mesure. - **Adaptation aux besoins professionnels** : Dans un domaine où la visualisation et les outils décisionnels sont cruciaux, savoir manipuler le JavaScript donne un avantage compétitif pour créer des dashboards, des rapports ou des applications interactives complexes et personnalisées. --- Dans un premier temps, il est nécessaire d'être à l'aise avec les types et les fonctionnalités de base du JavaScript. En effet, il va souvent être nécessaire de manipuler voir de transformer les données (TP suivant) avant de pouvoir les visualiser.33:[] 2f:{"title":"Rappels JavaScript","cells":[{"id":0,"value":"# Rappels JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"

Support de cours pour les étudiants 2025-2026 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble de notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":572,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Strings\n\nLes chaînes de caractères peuvent être créées à l'aide de guillemets simples, de guillemets doubles ou de *backticks*.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"'Hey' // Guillemets simples","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"\"Hey\" // Guillemets doubles","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"\"Yo\" !== `Hey` // Backticks","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"L'utilisation des *backticks* permet d'intégrer des expressions qui seront intégrées dans la chaîne de caractères (voir [MDN: Template literals](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals)).","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"myName = \"Matthieu\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"hello = `Salut ${myName}! Ton nom a ${myName.length} caractères.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"Cette manière de faire est à préférer à la concaténation avec le symbole `+` : ","pinned":false,"hidden":false,"mode":"md"},{"id":545,"value":"\"On peut aussi\" + \" faire ça\" + \" \" + \"mais on évitera\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"`3 x 4 = ${3 * 4}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"Il est possible de diviser une chaîne de caractères en une liste ordonnée de sous chaînes avec la méthode [`split`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split).","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"words = hello.split(\" \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"Il est possible d'utiliser la méthode [`join`]() pour combiner les éléments d'un tableau en une chaîne de caractères.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"words.join(\"_\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"Il est également possible de remplacer une sous chaîne de caractère par une autre.","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"hello.replace(\"Matthieu\", \"John\") // Remplace la première occurence","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"hello.replaceAll(\"o\", \"a\") // Remplace toutes les occurences","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"Le premier argument de `replace` peut également être un motif ReGex.","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"\"Salut ! Une phrase, avec de la ponctuation.\"\n .replace(\n /[^\\w\\s\\']/g,\n \"\"\n ) // On remplace les caractère qui ne sont pas des chiffres ou des lettres par \"\" (rien)\n .replace(/\\s+/g, \" \") // On remplace les doubles espaces par un simple espace\n .replace('avec de la', 'sans')","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Arrays\n\nLes [tableaux](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) sont des conteneurs hétérogènes, comparables à des listes Python.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"students = [\"Sue\", \"Bob\", \"Meg\", \"Mike\", \"Michelle\", \"Joe\", \"Kate\", \"John\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"students.length // Pour connaitre le nombre d'éléments","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"// Accéder au premier élément\nstudents[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"// Accéder au troisième élément\nstudents[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"// Accéder au dernier élément\nstudents[students.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"On peut vérifier si un élément existe dans le tableau avec la méthode [**`includes`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"students.includes(\"Frank\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"students.includes(\"Bob\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"On peut ajouter des éléments à un tableau existant avec la méthode [**`push`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push) :\n\n```js\nstudents.push('New student')\n```\n\net supprimer le dernier élément avec la méthode `pop` :\n\n```js\nstudents.pop() // Retourne la dernière entrée du tableau\n```\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"Il s'agit ici seulement d'un rapide rappels sur les tableaux, le prochain support (*Préparation et transformation de données*) est dédié à la manipulation de tableaux JavaScript.","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"## Sets","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"Un objet [**`Set`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Set) permet de stocker un ensemble unique d'entrées (qu'il s'agisse de valeurs primitives - string, number, etc. - ou d'objets).\n\nCet objet est par exemple utile pour obtenir les valeurs uniques (i.e. sans doublons) d'un tableau de valeurs :","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"values = [1, 4, 5, 1, 2, 7, 5, 10, 2, 4, 3, 2, 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"uniqueValues = new Set(values)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"uniqueValues.size // Le nombre d'entrée","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"La méthode [`has`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Set/has) permet de vérifier si un élément existe au sein d'un Set ou non :","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"uniqueValues.has(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"uniqueValues.has(999)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"Il est possible d'ajouter et supprimer des éléments.","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"uniqueValues.add(13)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"uniqueValues.delete(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"Il est possible de convertir un `Set` en `Array` avec la méthode `Array.from` ou avec la syntaxe de décomposition ([*spread syntax*](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax)).","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"Array.from(uniqueValues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"[...uniqueValues]","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"Ainsi, vous rencontrez probablement parfois la syntaxe suivante : \n\n```js\nconst maVariable = [...new Set(someArray)]\n```\n\nqui permet de créer un tableau contenant les valeurs sans doublons d'un tableau donné (ici `someArray`).","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"## Objects et Maps","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"Dans ce cours, nous utiliserons des Objects et des Maps pour mettre en correspondance des clés et des valeurs. Nous les utiliserons comme des dictionnaires en Python ou des tableaux associatifs dans d'autres langages.\n\n### Objects\n\nNous pouvons créer un objet en utilisant des accolades. Dans Observable, si nous assignons directement un objet à une cellule, nous devons mettre l'objet entre parenthèses afin qu'Observable puisse le distinguer d'un bloc de code.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"stringToInt = ({\n one: 1,\n 'tw-o': 2,\n three: 3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"Nous pouvons accéder à la valeur de la clé avec un point ou des crochets.","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"stringToInt.one","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"stringToInt[\"tw-o\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"myKey = \"tw-o\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"stringToInt[myKey]","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"Nous pouvons vérifier si une clé existe en utilisant la méthode hasOwnProperty.","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"stringToInt.hasOwnProperty(\"twelve\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"stringToInt.hasOwnProperty(\"three\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"Si nous essayons d'accéder à une clé qui n'existe pas, le résultat sera `undefined`.","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"stringToInt[\"four\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"On peut aussi créer un `Object` depuis un tableau de paires de clés-valeurs.","pinned":true,"hidden":false,"mode":"md"},{"id":150,"value":"keyValuePairs = [\n ['one', 1],\n ['two', 2],\n ['three', 3],\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"Object.fromEntries(keyValuePairs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"À l'inverse, on peut obtenir un tableau de clés-valeurs à partir d'un object.","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"Object.entries(stringToInt)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"Il est aussi possible d'obtenir un tableau contenant toutes les clés ou toutes les valeurs d'un objet donné.","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"Object.keys(stringToInt)","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"Object.values(stringToInt)","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"### Maps","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"Les `Maps` sont un ajout récent à JavaScript, mieux conçu pour répondre au cas d'utilisation de la mise en correspondance de clés avec des valeurs. Les cartes présentent certains avantages, comme la prise en charge d'un plus grand nombre de types de clés, le suivi de l'ordre d'insertion et la possibilité d'obtenir plus facilement la taille de la carte et d'itérer sur son contenu.","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"nameToAge = new Map([\n ['Bob', 20],\n ['Sue', 25],\n ['Joe', 30],\n ['Mary', 35]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"nameToAge.has('Jen')","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"nameToAge.has(\"Joe\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"nameToAge.get(\"Mary\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"nameToAge.get('SomeoneElse')","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"Il est possible d'utiliser les méthodes `set` et `delete` pour ajouter ou enlever des entrées.","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"nameToAge.set('Jack', 80)","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"nameToAge.delete(\"Jack\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"### Date","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"L'object JavaScript [`Date`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) permet de stocker et gérer des informations relatives à la date et à l'heure.\nIl sera utile lorsque vous manipulerez des données temporelles (car il va permettre de comparer et d'ordonner des objets `Date` entre eux, d'en extraire le jour, le mois, etc. de manière bien plus simple que si les informations de date étaient manipulées sous forme de chaîne de caractères telles que \"2022-06-02\").","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"Lorsqu'une nouvelle instance de `Date` est créée sans argument, un nouvel objet correspondant à la date et à l'heure actuelle est créé :","pinned":false,"hidden":false,"mode":"md"},{"id":373,"value":"now = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"Les objets `Date` disposent de nombreuses méthodes :","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"now.getDate() // Le jour du mois, 1 pour le premier jour, 2 pour le second, etc.","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"now.getDay() // 0 -> Dimanche, 1 -> Lundi, 2 -> Mardi, 3 -> Mercredi, etc. ","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"now.getMonth() // À partir de 0 -> janvier, donc 8 -> septembre","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"now.getYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"// Attention, getYear renvoit l'année, mais depuis 1900\nnow.getYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"Il est aussi possible d'instancier un objet `Date` à partir de valeurs sous différentes formes :","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"new Date('2022-06-06 09:00:00')","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"new Date('2022-06-06 09:00:00Z') // On peut ajouter le Z pour dire qu'on exprime l'heure sur le fuseau GMT","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"new Date(2011, 0, 1); // Le 1er janvier à 00:00 sur notre fuseau horaire -> 31/12/2009 23:00 sur le fuseau GMT","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"new Date('2022-12-20')","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"new Date(2019, 2, 1, 3, 2, 1) // Années, mois (à partir de 0 !), jour, heure, minute, seconde (les 3 derniers sont optionnels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"epochTime = new Date(0) // cf. https://fr.wikipedia.org/wiki/Epoch ","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"## Comparaison\n\nEn JavaScript, il existe plusieurs [opérateurs de comparaison](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_and_operators#op%C3%A9rateurs_de_comparaison), que vous avez déjà rencontré dans ce support pour la plupart : \n- `===` : égalité stricte\n- `!==` : inégalité stricte\n- `==` : égalité\n- `!=` : inégalité\n- `>` : plus grand que\n- `>=` : plus grand ou égal\n- `<` : plus petit que\n- `<=` : plus petit ou égal\n\nAttention, `=>` n'est pas un opérateur de comparaison, il s'agit d'une syntaxe dédiées aux fonctions fléchées (voir section suivante).\n\nLa principale différence entre l'(in)égalité et l'(in)égalité stricte est que l'(in)égalité stricte n'opère pas de conversion implicite de type (i.e. l’interpréteur n'essaie pas de convertir les valeurs, à droite et à gauche de l'opérateur, vers un autre type).\nConsidérez les extraits de code qui suivent :","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"'4' === 4 // Une chaine de caractère ne peut pas être strictement égale à un nombre","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"'4' == 4 // Avec l'égalité simple, les deux valeurs sont considérés comme si elles avaient le même type ","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"'' == 0 // Attention à l'égalité simple, le resultat peut être surprenant !","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"'' == [] // Attention à l'égalité simple, le resultat peut être surprenant !","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"undefined === null // Attention à l'égalité simple, le resultat peut être surprenant !","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"'' === 0 // Pas de soucis avec l'égalité stricte !","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"'' === [] // Pas de soucis avec l'égalité stricte !","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"undefined === null // Pas de soucis avec l'égalité stricte !","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"'4' >= 4 // Les conversions implicites de type ont aussi lieu avec >, <, <= et >=","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"'3' < 10 // Les conversions implicites de type ont aussi lieu avec >, <, <= et >=","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"Il existe plusieurs manières de définir des fonctions en JavaScript.","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"### Mot-clé `function`","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"Le mot-clé [`function`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/function) permet de définir une fonction nommée ou anonyme.","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"function add(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"add(12, 21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"subs = function (a, b) {\n return a - b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"subs(20, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"### Functions fléchées","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"Les [fonctions fléchées (*arrow functions*)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions) permettent de définir des fonctions de manière plus concise qu'avec le mot-clé `function`. Elles présentes toutefois quelques spécificités, notamment celle de ne pas posséder sa propre valeur de [`this`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/this).","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"// En spécifiant directement la valeur de retour\nadd2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"add2(12, 13)","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"// Identique à la fonction précédente,\n// mais en écrivant 'return' dans le corps de la fonction\nadd3 = (a, b) => { return a + b }","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"add3(2, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"double = (num) => {\n const value = num * 2;\n return `${num} doubled is ${value}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"double(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"Lorsque qu'une fonction fléchée ne prend qu'un seul argument, il n'est pas nécessaire d'entourer cet argument de parenthèses lors de la déclaration de la fonction :","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"square = num => `${num} squared is ${num * num}`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"square(12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"Lorsque l'on veut retourner directement un object, il est nécessaire d'entourer les accolades de parenthèses afin que les accolades ne soient pas interprétés comme délimitant le corps de la fonction :","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"makePerson = (name, age) => ({\n type: 'Person',\n name: name,\n age: age\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"makePerson(\"Paul\", 25)","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"### Donner des fonctions en argument à des fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"En JavaScript, les fonctions sont des objets de premières classes : elles sont traitées comme n'importe quelles variables.\nIl est donc possible de passer une fonction en argument d'une autre fonction (il est également possible de créer des fonctions qui retournent des fonctions).","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"function displayResult(operator, arg) {\n const result = operator(arg[0], arg[1]);\n return `The result is ${result}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"Il est ainsi possible de passer en argument une fonction en la référençant par son nom de variable :","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"function mult(a, b) {\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"displayResult(mult, [3, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"Ou en passant en argument une fonction anonyme, ici sous forme d'une fonction fléchée :","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"displayResult((a, b) => a + b, [3, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"Un tel usage sera fréquent lorsque l'on travaillera sur des tableaux, par exemple pour filtrer des tableaux (prochain TP) :","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(d => d % 2 === 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"## Opérateur (ternaire) conditionnel\n\nL'[opérateur (ternaire) conditionnel](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Conditional_operator) est fréquemment utilisé comme raccourci pour une déclaration `if/else`.\n\nConsidérons le code suivant: \n\n```javascript\nlet age = 25;\nlet price;\n\nif (age >= 18) {\n price = 5.80;\n} else {\n majeur = 3.50;\n}\n```\n\nIl peut être raccourci par l'utilisation de l'opérateur conditionnel : \n\n```javascript\nlet age = 25;\nlet majeur = age >= 18 ? 5.80 : 3.50;\n```\n\nOn peut l'utiliser à différents endroits, comme dans la valeur de retour d'une fonction par exemple.","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"function getFee(isMember) {\n return isMember ? '2.00€' : '10.00€';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"getFee(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"En utilisant une fonction fléchée, il est possible de réduire encore plus la déclaration d'une telle fonction.","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"getFee2 = (isMember) => isMember ? '2.00€' : '10.00€';","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"## Déclaration de variable\n\nEn JavaScript, il existe trois mots clés pour définir des variables : `var`, `let` et `const`.\n\n- `var` permet de créer une variable à la quelle il sera possible d'affecter une nouvelle valeur (il s'agit du mot clé utilisé historiquement en JavaScript, avant l'apparition de `let` et `const`),\n- `let` permet également de créer une variable à la quelle il sera possible d'affecter une nouvelle valeur,\n- `const` permet de créer une variable \"constante\" : il n'est pas possible d'y affecter une autre valeur.\n\nDans les cellules Observable, lorsque vous déclarez une variable, il n'est pas nécessaire d'utiliser ces mots-clé.\nEn revanche, lorsque vous définissez une fonction, ou une cellule plus longue (dont le code est entouré d'accolades, cf. premier support [Premier pas dans Observable](https://observablehq.com/@sd-progwebdataviz/premiers-pas-dans-observable#cell-181)), il est nécessaire d'utiliser ces mots clés.\n\nPar exemple :","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"function mul(a, b) {\n const resultat = a * b;\n return resultat;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"{\n const v = 'Ceci est une chaine de caractères';\n let result = 0;\n v.split('').forEach((char) => {\n if (char === 'e') {\n result += 1;\n }\n });\n return `Il y a ${result} fois la lettre 'e'`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"## Ressources","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"- [MDN Web Docs](https://developer.mozilla.org/fr/)\n- [The Modern JavaScript Tutorial](https://javascript.info/)\n- [A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"## La suite ...\n\nVous pouvez désormais aller faire les exercices correspondant : https://observablehq.com/@sd-progwebdataviz/rappels-javascript-exercices.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}