Variables et types de données en JavaScript. Partie 3 du cours de JavaScript de Débutant à Avancé en 10 articles de blog.

Ceci est la partie 3 de la série d’articles de blog sur JavaScript qui vous aidera à explorer le sujet des variables et des types de données en JavaScript. À la fin de cette série, vous connaîtrez tous les éléments de base nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le troisième tutoriel.

Variables et types de données en JavaScript – table des matières :

1. Variables
2. Types de données de base en JavaScript

Dans cet article de blog, nous allons continuer là où nous nous étions arrêtés dans le deuxième article de blog. À ce stade, vous devriez avoir votre navigateur Google Chrome ouvert et plus précisément avoir votre console JavaScript ouverte. Si pour une raison quelconque vous les avez fermées, ce serait un bon moment pour les rouvrir.

Si vous êtes sur un Mac, le raccourci clavier pour ouvrir la console est de presser “Option + Command + J”, après avoir ouvert Chrome. Si vous utilisez un appareil Windows, vous pouvez utiliser le raccourci clavier “Control + Shift + J” pour ouvrir la console JavaScript, une fois que vous avez ouvert Chrome. Ou vous pouvez également aller dans le menu en haut et aller à Affichage -> Développeur -> Console JavaScript.

Variables

Les variables en JavaScript ou dans tout autre langage de programmation sont extrêmement courantes. Et c’est pour une bonne raison. Les variables jouent un rôle très critique dans la programmation. En résumé, les variables vous permettent de stocker des données pour les déplacer, les modifier, les mettre à jour ou les supprimer dans votre programme. C’est un concept si important qu’il existe 3 façons de créer des variables. Le jargon de programmation pour créer des variables s’appelle “déclarer des variables”, ce qui signifie essentiellement que nous déclarons une variable dans la mémoire de l’ordinateur.

Pour créer les variables, nous utiliserons l’un des 3 mots-clés, qui sont : “var”, “let” et “const”. L’une des premières choses que vous devez savoir sur ces 3 mots-clés est qu’avant 2015, seul le mot-clé “var” était utilisé et les mots-clés “let” et “const” ont été introduits avec une norme JavaScript appelée ES6 ou ES2015.

Si vous n’avez aucune idée de ce qu’est ES6 ou ES2015, voici ce que vous devez savoir à ce sujet. Lorsque JavaScript est sorti pour la première fois, différentes entreprises ont mis en œuvre différentes versions de JavaScript, et il devait y avoir une norme pour que votre code fonctionne de manière prévisible et fiable dans tous les principaux navigateurs. Ainsi, une organisation appelée ECMA (European Computer Manufacturing Association) a élaboré un ensemble de normes JavaScript que les navigateurs devaient mettre en œuvre. Ainsi, tant que vous suivez ces normes lorsque vous écrivez du JavaScript, votre code devrait fonctionner de manière prévisible selon ces normes. Cette norme s’appelle EcmaScript et ils publient des normes mises à jour depuis 1997. Et depuis 2015, ils publient ces normes chaque année, et donc la dernière norme publiée s’appelle ES2021 au moment de la rédaction de cet article de blog.

Mais toutes les versions ne sont pas les mêmes, certaines différences de version ne sont pas aussi importantes, tandis que d’autres introduisent des changements assez majeurs dans le langage. Les derniers changements majeurs ont eu lieu avec ES2015, également appelé ES6, car c’était la sortie de la version six de la normalisation ECMAScript. L’un des changements significatifs a concerné les déclarations de variables.

