Comprendre les types de données en JavaScript

Tutoriels
JavaScript

Introduction

Les types de données sont utilisés pour classifier un type spécifique de données dans les langages de programmation. Par exemple, un nombre et une chaîne de caractères sont des types de données différents qui seront traités différemment par JavaScript.

C’est important car le type de données spécifique que vous utilisez déterminera les valeurs que vous pouvez lui attribuer et ce que vous pouvez en faire. Autrement dit, pour pouvoir effectuer des opérations avec des variables en JavaScript, il est important de comprendre le type de données de toute variable donnée.

Dans ce tutoriel, nous verrons comment les types de données fonctionnent en JavaScript ainsi que les types de données importants propres au langage. Il ne s’agit pas d’une enquête exhaustive sur les types de données, mais cela vous aidera à vous familiariser avec les options disponibles en JavaScript.

Typage dynamique

JavaScript a des types de données dynamiques, ce qui signifie que la vérification des types est effectuée au moment de l’exécution plutôt qu’au moment de la compilation. Les types de données de Python sont également dynamiquement typés.

Avec des langages à typage dynamique, une variable du même nom peut être utilisée pour contenir différents types de données.

Par exemple, la variable t, définie comme une variable par le mot-clé let (notez que let limite une variable donnée dans la portée), peut être assignée pour contenir différents types de données, ou peut être initialisée mais laissée non définie:

let t = 16;			// t est un nombre
let t = "Teresa";	// t est une chaîne de caractères
let t = true;		// t est un booléen
let t;				// t n'est pas défini

Chacune des variables t ci-dessus peut être définie sur n’importe quel type de données disponible en JavaScript; elles n’ont pas besoin d’être déclarées explicitement avec un type de données avant leur utilisation.

Nombres

JavaScript n’a qu’un seul type de nombre, il n’y a pas de désignation distincte pour les entiers et les nombres flottants. En raison de cela, les nombres peuvent être écrits en JavaScript avec ou sans décimales:

let num1 = 93;
let num2 = 93.00;

Dans les deux cas ci-dessus, le type de données est un nombre et est le même que le nombre ait des points décimaux ou non.

La notation exponentielle scientifique peut être utilisée en JavaScript pour abréger les nombres très grands ou très petits, comme dans les exemples suivants:

let num3 = 987e8;		// 98700000000
let num4 = 987e-8;		// 0,00000987

Les nombres en JavaScript sont considérés comme précis jusqu’à 15 chiffres. Cela signifie que les nombres seront arrondis après avoir atteint le 16e chiffre :

let num5 = 999999999999999;		// reste comme 999999999999999
let num6 = 9999999999999999;	// arrondi à 10000000000000000

En plus de représenter des nombres, le type de données nombre en JavaScript dispose également de trois valeurs symboliques disponibles :

  • Infinity — une valeur numérique qui représente un nombre positif approchant l’infini
  • -Infinity — une valeur numérique qui représente un nombre négatif approchant l’infini
  • NaN — une valeur numérique qui représente une non-nombre, signifiant non un nombre

Infinity ou -Infinity seront retournés si vous calculez un nombre en dehors du nombre le plus grand possible disponible en JavaScript. Cela se produira également pour des valeurs qui sont indéfinies, comme lors de la division par zéro :

let num7 = 5 / 0;	// renverra Infinity
let num8 = -5 / 0;	// renverra -Infinity

En termes techniques, Infinity sera affiché lorsqu’un nombre dépasse le nombre 1.797693134862315E+308, qui représente la limite supérieure en JavaScript.

De même, -Infinity sera affiché lorsqu’un nombre dépasse la limite inférieure de -1.797693134862316E+308.

Le nombre Infinity peut également être utilisé dans des boucles :

while (num9 != Infinity) { 
	// Le code ici s'exécutera jusqu'à ce que num9 = Infinity
}

Pour les nombres qui ne sont pas des nombres légaux, NaN sera affiché. Si vous essayez d’effectuer une opération mathématique sur un nombre et une valeur non numérique, NaN sera retourné. C’est le cas dans l’exemple suivant :

