Défi

Nous souhaitons créer un réseau social en JavaScript. Chaque membre du réseau est représenté par un pseudo (chaîne de caractère).

Voici un programme que nous allons factoriser pas à pas :

1
const friendList = []
2
let addFriendChoice = true
3
console.log('Ajoutons un premier ami')
4
while (addFriendChoice) {
5
  const pseudoFriend = prompt('Quel est son pseudo ?')
6
  friendList.push(pseudoFriend)
7
8
  addFriendChoice = prompt('Souhaitez-vous ajouter un autre ami? O ou N?') === 'O'
9
}
10
11
console.log('Retirons un ami de votre liste')
12
const friendToRemove = prompt('Quel est son nom?')
13
// A compléter
14
15
console.log("Voici votre liste d'amis:", friendList)
16
Question
Compléter le code afin de supprimer l'ami demandé, s'il existe.
Indice
Il suffit de parcourir la liste d'amis et de supprimer l'ami correspondant. On ne retournera pas d'erreur si la personne n'est pas trouvée.
Indice
Pour supprimer le i-ème élément d'une liste, il faut utiliser l'instruction suivante :
1
friendList.splice(i, 1)
Indice
Une fois l'ami trouvé et supprimé, il n'est plus nécessaire de continuer la recherche. L'instruction break permet de sortir d'une boucle.
Solution
1
for (let i = 0; i < friendList.length; i++) {
2
  if (friendToRemove === friendList[i]) {
3
    friendList.splice(i, 1)
4
    break
5
  }
6
}
Maintenant que notre programme est complet, nous allons le modulariser.
Question
Proposer une fonction qui se chargera d'ajouter un ami. Elle prendra comme paramètre la liste d'amis et retournera la nouvelle version de la liste d'amis suite à l'ajout. La fonction s'appellera addFriend.
Indice
Le corps de la fonction sera sensiblement similaire au code existant pour ajouter un ami. Il comportera en plus une instruction return.
Solution
1
function addFriend (friends) {
2
  const pseudoFriend = prompt('Quel est son pseudo ?')
3
  friends.push(pseudoFriend)
4
  return friends
5
}
6
Question
Faire de même pour retirer un ami et on nommera la fonction removeFriend.
Solution
1
function removeFriend (friends) {
2
  const friendToRemove = prompt('Quel est son pseudo ?')
3
  for (let i = 0; i < friends.length; i++) {
4
    if (friendToRemove === friends[i]) {
5
      friends.splice(i, 1)
6
      break
7
    }
8
  }
9
  return friends
10
}
11
Question
Les deux fonctions addFriend et removeFriend comportent une duplication : la partie du code qui demande les informations sur l'ami à ajouter ou à enlever est identique.
Créer une fonction sans paramètre :
  • Qui demandera à l'utilisateur un pseudo
  • Qui retournera la chaîne de caractères correspondante.
Cette fonction sera nommée infoFriend().
Solution
1
function infoFriend () {
2
  const pseudoFriend = prompt('Quel est son pseudo ?')
3
  return pseudoFriend
4
}
5
Cette factorisation a un autre avantage : si on veut demander stocker plus d'informations sur les amis, la modification de la demande ne devra être faite qu'à un seul endroit.
Question
Donner le programme complet avec les fonctions.
Indice
Pour éviter tout effet de bord, il faut envoyer une copie d'une liste aux fonctions plutôt que la liste elle-même. Pour faire une copie d'une liste il faut utiliser l'instruction suivante :
1
liste.slice()
Indice
N'oubliez pas de faire appel à la fonction infoFriend() dans les fonctions d'ajout et de suppression.
Solution
1
function infoFriend () {
2
  const pseudoFriend = prompt('Quel est son pseudo ?')
3
  return pseudoFriend
4
}
5
6
function addFriend (friends) {
7
  friends.push(infoFriend())
8
  return friends
9
}
10
11
function removeFriend (friends) {
12
  const friendToRemove = infoFriend()
13
  for (let i = 0; i < friends.length; i++) {
14
    if (JSON.stringify(friendToRemove) === JSON.stringify(friends[i])) {
15
      friends.splice(i, 1)
16
      break
17
    }
18
  }
19
  return friends
20
}
21
22
let friendList = []
23
let addFriendChoice = true
24
console.log('Ajoutons un premier ami')
25
while (addFriendChoice) {
26
  friendList = addFriend(friendList.slice())
27
28
  addFriendChoice = prompt('Souhaitez-vous ajouter un autre ami? O ou N?') === 'O'
29
}
30
31
console.log('Retirons un ami de votre liste')
32
friendList = removeFriend(friendList.slice())
33
34
console.log("Voici votre liste d'amis:", friendList)
35
Notez que si le code est plus long, il s'adaptera mieux aux changements. Pour faire évoluer le code et permettre de mettre à jour un ami, ou pour ajouter un ami à un autre endroit, il suffira de ré-utiliser les fonctions addFriend et infoFriend.
La modularisation du code est donc un processus un peu plus coûteux au départ, mais qui évite une factorisation pénible et plus longue par la suite.