Avant ES6, seul le mot-clé “var” était utilisé et c’était le seul moyen de déclarer des variables, d’où le nom “var”. Le mot-clé var offrait des flexibilité qui pouvaient causer des problèmes indésirables. Parce qu’il était significativement flexible dans son utilisation, il était plus facile de faire des erreurs avec les variables si vous n’étiez pas aussi prudent que vous le devriez. Par exemple, si vous déclariez une variable appelée “user1”, vous ne pouvez pas redéclarer une variable appelée user1 avec les nouveaux mots-clés “let” et “const”, mais vous pourriez le faire avec le mot-clé “var”. Et si vous oubliez que vous avez déjà un user1 dans votre programme, la deuxième fois que vous déclarez le user1 avec les informations d’un autre utilisateur, vous écraseriez effectivement les informations du premier utilisateur, ce qui supprimerait effectivement les informations du premier utilisateur.

// cela peut causer de la confusion
var user1 = "John";
var user1 = "Jack";
// si vous essayez de faire la même chose 
// avec let ou const vous obtiendrez une erreur
let user1 = "John";
let user1 = "Jack";
// de même, vous obtiendrez également une erreur
// si vous essayez de faire la même chose avec le mot-clé const
const user1 = "John";
const user1 = "Jack";

Mais ce n’est pas comme si vous ne verriez pas le mot-clé “var” utilisé quelque part, vous le verrez certainement, surtout dans certains cours de JavaScript de niveau débutant. Surtout s’ils ont quelques années, il y a beaucoup de tutoriels qui vous montreront encore l’ancienne façon d’écrire du JavaScript. Mais la réalité est que ce n’est tout simplement plus la meilleure pratique à utiliser. Au lieu de cela, la meilleure pratique est d’utiliser les mots-clés “let” ou “const” lors de la déclaration de variables, en fonction de vos besoins. Mais de quels besoins parlons-nous ? En résumé, si vous prévoyez de changer la valeur à l’intérieur d’une variable, vous voudrez utiliser le mot-clé “let”, si vous savez que vous ne changerez pas la valeur dans une variable, vous voudrez opter pour “const” à la place. Voyons quelques exemples de déclarations de variables en utilisant à la fois let et const.

// nous pouvons utiliser "let" lorsque nous voulons suivre le niveau de jeu de l'utilisateur
// parce que nous savons que cela va changer
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// nous pouvons utiliser le mot-clé "const" lors de la déclaration de l'ID utilisateur
// parce que nous savons que nous ne le changerons pas
const userId = 1010101999;

Si vous avez également remarqué dans le code ci-dessus, avec les dernières meilleures pratiques, nous n’écrivons le mot-clé de déclaration qu’une seule fois, et nous le faisons lorsque nous déclarons d’abord la variable. Lorsque nous voulons changer la valeur à l’intérieur de la variable plus tard, nous n’utilisons aucun mot-clé avant le nom de la variable.

Lorsque nous voulons accéder aux données que ces variables ou constantes contiennent, nous pouvons simplement utiliser leur nom. Par exemple, si nous voulons montrer à l’utilisateur son niveau de jeu et son ID utilisateur, nous le faisons avec le code suivant :

// nous pouvons ajouter l'ID utilisateur à la fin de la phrase avec un signe plus
// nous expliquerons cela plus tard dans le tutoriel
alert("Votre ID utilisateur est : " + userId);
// nous pouvons également montrer à l'utilisateur son niveau de jeu comme suit
alert("Votre niveau de jeu actuel est : " + gameLevel);
// alternativement, nous pouvons afficher directement 
// le contenu des variables en les montrant dans une alerte
alert(userId);
alert(gameLevel);

Exécuter les deux derniers blocs de code fournirait les sorties suivantes :

Comment nommer vos variables ?

Lors de la nomination de vos variables, il y a certaines règles et conventions que vous devez prendre en compte. La première considération est de savoir quels caractères vous pouvez utiliser pour nommer vos variables ? Peuvent-elles commencer ou se terminer par un chiffre ? Existe-t-il une vérité tacite commune pour nommer vos variables ? Répondons à tout cela et plus encore.

Différents langages de programmation ont différentes conventions pour nommer les variables. En JavaScript, la convention est de les nommer avec ce qu’on appelle “camel casing”, et cela se présente comme suit. Si le nom de la variable n’a qu’un seul mot, vous écrivez simplement ce mot en minuscules. S’il y a plusieurs mots dans le nom de la variable, vous écrivez le premier mot en minuscules et vous mettez en majuscule tous les mots suivants et vous les écrivez sans espaces ni autres signes. Par exemple, si nous créons un jeu, nous pourrions nommer les variables comme suit :

// une variable d'un seul mot
let strength = 50;
// un nom descriptif qui inclut plusieurs mots
let numberOfArrowsLeft = 145;

En plus d’utiliser des caractères alphabétiques, nous pouvons également utiliser des chiffres, le signe dollar et le signe de soulignement dans les noms de variables. Il est important de noter que vous ne pouvez pas commencer le nom de la variable par un chiffre, mais vous pouvez le terminer par un chiffre.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Notez que juste parce que c’est possible, nous ne voulons pas nommer nos variables avec des noms peu clairs ou avec des symboles. Et c’est un autre sujet en soi. Lors de la nomination des variables, la convention est d’avoir des noms clairs et descriptifs. Par exemple, si nous devons nommer une variable pour indiquer combien de flèches restent dans le sac d’un archer, nous devrions utiliser un nom descriptif tel que celui que nous avons utilisé dans l’exemple ci-dessus. Si nous devions simplement utiliser :

let x = 145;

Ce nom ne nous dirait rien sur la valeur qu’il contient. Et même quelques jours après avoir écrit ce code, nous devrions lire le code environnant pour comprendre ce que cette variable pourrait signifier. C’est pourquoi, tant pour votre propre clarté lors de l’écriture du code, que pour votre futur vous qui pourrait revoir le code, il est vraiment important de vous habituer à nommer vos variables de manière claire et descriptive. Cela deviendra également encore plus important lorsque vous commencerez à travailler avec d’autres personnes et à leur montrer votre code.

À ce stade, vous pensez peut-être que : C’est génial que nous puissions déplacer les données et même les changer en utilisant des variables. Mais de quelles données parlons-nous ici ? Pourquoi avons-nous mis certaines parties entre guillemets et d’autres parties ne le sont pas ? Pour répondre à tout cela et plus encore, voyons les types de données de base en JavaScript.

Types de données de base en JavaScript

Différents types de données sont bons pour faire différentes choses. Dans ce tutoriel sur les types de données de base en JavaScript, nous allons voir les 3 types de données les plus basiques qui sont couramment utilisés en JavaScript. Plus tard dans la série, nous apprendrons d’autres types de données en JavaScript. Une fois que vous aurez appris ces 3 types de données de base, il sera beaucoup plus facile d’apprendre les autres types de données. Les 3 types de données que nous allons voir dans ce tutoriel sont : Chaînes, Nombres et Booléens. Sans plus tarder, commençons par le premier.

Chaînes

Si vous avez suivi le tutoriel depuis le début, vous avez déjà travaillé avec le type de données chaîne ! Lorsque nous avons écrit une alerte qui disait “Bonjour, le monde !”, cela utilisait le type de données chaîne pour stocker le texte que nous avons écrit. En JavaScript, il y a 3 façons de représenter des chaînes. La première consiste à entourer votre texte de guillemets doubles. La deuxième consiste à entourer votre texte de guillemets simples. Et la troisième consiste à entourer votre texte de backticks. Les trois ressemblent à ceci :

const string1 = "Du texte ici.";
const string2 = 'Du texte ici.';
const string3 = `Du texte ici.`;

Comme vous pouvez le voir, celui avec les “backticks” ressemble beaucoup à celui avec les guillemets simples, mais il est légèrement plus décontracté. L’utilisation de backticks pour créer des chaînes est une fonctionnalité introduite avec ES6, pour faciliter le travail avec des données textuelles. Elle offre plusieurs avantages par rapport aux deux autres précédentes. Par convention, vous pouvez voir soit les guillemets doubles, soit les backticks utilisés plus souvent. Vous pouvez trouver les backticks sur la touche à gauche du chiffre 1, sur votre clavier.

