Working with Javascript, many of you have encountered the following cases:
1 2 3 4 5 | <span class="token number">1</span> <span class="token operator">*</span> <span class="token string">'foo'</span> <span class="token punctuation">;</span> <span class="token comment">//NaN</span> <span class="token number">1</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token punctuation">;</span> <span class="token comment">//2</span> <span class="token string">'foo'</span> <span class="token operator">*</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token comment">//NaN</span> <span class="token string">'foo'</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token comment">//'foo1'</span> |
This is due to the so-called Javascript Type Coercion. Understandably, JS always tries to force the data type. For example:
1 2 | <span class="token number">1</span> <span class="token operator">+</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token comment">//1</span> |
In the above example, JS would first cast the boolean true to number 1 and then do the addition and get a result of 2.
Using operations with operators like - , * , / , and % will force the data type to return a number .
1 2 3 4 5 | <span class="token string">'3'</span> <span class="token operator">-</span> <span class="token string">'2'</span> <span class="token punctuation">;</span> <span class="token comment">//1</span> <span class="token string">'2'</span> <span class="token operator">*</span> <span class="token string">'4'</span> <span class="token punctuation">;</span> <span class="token comment">//8</span> <span class="token string">'8'</span> <span class="token operator">/</span> <span class="token string">'2'</span> <span class="token punctuation">;</span> <span class="token comment">//4</span> <span class="token string">'8'</span> <span class="token operator">%</span> <span class="token string">'3'</span> <span class="token punctuation">;</span> <span class="token comment">//2</span> |
But with the + operator, it is unlikely that the data type returned will be number because we can use + to do the math OR combine the strings together. So, by default, the operators when using + will prioritize returning string data types.
1 2 3 | <span class="token number">5</span> <span class="token operator">+</span> <span class="token string">'1'</span> <span class="token punctuation">;</span> <span class="token comment">//'51'</span> <span class="token number">5</span> <span class="token operator">+</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token comment">//6</span> |
JS also has another type of data compression that is truthiness. For example, if/else you use if/else with a certain value, then JS can force the data type of that value to true or false .
1 2 3 4 5 | <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">100</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> i <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'true'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Most values in JS are cast to true except for 7 values
false0-0NaN""nullundefinedThese values are to be cast to false