Apprendre Javascript: Variables et Types de données

Dans la première partie de cette série de tutoriels nous avons appris ce que c'est que le Javascript, ces différentes version, sa particularité et aussi sa syntaxe. Nous allons, dans ce tutoriel découvrir les variables en Javascript, leur déclaration et utilisation, puis nous parlerons des différents type de données en Javascript.

Variables

Une variable pour faire simple est un conteneur (associé à un nom) qui garde des valeurs. Ce conteneur sera disponible durant toute l'exécution de notre programme. En mathématiques, on connaît une variable comme étant une lettre qui représente un nombre, en programmation aussi c'est le même fonctionnement.

Pour déclarer une variable, on utilise le mot clé let suivi du nom de la variable puis l'opérateur = et la valeur de la variable

let age = 18

Je déclare une variable age qui à la valeur 18.

Pour tester ce que nous allons faire ici, je vous propose de lancer la console de votre navigateur, pour cela, si vous utilisez Google Chrome ou Firefox, faites juste la combinaison ctrl + shift + i, vous devez avoir un panneau qui s'ouvre qui ressemble à ceci, assurez vous de bien être sur l'onglet Console.

Le panneau qui affiche la console sur Chrome

Le panneau qui affiche la console sur Firefox

Nous allons faire un test vite fait, aller dans la console du navigateur (ctrl + shift + i) et écrivez ceci

console.log('Hello World')

Cette instruction affiche le message Hello World dans la console. Vous pouvez essayer voir, le message s'affiche bien.

Affichage du message 'Hello World' dans la console sur Chrome

Bon moi je suis sur Chrome, vous devez donc avoir la même chose sur la console de Firefox.

Revenons maintenant sur notre programme, nous avons déclarer une variable qui s'appelle age et qui à la valeur 18, essayons d'afficher cette variable dans la console pour vérifier que tout marche bien

let age = 18
console.log(age)

Nous avons bien le nombre 18 qui s'affiche dans la console.

En Javascript, on peut utiliser 3 mots clé pour déclarer une variable: let, const et var.

let et var permettent de déclarer des variables qui peuvent changer durant l'exécution du programme.

const quand à lui permet de déclarer des variables qui ne changeront pas durant l'exécution du programme, ce sont des données immuables (constantes).

Pour savoir la différence entre ces trois mots clé je vous exhorte d'aller lire cet article.

Une variable doit toujours être déclarées avant de l'utiliser.

Nomination des variables

Avant de continuer, revenons sur un point essentiel, la nomination des variables. Cette règle va être pratiquement la même pour tous les langages de programmation. Le nom d'une variable doit:

commencer par une lettre, underscore (tiret du bas) _ ou le signe $
le reste du nom n'est composé que de lettres, chiffres, underscore _ et $
il n'y a pas d'espace dans le nom d'une variable, vous pouvez utiliser le camelCase () ou remplacer toutes les espaces par des underscores _
n'utiliser pas les mots clés du langage de programmation que vous utilisez, dans notre cas Javascript donc

Une variable peut avoir n'importe quel nom en respectant les règles ci-dessus, mais il est important d'utiliser des noms qui parlent et qui disent tout de suite ce que la variable contient.

let name = 'Diallo' // le nom de la variable reflete son contenu
let x = 'Niang' // mauvaise nomination

Le Javascript est sensible à la casse, cela veut dire que la variable firstName est différente de FirstName qui est aussi différente firstname.

Les types de données

Maintenant que nous savons comment fonctionne les variables en Javascript, nous allons voir quels types de données une variable peut prendre.

Les type de données permettent en quelque sorte de classifier nos différentes variables, on ne peut par exemple pas faire des opérations mathématiques avec des caractères, mais plutôt avec des chiffres. Le Javascript dispose actuellement de 7 types de données dont 6 sont dits primitifs: Number (les nombres), String (les chaînes de caractères), Boolean (les booléens), Null (rien), undefined (pas défini) et Symbol (disponible depuis ES6), plus le type Object (Objet, peut contenir plusieurs variables de type différents). Nous allons tout de suite voir la différence entre ces type des données.

Avant de continuer, rappelons que le Javascript est un langage faiblement typé, ce qui veut dire que le langage déterminera automatiquement le type d'une variable, on n'a donc pas besoin de spécifier le type d'une variable à sa création.

Voyons maintenant en profondeur ces différents types de données.

Number

Le type Number représente les nombres comme nous les connaissons que ce soit des entiers ou des décimales, c'est aussi simple que ça. En Javascript, nous n'avons pas besoin de spécifier si notre nombre est un entier ou décimal, le langage le traite automatiquement.

Pour définir donc une variable de type Number, on fait juste:

let age = 18

C'est aussi simple que cela, on donne le nom de notre variable et sa valeur.

Les nombres peuvent êtres négatifs ou décimales

let age = 18
let pi = 3.14
let x = -2

Et on peut aussi faire toutes les opérations mathématiques que l'on connaît:

let x = 4
let b = 4 + 2 // 6
let sum = x + b // 10
let reste = sum % b // 4

Une autre chose, le type Number ne peut pas prendre plus de 15 chiffres

let x = 999999999999999 // 999999999999999
let y = 9999999999999999 // 10000000000000000

Boolean

Les booléens sont des variables qui sont soit vraies soit fausses. Elles ne peuvent donc que prendre ces deux valeurs.

Les valeurs booléennes sont très couramment utilisées en programmation lorsqu'une valeur peut basculer entre oui ou non, activé ou désactivé, ouvert ou fermé et vrai ou faux. Les booléens peuvent représenter l'état actuel de quelque chose susceptible de changer.

On utilise par exemple un booléen pour dire si une case à cocher est cochée ou non, si un circuit est ouvert ou fermé, ...

let isChecked = true
let isActive = false

Les booléens sont aussi utilisés pour savoir si deux variables sont égales ou différentes

5 > 4 // true
8 < 7 // false

Strings

Les strings (chaînes de caractères) sont une suite de caractère, comme ce texte par exemple.

Pour créer une chaînes de caractères, il faut toujours le mettre dans des apostrophes doubles

let fullName = "Mamadou Aliou Diallo"

Ou des apostrophes simples (pas double quoi)

let fullName = 'Mamadou Aliou Diallo'

La différence entre ces deux écritures? Aucune, absolument.

Mais un petit problème se pose quand je veux écrire cette chaîne de caractères: Je vais à l'école

let sentence1 = "Je vais à l'école"
let sentence2 = 'Je vais à l'école

Vous voyez la différence?

Essayons avec cette chaîne aussi: Bonjour, je suis "COOL".

let sentence3 = "Bonjour, je suis "COOL"."
let sentence4 = 'Bonjour, je suis "COOL".'

Ah, la c'est un peu bizarre. Expliquons:

sentence1: Aucun problème, tout marche bien, nickel
sentence2: Les problèmes commence. On met notre chaîne de caractères dans une apostrophe unique, on commence à écrire notre texte et on met l'apostrophe entre le l et le ', sauf que Javascript lui ne connais pas ça, il prend donc cet apostrophe comme la fermeture de notre chaîne de caractères et tout ce qui vient après n'est plus pris en compte
sentence3: Problème, là aussi on met notre chaîne de caractères dans des doubles apostrophes, puis on met le met COOL dans des apostrophes doubles, la première apostrophe autour de COOL (la deuxième dans la chaîne, tu vois un peu?), Javascript le prend comme la fermeture de la chaîne, le mot COOL n'est donc pas pris en compte, l'apostrophe que nous avons mis pour la fermeture du mot COOL, Javascript le traite comme le début d'une autre chaîne
sentence4: La aussi, il n'y a aucun problème. Tout marche bien

Tout ça pour dire que:

Utiliser des apostrophes simples si votre chaîne contient des apostrophes doubles (par exemple pour une chaîne de caractères qui contient des attributs HTML) et utilisez des apostrophes doubles si votre chaîne contient des apostrophes simples.

Et si ma chaîne ne contient pas d'apostrophes du tout? Personnellement je préfère les apostrophes simples.

let sentence1 = "Je vais à l'école"
let sentence3 = 'Bonjour, je suis "COOL".'
let greetings = 'Hello World!'

Voilà.

Et si votre chaîne contient des apostrophes simples et double? On a aussi pensé à vous, y a de la place pour tout le monde. Si vous allez donc à l'école et que vous êtes COOL (ce qui est très rare), voila ce qu'il faut faire:

Utilisez des apostrophes simples, et partout ou il y a une apostrophe simple, lui faire précéder un antislash ()
Utilisez des apostrophes doubles, et partout ou il y a une apostrophe double, lui faire précéder un antislash ()