let x = 20 / "Shark";	// x sera NaN

Puisque le nombre 20 ne peut pas être divisé par la chaîne "Shark" car elle ne peut pas être évaluée comme un nombre, la valeur retournée pour la variable x est NaN.

Cependant, si une chaîne peut être évaluée comme une valeur numérique, l’expression mathématique peut être effectuée en JavaScript :

let y = 20 / "5";	// y sera 4

Dans l’exemple ci-dessus, puisque la chaîne "5" peut être évaluée comme une valeur numérique en JavaScript, elle est traitée comme telle et fonctionnera avec l’opérateur mathématique de division, /.

Lors de l’attribution de la valeur NaN à une variable utilisée dans une opération, cela entraînera la valeur NaN, même lorsque l’autre opérande est un nombre légal :

let a = NaN;
let b = 37;
let c = a + b; 	// c sera NaN

Il n’y a qu’un seul type de données numériques en JavaScript. Lorsque vous travaillez avec des nombres, tout nombre que vous entrez sera interprété comme le type de données pour les nombres ; vous n’êtes pas tenu de déclarer quel type de données vous entrez car JavaScript est typé dynamiquement.

Chaînes de caractères

A string is a sequence of one or more characters (letters, numbers, symbols). Strings are useful in that they represent textual data.

En JavaScript, les chaînes de caractères existent entre guillemets simples ' ou doubles ", donc pour créer une chaîne, il suffit d’encadrer une séquence de caractères entre guillemets :

let singleQuotes = 'This is a string in single quotes.';

let doubleQuotes = "This is a string in double quotes.";

Vous pouvez choisir d’utiliser des guillemets simples ou doubles, mais quelle que soit votre décision, vous devez rester cohérent dans un programme.

Le programme « Hello, World! » démontre comment une chaîne peut être utilisée en programmation informatique, car les caractères qui composent la phrase Hello, World! dans l’alerte ci-dessous sont une chaîne.

hello.html
<!DOCTYPE HTML>
<html>
<head>
<script>
function helloFunction() {
    alert("Hello, World!");
}
</script>
</head>
<body>
<p><button onclick="helloFunction()">Click me</button></p>
</body>
</html>

Lorsque nous exécutons le code et cliquons sur le bouton Cliquez-moi, nous recevrons une boîte de dialogue avec la sortie suivante :

Output
Hello, World!

Comme pour les autres types de données, nous pouvons stocker des chaînes dans des variables :

let hw = "Hello, World!";

Et afficher la chaîne dans l’alerte en appelant la variable :

hello.html
...
<script>
let hw = "Hello, World!";
function helloFunction() {
    alert(hw);
}
</script>
...

Output
Hello, World!

Il existe de nombreuses opérations que nous pouvons effectuer sur les chaînes dans nos programmes afin de les manipuler pour obtenir les résultats que nous recherchons. Les chaînes sont importantes pour communiquer des informations à l’utilisateur et pour que l’utilisateur communique des informations au programme.

Booléens

Le type de données Boolean peut prendre l’une des deux valeurs, soit true ou false. Les booléens sont utilisés pour représenter les valeurs de vérité associées à la branche logique des mathématiques, qui informe les algorithmes en informatique.

De nombreuses opérations en mathématiques nous donnent des réponses qui s’évaluent soit à vrai, soit à faux :

  • plus grand que
    • 500 > 100 vrai
    • 1 > 5 faux
  • moins que
    • 200 < 400 vrai
    • 4 < 2 faux
  • égal
    • 5 = 5 vrai
    • 500 = 400 faux

Tout comme avec les autres types de données, nous pouvons stocker une valeur booléenne dans une variable :

let myBool = 5 > 8;	// faux

Puisque 5 n’est pas supérieur à 8, la variable myBool a pour valeur faux.

À mesure que vous écrivez plus de programmes en JavaScript, vous deviendrez plus familier avec le fonctionnement des booléens et avec la manière dont différentes fonctions et opérations évaluant à vrai ou faux peuvent changer le cours du programme.

