Apprenez à programmer avec JavaScript

Vous savez désormais déclarer différents types de variables. En tant que développeur, vous aurez aussi souvent besoin de stocker plusieurs données dans des listes. Pour cela, l’option la plus simple est d’utiliser des tableaux.

Découvrez les tableaux en JavaScript

Si vous manipulez des données similaires ou qui partagent la même thématique, il est préférable de les regrouper dans un tableau, plutôt que de les stocker individuellement dans des variables différentes. Cela vous permet de les retrouver en un seul endroit, et de limiter le nombre de variables dans votre code.

Déclarez un tableau en JavaScript

Pour déclarer un tableau en JavaScript, vous devez utiliser les crochets  [ ]  . Chaque valeur contenue dans le tableau est séparée par une virgule  ,  :

const maCollectionDeFilms = ["Titanic", "Jurassic Park", "Le Seigneur des Anneaux"]

Vous pouvez également stocker des variables dans votre tableau :

const monFilmPrefere = "Titanic"
const monPremierFilm = "Le Seigneur des Anneaux"

const maCollectionDeFilms = [monFilmPrefere, monPremierFilm]

// maCollectionDeFilms vaut ["Titanic", "Le Seigneur des Anneaux"]

Accédez à un élément de votre tableau

Pour accéder au contenu de cette case, vous écrirez donc :

let premierFilmDuTableau = maCollectionDeFilms[0]

Comptez le nombre d’éléments de votre tableau

Imaginons que vous vouliez connaître le nombre total de films que vous possédez dans votre collection. Vous écrirez  :

const maCollectionDeFilms = ["Titanic", "Le Seigneur des Anneaux"]
const nombreDeFilms = maCollectionDeFilms.length
console.log(nombreDeFilms)
// nombreDeFilms vaut 2

Modifiez votre tableau grâce aux méthodes

Les méthodes s’utilisent avec des parenthèses  ( )  . À l’intérieur de ces parenthèses vous pouvez passer des valeurs, c'est-à-dire des données, qui serviront à la méthode pour modifier les données de votre tableau. En réalité, vous avez déjà utilisé une méthode fournie par JavaScript : console.log() ! 

Ajoutez des données grâce à la méthode push

Pour ajouter des données à un tableau, vous devez utiliser la méthode push en lui indiquant la valeur que vous souhaitez ajouter.

Si vous voulez ajouter Retour vers le futur à votre liste de films, vous écrirez :

let mesFilms = ["Titanic", "Jurassic Park"]
mesFilms.push("Retour vers le futur")

console.log(mesFilms)
// mesFilms vaut ["Titanic", "Jurassic Park", "Retour vers le Futur"]

Supprimez des données grâce à la méthode pop