L’utilisation de guillemets doubles semble plus familière et est plus facile à comprendre au premier coup d’œil, mais les backticks offrent plus d’avantages dans l’ensemble. Dans cet exemple, les trois fonctionnent de la même manière car il s’agit d’un exemple simple. Pour afficher les trois en même temps, ou même sur la même ligne, une chose que nous pouvons faire est d’écrire leurs noms et d’utiliser le signe plus entre eux, de manière à ajouter les chaînes les unes aux autres.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Comme vous pouvez le voir, les trois sont affichés juste après que l'un d'eux se termine. Cela est dû au fait que nous avons simplement dit à l'interpréteur d'ajouter les chaînes les unes aux autres. Si nous voulons ajouter des espaces entre elles, nous pouvons toujours ajouter cet espace avec une autre chaîne.</p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Nous pouvons également vérifier le type de données d’une variable en écrivant “typeof” devant elle. Par exemple :

alert(typeof string1);

Nombres

Lorsque nous travaillons avec des nombres en JavaScript, nous utilisons généralement le type de données “Number”. C’est le plus simple pour commencer et il n’y a presque pas de courbe d’apprentissage.

Lorsque vous tapez un nombre, il est représenté dans le type de nombre. Et si nous assignons ce nombre à une variable ou une constante, ils auront également le type de données nombre.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

En plus des nombres réguliers, JavaScript fournit également d’autres fonctionnalités qui peuvent nous aider à écrire un code plus sûr et plus prévisible. Par exemple, en JavaScript, nous pouvons avoir quelque chose appelé “Infinity”, et c’est exactement ce que cela semble. De plus, cela peut être une infinité positive et une infinité négative. Voyons à quoi cela ressemble avec un exemple.

// nous pouvons diviser par zéro et cela ne lance pas d'erreur
// au lieu de cela, cela renvoie Inifinity
alert(13 / 0);

// de même, nous pouvons également obtenir une infinité négative
alert(-25 / 0);

Comme vous l’avez déjà vu avec quelques exemples, nous pouvons également effectuer des opérations arithmétiques avec des nombres. De l’addition de base, de la soustraction, de la multiplication, de la division à des opérations arithmétiques plus spécifiques à la programmation. Nous en apprendrons davantage à leur sujet dans le prochain tutoriel.

Booléens

Les booléens sont extrêmement courants en programmation. La plupart du temps, nous n’utiliserons pas explicitement leurs noms, mais nous utiliserons leur simple propriété en arrière-plan. Un booléen peut avoir deux valeurs : “true” et “false” et elles sont exactement ce qu’elles semblent être. Souvent, vous vous retrouverez à écrire du code pour faire une comparaison et une conclusion basée sur le résultat de cette comparaison.

Souvent, ces comparaisons sont enracinées dans des scénarios de la vie réelle, et elles suivent une logique simple. La lumière est-elle allumée ou éteinte ? Pleut-il dehors ? Avez-vous faim ? Ce nombre est-il plus grand que l’autre nombre ? Ce paragraphe est-il plus long que le suivant ? L’utilisateur est-il sur un grand écran ?

Il y a de nombreuses fois où vous ne voulez pas simplement avoir une valeur numérique ou une valeur de chaîne pour les choses, mais vous voulez en fait une réponse oui ou non. En résumé, à ces moments-là, nous utiliserons le type de données booléen.

// le premier nombre est-il plus grand que le deuxième
alert(13 > 12);

// vérifier le type de variable
let isRainyOutside = true;
alert(typeof isRainyOutside);

Exécuter ce code nous donnerait la sortie suivante :

Maintenant, vous en savez plus sur les variables et les types de données en JavaScript. Dans le prochain article de blog, nous utiliserons ces types de données pour commencer à prendre des décisions dans notre code et bien plus encore !

Si vous aimez notre contenu, n’oubliez pas de rejoindre la communauté Facebook !