Tableaux

Un tableau peut contenir plusieurs valeurs dans une seule variable. Cela signifie que vous pouvez contenir une liste de valeurs dans un tableau et itérer à travers elles.

Chaque élément ou valeur à l’intérieur d’un tableau est appelé un élément. Vous pouvez vous référer aux éléments d’un tableau en utilisant un numéro d’index.

Tout comme les chaînes de caractères sont définies comme des caractères entre guillemets, les tableaux sont définis en ayant des valeurs entre crochets [ ].

Un tableau de chaînes, par exemple, ressemble à ceci :

let fish = ["shark", "cuttlefish", "clownfish", "eel"];

Si nous appelons la variable poisson, nous obtiendrons la sortie suivante :

["shark", "cuttlefish", "clownfish", "eel"]

Les tableaux sont un type de données très flexible car ils sont mutables, c’est-à-dire qu’ils peuvent avoir des valeurs d’éléments ajoutées, supprimées et modifiées.

Objets

Le type de données objet JavaScript peut contenir de nombreuses valeurs sous forme de paires nom:valeur. Ces paires fournissent un moyen utile de stocker et d’accéder aux données. La syntaxe littérale d’objet est constituée de paires nom:valeur séparées par des deux-points avec des accolades de chaque côté { }.

Typiquement utilisé pour contenir des données qui sont liées, telles que les informations contenues dans un ID, une syntaxe littérale d’objet JavaScript ressemble à ceci, avec des espaces entre les propriétés :

let sammy = {firstName:"Sammy", lastName:"Shark", color:"blue", location:"ocean"};

Alternativement, et surtout pour les littéraux d’objets avec un grand nombre de paires nom:valeur, nous pouvons écrire ce type de données sur plusieurs lignes, avec un espace après chaque deux-points:

let sammy = {
    firstName: "Sammy",
    lastName: "Shark",
    color: "blue",
    location: "Ocean"
};

La variable objet sammy dans chacun des exemples ci-dessus a 4 propriétés: firstName, lastName, color, et location. Ceux-ci sont chacun passés des valeurs séparées par des deux-points.

Travailler avec plusieurs types de données

Alors que chaque programme que vous créez contiendra plusieurs types de données, il est important de garder à l’esprit que vous effectuerez généralement des opérations dans le même type de données. C’est-à-dire, vous effectuerez des opérations mathématiques sur des nombres, ou découper des chaînes de caractères.

Lorsque vous utilisez un opérateur qui fonctionne à travers les types de données, comme l’opérateur + qui peut ajouter des nombres ou concaténer des chaînes, vous pouvez obtenir des résultats inattendus.

Par exemple, lorsque vous utilisez l’opérateur + avec des nombres et des chaînes de caractères ensemble, les nombres seront traités comme une chaîne de caractères (donc ils seront concaténés), mais l’ordre des types de données influencera la concaténation.

Ainsi, si vous créez une variable qui effectue la concaténation suivante, JavaScript interprétera chaque élément ci-dessous comme une chaîne de caractères:

let o = "Ocean" + 5 + 3;

Si vous appelez la variable o, vous obtiendrez la valeur suivante retournée:

Output
Ocean53

Cependant, si vous commencez par des chiffres, les deux chiffres seront ajoutés avant d’être interprétés comme une chaîne de caractères lorsque le programme atteint "Ocean", donc la valeur retournée sera la somme des deux chiffres concaténés avec la chaîne:

let p = 5 + 3 + "Ocean";

Output
8Ocean

En raison de ces résultats inattendus, vous serez probablement en train d’effectuer des opérations et des méthodes à l’intérieur d’un seul type de données plutôt que à travers eux. JavaScript, cependant, ne retourne pas d’erreurs lors de la manipulation de types de données différents, comme le font certains autres langages de programmation.

Conclusion

À ce stade, vous devriez avoir une meilleure compréhension de certains des principaux types de données disponibles pour vous dans JavaScript.

Chacun de ces types de données deviendra important lorsque vous développerez des projets de programmation dans le langage JavaScript.

Source:
https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript