<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Prashant Vikram</title>
    <description>The latest articles on DEV Community by Prashant Vikram (@prashantmvikram).</description>
    <link>https://dev.to/prashantmvikram</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F277946%2F653486dd-9a24-4935-9dec-de873bb99a8c.png</url>
      <title>DEV Community: Prashant Vikram</title>
      <link>https://dev.to/prashantmvikram</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/prashantmvikram"/>
    <language>en</language>
    <item>
      <title>Back to basics: Why Does {} + [] Return 0?</title>
      <dc:creator>Prashant Vikram</dc:creator>
      <pubDate>Mon, 02 Jun 2025 15:45:39 +0000</pubDate>
      <link>https://dev.to/prashantmvikram/back-to-basics-why-does-return-0-1b8f</link>
      <guid>https://dev.to/prashantmvikram/back-to-basics-why-does-return-0-1b8f</guid>
      <description>&lt;p&gt;Most of us working regularly with JavaScript are already more or less accustomed to some of the unexpected, quirky behavior it exhibits.&lt;/p&gt;

&lt;p&gt;Take this classic example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// "33"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here’s one I stumbled across that really made me pause:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="c1"&gt;// 0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Take a wild guess why this happens.&lt;/p&gt;

&lt;p&gt;It’s because &lt;code&gt;{}&lt;/code&gt; is not treated as an object literal here — instead, it’s interpreted as an empty code block. That leaves us with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; 0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The unary &lt;code&gt;+&lt;/code&gt; coerces the empty array into a number, and the result is 0.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧩 More Examples of Type Coercion
&lt;/h3&gt;

&lt;p&gt;The &lt;a href="https://stackoverflow.com/a/11939072" rel="noopener noreferrer"&gt;Stack Overflow answer&lt;/a&gt; I found also mentions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="c1"&gt;// "[object Object]"&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, &lt;code&gt;[]&lt;/code&gt; is treated as an empty string, and &lt;code&gt;{}&lt;/code&gt; is treated as an object literal. JavaScript tries to concatenate them as strings — hence: &lt;code&gt;"[object Object]"&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;How about:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="c1"&gt;// ""&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Straightforward, right? Both arrays are treated as empty strings. Concatenating two empty strings gives… an empty string.&lt;/p&gt;

&lt;p&gt;And then there's this one:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="c1"&gt;// NaN&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This one’s a little trickier. The first &lt;code&gt;{}&lt;/code&gt; is still treated as a code block. The second &lt;code&gt;{}&lt;/code&gt; is coerced using the &lt;code&gt;+&lt;/code&gt; operator. Since objects can’t be coerced into numbers, the result is &lt;code&gt;NaN&lt;/code&gt;.&lt;/p&gt;




&lt;p&gt;⚙️ Why It Matters in Real Code&lt;/p&gt;

&lt;p&gt;I know, nobody is adding arrays and objects. This stuff is mostly a part of JS trivia.&lt;/p&gt;

&lt;p&gt;But I actually stumbled into something similar that led me down the "type and coercion" rabbit hole.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="c1"&gt;// some complex formula with no type safety&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pl&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// update UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The bug? Sometimes pl was 0, and the block didn’t execute — because 0 is falsy in JavaScript.&lt;/p&gt;

&lt;p&gt;At first, the condition seemed intended to guard against &lt;code&gt;undefined&lt;/code&gt; or &lt;code&gt;null&lt;/code&gt;. So we tried a safer check:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;pl&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;number&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// update UI&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pretty solid — except for one catch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="kc"&gt;NaN&lt;/span&gt; &lt;span class="c1"&gt;// "number"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Yep. &lt;code&gt;NaN&lt;/code&gt; is of type "number".&lt;/p&gt;

&lt;p&gt;So this condition passed even when &lt;code&gt;pl&lt;/code&gt; was &lt;code&gt;NaN&lt;/code&gt;, and the UI still updated with invalid values.&lt;/p&gt;

&lt;p&gt;We ended up adding a combination of checks (like &lt;code&gt;!isNaN(pl)&lt;/code&gt;) and some stronger type safety upstream.&lt;/p&gt;




&lt;p&gt;📌 Takeaways&lt;/p&gt;

&lt;p&gt;It’s good to experiment with “obvious cases that would never happen in real life” to see how a programming language actually handles them. And also because it's fun.&lt;/p&gt;

&lt;p&gt;Here are a few more I found interesting:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;        &lt;span class="c1"&gt;// false; null is coerced to 0&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;([])&lt;/span&gt;          &lt;span class="c1"&gt;// false; [] coerced to 0&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;          &lt;span class="c1"&gt;// false; "" coerced to 0&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;        &lt;span class="c1"&gt;// false; coerced to 1&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;       &lt;span class="c1"&gt;// false; coerced to 0&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;      &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;({})&lt;/span&gt;          &lt;span class="c1"&gt;// true; object can't be coerced to a number&lt;/span&gt;
&lt;span class="nf"&gt;isNaN&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;   &lt;span class="c1"&gt;// true; undefined, not be coerced to a number; NaN&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Got a favorite weird JavaScript case? Share it in the comments. Always open to learning something new.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
