Explain non-boolean value coercion to a boolean one in JavaScript?

Javascript Web Development Front End Technology

We will learn non−boolean value coercion to a Boolean one in JavaScript. For beginners, coercion word is new in JavaScript. So, let’s clarify what coercion.

Coercion is converting the variable of one data type to another data type. As we all know, JavaScript is not a type−strict language. So, we don’t need to define the types of the variable. Sometimes, JavaScript automatically coerces the variables and gives unpredictable results in the output.

There are two types of coercion in JavaScript. One is implicit coercion, and another is explicit coercion. We will learn both coercion one by one in this tutorial.

Explicit Coercion

Explicit coercion occurs when a non−boolean value is explicitly converted to a boolean using one of the boolean coercion methods, such as Boolean() or !!.

We will discuss these two methods in detail:

Explicit Coercion Using Double NOT (!!) Operator

When we use the not (!) operator with any values in JavaScript, it converts the non−boolean value to a Boolean value.

The one not(!) operator gives the false result of the values, and the two not (!!) operators give the actual result of the boolean values.

Syntax

Users can follow the syntax below to coerce the non−boolean values to a boolean one using double NOT operator. −

var non_bool = "non-bool";
var bool = !!non_bool;

In the above syntax, the first not (!) operator coerces the non_bool variable of the string type to a boolean variable. The second not(!) operator is used to get the actual boolean value of the non_bool variable.

Below are some examples of using the double NOT operator −

console.log(!!0); // logs false
console.log(!!1); // logs true

In the above example, the non−boolean value 0 is expliciltly coerced to a boolean value using the double NOT operator. The double NOT operator converts its operand to a boolean value and then inverts it, so the expression !!0 is equivalent to !(!false), which evaluates to false.

Let’s see a complete example with HTML and JavaScript

Example

In this example, we have created the three number variables named num1, num2, and num3. Also, we have initialized the number variables with the different positive, negative, and zero values.

Users can observe the actual boolean value of the numbers in the output. The boolean value of the zero is false as it is one of the falsy boolean values in JavaScript.

<html>
<body>
   <h2> Coercion using <i> Doble NOT (!!) </i> Operator </h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let num1 = 10;
      let num2 = 0;
      let num3 = -10;

      output.innerHTML += "num1 = " + num1 + "<br/>";
      output.innerHTML += "num2 = " + num2 + "<br/>";
      output.innerHTML += "num3 = " + num3 + "<br/>";
      output.innerHTML += "The boolean results of the above number values are given below.<br/>";

      // Using Double NOT Operator
      num1 = !!num1;
      num2 = !!num2;
      num3 = !!num3;

      output.innerHTML += "num1 = " + num1 + "<br/>";
      output.innerHTML += "num2 = " + num2 + "<br/>";
      output.innerHTML += "num3 = " + num3 + "<br/>";
   </script>
</body>
</html>

Explicit Coercion Using the Boolean() Constructor

In JavaScript, explicit coercion is the type conversion of the variable from one data type to another by the javascript developers. Here, we will learn explicit coercion of non−boolean values to boolean values.

We can simply use the “Boolean” constructor in JavaScript to convert any values to boolean values.

Syntax

Users can follow the syntax below to coerce the non−boolean value to a boolean one in JavaScript.

let var1 = 30;
let var2 = Boolean(var1);

In the above syntax, var1 is of number data type, and we have coerced it to the boolean using the Boolean constructor.

Below are some examples of using the Boolean() constructor −

console.log(Boolean(0)); // logs false
console.log(Boolean(1)); // logs true

In the above example, the non−boolean value 0 is explicitly coerced to a boolean value using the Boolean function. The Boolean function returns the boolean value of its argument, so the expression Boolean(0) returns false.

When we coerce any non−boolean value to the boolean value except the six false values, it will always give true as a result. For the six false values, we always get the false boolean value as a result.

The six falsy boolean values are given below.

False
“”
NaN
0
Null
Undefined

Example

We have created the different variables in this example and initialized them with different falsy values. We can observe that when we coerce them to boolean one, It always gives a false boolean value as a result.

<html>
<body>
   <h2> Coercion using the <i> Boolean()</i> Constructor </h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      // Creating the variables
      let falsy1 = undefined;
      let falsy2 = null;
      let falsy3 = "";

      output.innerHTML += "falsy1 = " + falsy1 + "<br/>";
      output.innerHTML += "falsy2 = " + falsy2 + "<br/>";
      output.innerHTML += "falsy3 = " + falsy3 + "<br/>";
      output.innerHTML +=
      "The boolean results of the above falsy values are given below.<br/>";

      // coercing the different falsy values to the boolean values.
      output.innerHTML += "falsy1 = " + Boolean(falsy1) + "<br/>";
      output.innerHTML += "falsy2 = " + Boolean(falsy2) + "<br/>";
      output.innerHTML += "falsy3 = " + Boolean(falsy3) + "<br/>";
   </script>
</body>
</html>

Implicit Coercion

Implicit coercion occurs when a non−boolean value is used in a context where a boolean value is expected. In this case, JavaScript will automatically convert the value to a boolean using a set of rules known as the "truthy" and "falsy" values.

Here are some examples of how a non boolean value ca be coerced to a boolean values−

Example

In this example we show image with a click using hidden attribute of the image in JavaScript −

// Example 1: Implicit coercion in a conditional statement
if (0) {
   console.log("This will not be logged");
}

// Example 2: Implicit coercion using the logical NOT operator
console.log(!0); // logs true
console.log(!1); // logs false

in the first example, the value 0 is used in a conditional statement, and it is implicitly coerced to a boolean value using the rules for truthy and falsy values. In JavaScript, the value 0 is considered falsy, so the conditional statement will not be executed.

In the second example, the logical NOT operator is used to negate the boolean value of the non−boolean value 0. The logical NOT operator inverts the boolean value of its operand, so the expression !0 is equivalent to !false, which evaluates to true.

There are two types of coercion in JavaScript. One is implicit coercion, and another is explicit coercion. We learned both types of coercion one by one in this tutorial.