Booléens JavaScript

Table des matières

    Afficher la table des matières

Un booléen JavaScript représente l'une des deux valeurs suivantes : true ou faux.

Valeurs booléennes

Très souvent, en programmation, vous aurez besoin d'un type de données qui ne peut avoir qu'un seul de deux valeurs, comme

  • OUI NON

  • ALLUMÉ ÉTEINT

  • VRAI FAUX

Pour cela, JavaScript dispose d'un type de données Booléen. Cela ne peut que prenez les valeurs vrai ou faux.

La fonction booléenne()

Vous pouvez utiliser la fonction Boolean() pour savoir si une expression (ou une variable) est vrai:

Exemple

Boolean(10 > 9)

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the value of Boolean(10 &gt; 9):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Boolean(10 > 9);
</script>

</body>
</html>

Ou encore plus simple :

Exemple

(10 > 9)
10 > 9

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the value of 10 &gt; 9:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 10 > 9;
</script>

</body>
</html>

Comparaisons et conditions

Le chapitre Comparaisons JS donne un aperçu complet des opérateurs de comparaison.

Le chapitre Conditions JS donne un aperçu complet des instructions conditionnelles.

Voici quelques exemples:

==

Description : égal à

Exemple :

if (day == "Monday")
>

Description : supérieur à

Exemple :

if (salary > 9000)
<

Description : moins de

Exemple :

if (age < 18)

La valeur booléenne d'une expression constitue la base de toutes les comparaisons et conditions JavaScript.

Tout ce qui a une « valeur » est vrai

Exemples

100

3.14

-15

"Hello"

"false"

7 + 1 + 3.14

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"100 is " + Boolean(100) + "<br>" +
"3.14 is " + Boolean(3.14) + "<br>" +
"-15 is " + Boolean(-15) + "<br>" +
"Any (not empty) string is " + Boolean("Hello") + "<br>" +
"Even the string 'false' is " + Boolean('false') + "<br>" +
"Any expression (except zero) is " + Boolean(1 + 7 + 3.14);
</script>

</body>
</html>

Tout sans « valeur » est faux

La valeur booléenne de 0 (zéro) est faux :

let x = 0;
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of 0:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

La valeur booléenne de -0 (moins zéro) est faux :

let x = -0;
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of  -0:</p>

<p id="demo"></p>

<script>
let x = -0;
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

La valeur booléenne de "" (chaîne vide) est false :

let x = "";
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of "":</p>

<p id="demo"></p>

<script>
let x = "";
document.getElementById("demo").innerHTML = Boolean("");
</script>

</body>
</html>

La valeur booléenne de undefined est false :

let x;
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of undefined:</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

La valeur booléenne de null est false :

let x = null;
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of null:</p>

<p id="demo"></p>

<script>
let x = null;
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

La valeur booléenne de false est (vous l'aurez deviné) false :

let x = false;
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of false:</p>

<p id="demo"></p>

<script>
let x = false;
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

La valeur booléenne de NaN est faux :

let x = 10 / "Hallo";
Boolean(x);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Display the Boolean value of NaN:</p>

<p id="demo"></p>

<script>
let x = 10 / "Hello";
document.getElementById("demo").innerHTML = Boolean(x);
</script>

</body>
</html>

Booléens JavaScript en tant qu'objets

Normalement, les booléens JavaScript sont des valeurs primitives créées à partir de littéraux :

let x = false;

Mais les booléens peuvent également être définis comme des objets avec le mot-clé new :

let y = new Boolean(false);

Exemple

let x = false;
let y = new Boolean(false);

 //
typeof x returns boolean
 //
typeof y returns object

Ne créez pas d'objets booléens.

Le mot-clé new complique le code et ralentit la vitesse d'exécution.

Les objets booléens peuvent produire des résultats inattendus :

Lorsque vous utilisez l'opérateur ==, x et y sont égaux :

let x = false;
let y = new Boolean(false);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Booleans and Boolean objects cannot be safely compared:</p>

<p id="demo"></p>

<script>
let x = false;         // x is a boolean
let y = new Boolean(false);  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Lorsque vous utilisez l'opérateur ===, x et y ne sont pas égaux :

let x = false;
let y = new Boolean(false);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Booleans and Boolean objects cannot be safely compared:</p>

<p id="demo"></p>

<script>
let x = false;         // x is a Boolean
let y = new Boolean(false);  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Notez la différence entre (x==y) et (x===y).

(x == y) vrai ou faux ?

let x = new Boolean(false);
let y = new Boolean(false);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Booleans and Boolean objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
const x = new Boolean(false);
const y = new Boolean(false);
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) vrai ou faux ?

let x = new Boolean(false);
let y = new Boolean(false);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Booleans</h1>
<p>Booleans and Boolean objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
const x = new Boolean(false);
const y = new Boolean(false);
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

La comparaison de deux objets JavaScript renvoie toujours false.

Référence booléenne complète

Pour une référence complète, rendez-vous sur notre Complete Référence booléenne JavaScript.

La référence contient des descriptions et des exemples de toutes les propriétés et méthodes booléennes.