Where Javascript Coercion went wrong?
Tags: javascript, coercion, webdev, technology
Published: 2019-01-02 08:20:24

---
title: Where Javascript Coercion went wrong?
published: true
description: Coercion is one of the few surprises in javascript code
tags: javascript, Coercion, web development, technology
---

Coercion is unknowingly the conversion of a datatype to another with the use of the Javascript engine. One of the few surprises in Javascript. Now, this behaves differently for various operators and data types such as:

<ul> 
<li> + Operator </li>
<li>- Operator</li>
<li>Boolean</li>
<li>Equality signs</li>
<li>Arrays</li>
</ul>

It happens mostly because of the dynamic type declaration of javascript variable. The use of <b>var</b>.

With the use of other programming languages such as c#, If we make use of numbers and strings as data types, then, compile-time ought to show us the error before runtime.

So let’s dive in into each instance of Javascript coercion:

<ol> 

<li> From practice, the + operator returns strings, so the Javascript coerce the operands to strings.

Example: 3 + “90” will return 390
</li>

<li>Negative sign acts as a number, and it coerces the operand to a  number instead 

 Example: 90 - “3” will return 87
</li>

<li> Boolean, yes!
<ul> 

<li>The or/and logic gates</li>

<li>Apple || “orange” returns Apple which is the first value for the or operator and also because it’s true.</li>

<li>
If it were (undefined| “”| 0| false) || “orange” then orange would be returned.
<br>
<p> </p>
</li>

<li>So you can write a function such as this:

         <code>Function Whatsup(nickname){
            Nickname = nickname || “Stranger.”;
            console.log(“Hey ” + nickname);
                }

Whatsup();

</code>

Since nickname would be undefined and then false, the console will print out “Hey Stranger.”
</li>

</ul>
->> and for the “and” operator;
It returns the second value because it’s always false; 
</li>

<li>Equality checks for values and types

== checks for values, so coercion still occurs.

<code>If (44 == “44”)</code> will return true but if the triple operator equality sign is used instead, it will return false.

Ex:If <code>(44 === “44”)</code> returns false;
</li>

<li>The Array will return Nan for the - operator 
Ex; <code> [“Right Now”] - [“Later”]</code> will return Nan(Not a Number)
While <code>[“Right Now”] + [“Later”]</code> will concatenate and return RightNowLater as a string
</li>
</ol>

Remember the + operator always return strings as their value.

So in an instance where we have:

<code>console.log(1 < 4 < 3); </code>it will return true instead of false because the javascript sees it as:
<code>console.log(true < 3);</code>
“true” would be coerced to 1 and when compared will be 1 < 3 which will be true.


Here are some of the weird behaviours of coercion.

They are best tackled with strict equality operator sign, === 

But then again, coercion may not only be with the comparison but also how javascript checks for a boolean value.
To check how Javascript coerce output, check out Number(“”), Number(), or Boolean(undefined) and see what it coerce to with the given results.
Ex: I can check,
<code>
boolean("0");  that will be coerce to false
Boolean(undefined); will be coerce to false
Number("3") will be coerce to 3;
Number("Hello") will be coerce to NaN
</code>

Also checking the precedence matters as well.

Thanks and that’s all about Coercion.

If you love/like, please share/comment. Thanks!