Javascript if : comment gérer vos conditions et vos chemins?

Nous allons voir au cours de cet article, comment gérer vos différentes conditions et “chemins”. En Javascript, vous allez gérer ça avec if. Pour ramener les conditions à quelque chose de plus concret, à chaque fois que vous utilisez le mot “si” ou “quand” en français vous avez surement à faire à une condition :

• Si mon utilisateur se connecte, il accede à la page d’accueil
• Quand un utilisateur oublie un champs requis, je lui met une erreur en rouge

If else

Votre condition doit être soit vraie (true) soit fausse (false), il n’y a aucune autre option. Prenons un exemple extrêmement basique :

const condition = true; // votre variable est vraie, vous pouvez la passer à false

if(condition){
    console.log("c'est vrai");
}

// va afficher c'est vrai

En javascript, la condition dans votre if est dans ce cas là toujours true. Le but est de faire varier le résultat de la condition et de faire des conditions plus complexe.

const pokemon = "Pikachu";

if(pokemon === "Pikachu"){
    console.log("Hey, mais c'est Pikachu");
}

Vous avez plein d’opérateurs en javascript. Dans notre cas, si pokemon est égal à Pikachu alors j’affiche Hey, mais c’est Pikachu. Il est également possible de définir le sinon. En français cela donnerai quelque chose du style :

• Si pokemon est égal à Pikachu j’affiche Hey, mais c’est Pikachu
• Sinon j’affiche : “C’est pas Pikachu, je veux Pikachu”

const pokemon = "Pikachu";
if(pokemon === "Pikachu"){
    console.log("Hey, mais c'est Pikachu");
} else {
   console.log("C'est pas Pikachu, je veux Pikachu");
}

If else if else

Il est possible que maintenant que vous vouliez faire plus de deux chemins. Sous la forme : Si … sinon si …. sinon … . Vous aurez alors quelque chose qui peut ressembler à cela :

• Si pokemon est égal à Pikachu j’affiche Hey, mais c’est Pikachu
• Sinon si pokemon est égal à Carapuce : j’affiche C’est Carapuce!
• Sinon j’affiche : “C’est pas Pikachu, je veux Pikachu”

const pokemon = "Carapuce";
if(pokemon === "Pikachu"){
    console.log("Hey, mais c'est Pikachu");
}
else if(pokemon === "Carapuce"){
    console.log("C'est Carapuce!");
}
else {
   console.log("C'est pas Pikachu, je veux Pikachu");
}

A partir de 4 choix différents, je vous conseille fortement d’utiliser un switch qui est beaucoup plus lisible que de faire 40 if else if else. J’ai écris un très bon article sur le sujet : http://pierreterrat.com/javascript-switch

Opérateur ternaire

Vous avez l’opérateur ternaire. l’opérateur ternaire permet de faire un if else très rapidement. Un petit exemple pour illustrer tout ça :

//if else classique
const pokemon = "Pikachu";
if(pokemon === "Pikachu"){
    console.log("Hey, mais c'est Pikachu");
} else {
   console.log("C'est pas Pikachu, je veux Pikachu");
}

Si nous mettons cet exemple avec l’opérateur ternaire :

// Opérateur ternaire 
//(condition) ? (si vrai) : (si faux)
const pokemon = "Pikachu";
pokemon === "Pikachu" ? 
console.log("Hey, mais c'est Pikachu") 
: console.log("C'est pas Pikachu, je veux Pikachu");

Vous l’aurez compris il aura la syntaxe (condition) ? (si vrai) : (si faux).

J’espère que cet article sur les if et les conditions vous aura plu.

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.