<h2 id="what-is-type-coercion">What is Type Coercion</h2>
Type coercion is essentially implicitly or explicitly changing the data type in JavaScript.
You can do this in a couple of ways but first, let’s take a look at some ways the JavaScript engine tries to coerce types.
<h2 id="operator-precedence">Operator Precedence</h2>
Knowing operator precedence is a must when working with any programming language. You can check out the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">MDN</a> for information about operator precedence.
The operators or operator functions we are going to use in these examples are <code class="highlighter-rouge">< > + - * / == and ===</code>.
These operators are read from left-to-right in the JavaScript engine. The assignment operator <code class="highlighter-rouge">=</code> is read from right-to-left.
Take a look at this code:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="kd">var</span> <span class="nx">coerce</span> <span class="o">=</span> <span class="mi">1</span> <span class="o"><</span> <span class="mi">2</span> <span class="o"><</span> <span class="mi">3</span> <span class="o"><</span> <span class="mi">4</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">coerce</span><span class="p">);</span>
</pre>
</div>
Because we are using comparison operators, the console will return a Boolean value. In this case, when the code is run in the console, it returns <code class="highlighter-rouge">true</code>, like normal humans would assume.
<img src="/images/Screenshot2016-02-26_02-42-17_AM.jpg" alt="True" class="center-image" />
But look at this code:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="kd">var</span> <span class="nx">coerce</span> <span class="o">=</span> <span class="mi">4</span> <span class="o">></span> <span class="mi">3</span> <span class="o">></span> <span class="mi">2</span> <span class="o">></span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">coerce</span><span class="p">);</span>
</pre>
</div>
This is just reversing the order of the numbers and the comparison operators. Normally we’d assume this to be true. But check out the console:
<img src="/images/Screenshot2016-02-26_02-45-12_AM.jpg" alt="False" class="center-image" />
It returns <code class="highlighter-rouge">false</code>. Why? It’s coercion.
When the JavaScript engine computates this code, remember, it will read it from left-to-right.
In JavaScript, <code class="highlighter-rouge">true</code> and <code class="highlighter-rouge">false</code> have values, where <code class="highlighter-rouge">true</code> coerces to 1 and <code class="highlighter-rouge">false</code> coerces to 0.
<code class="highlighter-rouge">4 > 3</code> returns <code class="highlighter-rouge">true</code>. Now, JavaScript reads the next operation as <code class="highlighter-rouge">1 > 2</code> which is obviously going to return <code class="highlighter-rouge">false</code>. We then have <code class="highlighter-rouge">false > 1</code> or <code class="highlighter-rouge">0 > 1</code> which is false.
<h3 id="coercion-with-equality-operators">Coercion with Equality Operators</h3>
Equality operators are the equality <code class="highlighter-rouge">==</code> and strict equality <code class="highlighter-rouge">===</code> operators. When we use the plain equality operator, we can coerce a string into a number, a number into a Boolean, etc. Take a look at this code:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="mi">1</span> <span class="o">==</span> <span class="s2">"1"</span><span class="p">;</span>
</pre>
</div>
Here we are saying the data type <code class="highlighter-rouge">number</code> is equal to the data type <code class="highlighter-rouge">string</code> which isn’t correct. But because we are using the “non-strict” equality operator, it coerces to <code class="highlighter-rouge">true</code> as we can see in the console:
<img src="/images/Screenshot2016-02-26_07-31-48_PM.jpg" alt="Equality" class="center-image" />
You can assume that strict equality, then, would yeild false if we were to enter this into the console:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="mi">1</span> <span class="o">===</span> <span class="s2">"1"</span><span class="p">;</span>
</pre>
</div>
<img src="/images/Screenshot2016-02-26_07-34-53_PM.jpg" alt="Strict_equality" class="center-image" />
<h3 id="thoughts">Thoughts</h3>
There are reasons to use coercion but typically it’s bad practice. Apparently some ES6 syntax takes some of the pain of coercion away, but as you can see, you could very well end up with hard to identify bugs in your code so it’s best to use strict equality when you are comparing something and consider operator precedence when using comparison operators.