J'ai personnellement une préférence pour la première écriture.

let sentence1 = 'Bonjour, je vais &#xE0; l\'&#xE9;cole et je suis "COOL".'
let sentence2 = "Bonjour, je vais &#xE0; l'&#xE9;cole et je suis \"COOL\"."

Nous pouvons aussi faire l'addition de deux chaînes pour faire ce qu'on appelle la concaténation.

let greetings = 'Bonjour'
let name = 'Diallo'
console.log(greetings + name) // BonjourDiallo

Y a pas d'espace? Oui il n'y a aucune espace dans nos chaînes, pour cela il faut juste rajouter de l'espace.

console.log(greetings + ' ' + name) // Bonjour Diallo

Essayons d'afficher une phrase plus complète.

let age = 18
let name = 'Kahere'
let address = 'Dakar'

console.log("Bonjour, je suis " + name + ", j'ai " + age + " ans et je suis &#xE0; " + address + ".")

Pour l'affichage de la chaîne, j'ai utilisé des doubles apostrophes, parce qu'à l'intérieur de la phrase nous avons une apostrophe

Sinon, nous avons les Template literals (Oh merci Seigneur).

Template Literals

Derrière ce nom un peu bizarre se cache une autre manière de créer des chaînes de caractères, en utilisant des ... BACK-TICK, oui je l'ai crié. Le back-tick c'est ça (`), sur le clavier anglais, il est juste en dessous de la touche Echap (esc).

console.log(`Mamadou Aliou Diallo`)
console.log(`Bonjour, je vais à l'école et je suis "COOL".`)

Extraordinaire n'est ce pas?

Et si ma chaîne contient des back-tick? Beh tu les précèdes d'un antislash.

console.log(`Cette chaine est \`vraiment bizarre\`.`)

Et pour faire la concaténation avec le back-tick, c'est encore plus simple, admirez

let age = 18
let name = 'Kahere'
let address = 'Dakar'

console.log(`Bonjour, je suis ${name}, j'ai ${age} ans et je suis à ${address}.`)

Vous savez donc quoi faire.

Null

Null est une valeur qui ne représente rien. C'est nous même qui l'attribuons à une variable, c'est donc en quelque sorte une absence intentionnelle de valeur pour une variable.

let name = null

Nous décidons par exemple d'initialiser notre variable name à la valeur null, qui veut dire rien.

undefined

undefined veut dire qu'une variable à été défini, mais cette variable n'a aucune valeur.

Alors c'est différent de null, quand on déclare une variable, Javascript lui affecte automatiquement undefined si on n'associe pas à cette variable une valeur.

let age // undefined

Nous avons défini une variable age et nous ne lui avons attribué aucune valeur, par défaut donc la variable age est de type undefined. Il ne faut pas oublier que Javascript défini le type d'une variable par la valeur de celui ci.

La différence entre null et undefined est plutôt subtile . Mais il faut savoir que:

null est une valeur que l'on attribue manuellement, ça ne se fait pas automatiquement et ça veut dire ne contient rien
undefined est un type automatiquement attribué à une variable par Javascript, si la variable n'est pas encore associée à une valeur
null est un objet
undefined est de type undefined

Symbol

Un Symbol est un type de données unique et immuable.

Un symbol est un nouveau type de données primitif apparu avec ES6. Sa caractéristique principale est que chaque symbole est totalement unique, contrairement aux autres types de données qui peuvent être écrasés, donc modifiés.

var name = Symbol()

Pour en découvrir plus sur ce type de données, vous pouvez donc vous rendre ici.

typeof

Avant de terminer ce tutoriel, j'aimerais vous parler de typeof.

typeof est un opérateur qui retourne une chaine qui indique le type d'une variable (ou d'une expression)

typeof 4 // number
typeof 4.5 // number

let name = 'Diallo'
typeof name // string
typeof 'Niang' // string
typeof '4' // string

typeof (4 > 5) // boolean

typeof null // object
typeof undefined // undefined

Le type de retour est une chaîne de caractères, vous pouvez donc l'afficher avec console.log() dans la console ou aussi faire des tests avec. On verra les test conditionnelles plus tard.

C'est donc fini pour cette partie, rendez-vous bientôt pour en apprendre plus sur Javascript.