ES6 Guide complet : L'Opérateur Ternaire (Partie 6)

Introduction

Dans cette sixième partie de notre série sur ES6, nous allons explorer l'opérateur ternaire, une syntaxe concise pour écrire des conditions en une seule ligne. Cet opérateur est particulièrement utile pour des décisions logiques simples et peut rendre votre code plus compact et lisible.

Si vous n'avez pas encore lu les parties précédentes, je vous recommande de commencer par là pour avoir une base solide avant d'approfondir cet aspect spécifique d'ES6.

1. Qu'est-ce que l'Opérateur Ternaire ?

L'opérateur ternaire (condition ? valeurSiVrai : valeurSiFaux) est une alternative concise à l'instruction if...else. Il permet de tester une condition et de retourner une valeur en fonction du résultat.

a) Syntaxe de Base

📋 Copier le code

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No';

console.log(canVote); // Output: Yes

Explication :

• condition ? valeurSiVrai : valeurSiFaux teste une condition et retourne une valeur en fonction du résultat.
• Ici, si age >= 18, la valeur est 'Yes', sinon 'No'.

b) Comparaison avec if...else

L'opérateur ternaire peut souvent remplacer une instruction if...else simple. Voici un exemple comparatif :

Exemple avec if...else

📋 Copier le code

let message;
if (age >= 18) {
message = 'Yes';
} else {
message = 'No';
}

console.log(message); // Output: Yes

Exemple avec l'Opérateur Ternaire

📋 Copier le code

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No';

console.log(canVote); // Output: Yes

Comparaison : La version avec l'opérateur ternaire est plus concise tout en restant lisible.

2. Utilisation Avancée de l'Opérateur Ternaire

L'opérateur ternaire peut également être imbriqué pour gérer plusieurs conditions. Cependant, il est important de garder le code lisible et compréhensible.

Exemple : Imbriquer des Opérateurs Ternaires

📋 Copier le code

const score = 85;
const grade = score >= 90 ? 'A' :
 score >= 75 ? 'B' :
 score >= 60 ? 'C' : 'D';

console.log(grade); // Output: B

Explication :

• L'opérateur ternaire peut être imbriqué pour tester plusieurs conditions successives.
• Dans cet exemple, la note score est évaluée pour attribuer une lettre (A, B, etc.).

3. Meilleures Pratiques avec l'Opérateur Ternaire

Voici quelques conseils pour utiliser efficacement l'opérateur ternaire :

• Utilisez-le pour des conditions simples : Évitez de rendre le code illisible en imbriquant trop de conditions.
• Privilégiez la lisibilité : Si une condition devient complexe, préférez utiliser un bloc if...else.
• Documentation claire : Ajoutez des commentaires si nécessaire pour expliquer les conditions imbriquées.

4. L'Opérateur Ternaire en Action avec React

L'opérateur ternaire est largement utilisé dans React pour conditionner le rendu des composants. Il permet de simplifier les conditions logiques et de rendre le code plus concis et lisible.

a) Conditionner le Rendu d'un Élément

Vous pouvez utiliser l'opérateur ternaire pour afficher ou masquer un élément en fonction d'une condition. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
<div>
<p>
	{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
</p>
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
	{isLoggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}

// Utilisation du composant
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);

Explication :

• Le hook useState est utilisé pour gérer l'état local (isLoggedIn) du composant.
• L'opérateur ternaire {isLoggedIn ? 'Welcome back!' : 'Please sign in.'} affiche un message différent selon la valeur de isLoggedIn.
• De même, le texte du bouton change dynamiquement grâce à l'opérateur ternaire.

b) Afficher ou Masquer un Composant

Vous pouvez également utiliser l'opérateur ternaire pour conditionner l'affichage d'un composant entier. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function Profile({ user }) {
return (
<div>
<h2>{user.name}'s Profile</h2>
<p>Age: {user.age}</p>
</div>
);
}

function App() {
const [user, setUser] = useState(null);

const handleLogin = () => {
setUser({ name: 'Alice', age: 25 });
};

return (
<div>
<button onClick={handleLogin}>
	{user ? 'Update Profile' : 'Log in'}
</button>

{user && <Profile user={user} />} {/* Afficher le composant Profile si user existe */}
</div>
);
}

// Utilisation du composant
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Explication :

• Le composant Profile est affiché uniquement si l'état user n'est pas null.
• {user && <Profile user={user} />} utilise l'opérateur ternaire implicite (ou opérateur "and") pour conditionner le rendu du composant Profile.
• Cela évite d'avoir à écrire un bloc if...else explicite dans le JSX.

c) Comparaison avec if...else dans React

Bien que l'opérateur ternaire soit souvent préféré pour son concision, il est parfois nécessaire d'utiliser des blocs if...else pour des conditions plus complexes. Voici un exemple comparatif :

Avec l'Opérateur Ternaire

📋 Copier le code

function Message({ isPositive }) {
return (
<p>
{isPositive ? 'Good news!' : 'Bad news.'}
</p>
);
}

Avec un Bloc if...else

📋 Copier le code

function Message({ isPositive }) {
if (isPositive) {
return <p>Good news!</p>;
} else {
return <p>Bad news.</p>;
}
}

Comparaison : La version avec l'opérateur ternaire est plus concise, mais le bloc if...else peut être préféré pour des conditions plus complexes ou lorsque plusieurs éléments doivent être rendus.

d) Meilleures Pratiques avec l'Opérateur Ternaire dans React

Voici quelques conseils pour utiliser efficacement l'opérateur ternaire dans React :

• Privilégiez la simplicité : Utilisez l'opérateur ternaire pour des conditions simples et évitez les imbriquements excessifs.
• Mixez avec d'autres opérateurs : Combinez l'opérateur ternaire avec l'opérateur "and" (&&) pour des conditions plus expressives.
• Documentez vos conditions : Ajoutez des commentaires si nécessaire pour clarifier les intentions derrière vos conditions.

Résumé de la Partie 6

Dans cette partie, nous avons exploré l'opérateur ternaire, une syntaxe concise pour écrire des conditions en une seule ligne. Grâce à cet opérateur, vous pouvez simplifier vos instructions if...else simples tout en maintenant une bonne lisibilité.

Passez à la Partie 7: L'opérateur d'étalement pour apprendre à utiliser l'opérateur d'étalement, une autre fonctionnalité puissante d'ES6.