JavaScript : Why does % operator work on strings? - (Type Coercion)

JavascriptWeb DevelopmentObject Oriented Programming

<p>Let&rsquo;s say we have a code snippet here that produces some startling results. Firstly, we see that the modulo operator is working fine with strings as well (surprisingly). Secondly, concatenation of two strings produces awkward results.</p><p>We need to explain why JavaScript does so?</p><p>Here&rsquo;s the problem code &minus;</p><h2>Example</h2><pre class="prettyprint notranslate">const numStr = &#39;127&#39;; const result = numStr % 5; const firstName = &#39;Armaan&#39;; const lastName = &#39;Malik&#39;; const fullName = firstName + + lastName; console.log(&#39;modulo result: &#39;, result); console.log(&#39;full name: &#39;, fullName);</pre><h2>Output</h2><pre class="result notranslate">modulo result: 2 full name: ArmaanNaN</pre><p>Before jumping into the code, let&rsquo;s first learn a bit about one of the most fundamental topics of JavaScript &rarr; Type Coercion.</p><h2>Type Coercion</h2><p>Basically, type coercion is a way used by JavaScript compilers to change one data type into another. Examples of valid type coercion will be changing string to boolean, number to string and so on.</p><p>Type coercion is a very vast topic and to restrict the length of this solution we will be exploring only the things used in this code snippet. Out of the two types of type coercion, one that is automatically done by compiler is called implicit type coercion.</p><p>It follows &minus;</p><p>Any data type (primitive or non-primitive) will be implicitly coerced to &minus;</p><ul class="list"><li><p>String (when used with binary + operator).</p></li><li><p>Number (when used with arithmetic operators like +, -, /, *,% and only the unary + triggers</p></li></ul><p>Number coercion not binary +, when used with comparison operator, bitwise operator or loose equality operator[==])</p><ul class="list"><li><p>Boolean (when used with logical operators &amp; | ! )</p></li></ul><p>***Another thing to note is that the precedence of unary (+) operator is higher than the binary (+) operator.</p><h2>Code Explanation</h2><p>So, with these things clear, let&rsquo;s move to the code and go though it line by line &minus;</p><pre class="result notranslate">Line 2 &rarr; result = &#39;127&#39; % 5;</pre><p>Implicit coercion takes in and sees the % operator, because of which it converts String &lsquo;127&rsquo; to Number 127 and 2 gets stored in result &minus;</p><pre class="result notranslate">Line 5 &rarr; fullName = firstName + + lastName;</pre><pre class="result notranslate">fullName = firstName + (+lastName); </pre><p>In normal course, the computation would have taken place from left to right but because of precedence of unary operator, it gets computed to Number first and the operation becomes like this &minus;</p><pre class="result notranslate">fullName = firstName + NaN;</pre><p>And then</p><pre class="result notranslate">fullName = ArmaanNaN</pre>
Updated on 18-Aug-2020 07:29:27