Pour supprimer la dernière donnée de votre tableau, vous pouvez utiliser la méthode pop sans avoir besoin de passer de valeurs (c'est-à-dire, sans rien écrire entre les parenthèses).

Si vous voulez retirer Retour vers le futur de votre liste de films, vous écrirez :

let mesFilms = ["Titanic", "Jurassic Park", "Retour vers le futur"]
mesFilms.pop()

// mesFilms vaut ["Titanic", "Jurassic Park"]

Récapitulons en vidéo

Je vous propose de revenir sur ces différentes opérations dans la vidéo ci-dessous :

Distinguez les copies par “valeur” et par “référence”

La copie par valeur

Lorsqu’on programme, il arrive parfois que l’on veuille dupliquer une variable. C’est le cas lorsque l’on doit sauvegarder une valeur avant de la modifier, par exemple. Pour cela, le plus simple est de copier le contenu d’une variable à l’intérieur d’une autre variable.

Mais que se passe-t-il en réalité lorsque nous effectuons cette opération ?

// Copie par valeur
let variableSimple1 = 25
let variableSimple2 = variableSimple1

Eh bien, cela va dépendre du type de la variable. Si variable2 est un type simple (boolean, number ou string), alors le contenu sera dupliqué.

Souvenez-vous, dans le deuxième chapitre du cours, je vous expliquais que, lorsqu’on crée une variable, on lui attribue une étiquette. Pour reprendre notre métaphore de l’armoire, ce qui est dans le tiroir variable1 va être dupliqué, et la copie sera mise dans variable2. Au final, nous aurons deux tiroirs indépendants avec chacun une valeur à l’intérieur.

La copie par référence

Imaginez maintenant que vous vouliez copier une variable qui contient un contenu de type “complexe” :  un objet ou un tableau, par exemple. Dans ce cas, JavaScript fait une copie par référence.

let variableComplexe1 = ['pomme', 'cerise']
let variableComplexe2 = variableComplexe1

Dans ce cas, vous devez déclarer un nouveau tableau et recopier toutes les valeurs une par une.

let variableComplexe3 = [...variableComplexe1];

Ici, je dis que dans variableComplexe3, je recopie un par un tous les éléments qui sont dans variableComplexe1. Comme ces variables sont de type simple, nous avons une vraie copie, et les deux tableaux sont indépendants !

Voici un exemple pour illustrer tout ça :

////////////////////
// Copie par valeur
////////////////////
let variableSimple1 = 25
let variableSimple2 = variableSimple1

variableSimple2 = 30

// Le console.log va afficher 25, le fait d’avoir changé la valeur de variableSimple2 ne change rien pour variableSimple1
console.log("variableSimple1", variableSimple1)
console.log("variableSimple2", variableSimple2)

///////////////////////
// Copie par référence
///////////////////////
let variableComplexe1 = ['pomme', 'cerise']
let variableComplexe2 = variableComplexe1
let variableComplexe3 = [...variableComplexe1];

variableComplexe2.push('poire')

// Le console.log va afficher pomme cerise ET poire. On a modifié la seconde variable, mais le contenu de la première a été changé aussi, parce que c’est le même contenu.
console.log('variableComplexe1', variableComplexe1)
console.log('variableComplexe2', variableComplexe2)
console.log('variableComplexe3', variableComplexe3)

Vous pouvez également suivre cette opération dans la vidéo ci-dessous  :

À vous de jouer !

Et maintenant, entraînez-vous à manipuler des tableaux avec cet exercice CodePen.

Déclarez les morceaux de votre playlist

Commençons par faire un inventaire des CD en votre possession.

1. Déclarez un tableau playlist qui contiendra trois de vos morceaux préférés.

2. Stockez le nombre de morceaux disponibles dans une variable totalMorceaux.

Ajoutez les morceaux de vos amis

Pour plaire à tout le monde, vous décidez de laisser vos amis choisir deux morceaux supplémentaires pour compléter votre collection.

• Ajoutez deux morceaux au tableau playlist de manière à porter le total à cinq morceaux.

Enlevez le dernier morceau de votre playlist

Malheureusement, certains ne sont pas d’accord avec le dernier morceau ajouté. Il va falloir faire du tri ! 😱

• Supprimez le dernier morceau ajouté à votre collection.

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

• Un tableau est un conteneur qui permet de regrouper plusieurs valeurs ou variables.

• Un tableau possède une propriété length qui permet de connaître le nombre de données contenues dans un tableau.

• Une méthode s’utilise avec des parenthèses  ( )  , et permet d’interagir avec le contenu du tableau. Il existe de nombreuses méthodes différentes mises à disposition par le langage.

• Lorsqu’on copie une variable simple, JavaScript réalise une copie par valeur (la valeur est dupliquée).

• Lorsqu’on copie une variable complexe, JavaScript réalise une copie par référence (les deux variables pointent sur la même valeur).

Et voilà, vous venez de faire vos premiers pas en JavaScript. Vous savez désormais manipuler des données, toutes mes félicitations ! 🥳

Dans la prochaine partie du cours, nous rentrerons dans la logique de programmation en rédigeant notre premier fichier JavaScript. Mais avant, je vous propose de tester vos connaissances grâce au quiz.