{"id":707,"date":"2021-08-13T13:56:00","date_gmt":"2021-08-13T18:56:00","guid":{"rendered":"https:\/\/www.becomebetterprogrammer.com\/?p=707"},"modified":"2022-04-25T09:43:31","modified_gmt":"2022-04-25T14:43:31","slug":"what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript","status":"publish","type":"post","link":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/","title":{"rendered":"What is the Difference Between == vs === in JavaScript?"},"content":{"rendered":"\n<p>Whether you are coming from a different programming language like C#  or you are a brand new programmer learning about JavaScript, you have probably seen different JavaScript codebases using in some cases double equals <strong>(==)<\/strong> and in other cases using triple equals <strong>(===)<\/strong>. Although they seem similar at first, it is important to understand the differences between the two.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/#Using_Double_Equals\" >Using Double Equals (==)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/#Using_Triple_Equals\" >Using Triple Equals (===)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/#Which_one_Should_I_Use_or\" >Which one Should I Use (== or ===)?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/#Conclusion_Double_Equals_is_for_Loosers%E2%80%A6\" >Conclusion: Double Equals is for Loosers\u2026<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Double_Equals\"><\/span>Using Double Equals (==) <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When using double equals (==), JavaScript checks the equality between two values in a <em>loose<\/em> way. <\/p>\n\n\n\n<p><strong><em>What does loose way mean?  <\/em><\/strong><\/p>\n\n\n\n<p>Let me explain using the following example:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nfunction doubleEqualsExample() {\n   if (0 == false) {\n     console.log('it will display this message');   \n   } else {\n     console.log('it will not display this message');\n   }\n);\n\n\/\/ running our function should always log \"it will display this message\"\ndoubleEqualsExample();\n\n\n<\/code>\n<\/pre>\n\n\n\n<p>If we running the code in our previous example, our function <code>doubleEqualsExample()<\/code> will always display the same message <em>&#8220;it will display this message&#8221;<\/em>.<\/p>\n\n\n\n<p>This looks weird at first as we clearly know that <strong>0<\/strong> is not equal to <strong>false<\/strong>. One is a number, false is a boolean. They are not even the same data type. <\/p>\n\n\n\n<p><strong><em>What is happening in here?<\/em><\/strong><\/p>\n\n\n\n<p>Remember I mentioned about == performing a <em>loose<\/em> equality check? What is happening behind the scenes when using == is JavaScript converts one of the two values, in our example <strong>0 <\/strong>and <strong>false <\/strong>to a common data type. <\/p>\n\n\n\n<p>Therefore, JavaScript can convert <strong>0<\/strong> into a <em>boolean<\/em>.<\/p>\n\n\n\n<pre><code class=\"lang-javascript\">\n Boolean(0); \/\/ converts 0 to false\n Boolean(1); \/\/ converts 1 to true\n Boolean(24); \/\/ converts 24 to true\n<\/code><\/pre>\n\n\n\n<p>or <strong>false <\/strong>into a <em>Number<\/em><\/p>\n\n\n\n<pre><code class=\"lang-javascript\">\nNumber(false); \/\/ converts false to 0\nNumber(true);  \/\/ converts true to 1\n<\/code><\/pre>\n\n\n\n<p>Once this conversion happens, we will have two values with the same data type. Since our <code>doubleEqualsExample()<\/code> was using the <code>(0 == false)<\/code>, this will happen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>0<\/strong> will be converted to a <em>Boolean<\/em>, making it a <strong>false<\/strong>. Hence, our comparison will be <code>false == false<\/code>.<\/li><li><strong>false<\/strong> will be converted to <em>Number<\/em>, making it a <strong>0<\/strong> .Hence, our comparison will be 0 == 0.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Triple_Equals\"><\/span>Using Triple Equals (===)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When using triple equals (==), JavaScript checks the equality between two values in a <em>strict<\/em> way.<\/p>\n\n\n\n<p><em><strong>What does strict way mean?<\/strong><\/em><\/p>\n\n\n\n<p>Let&#8217;s see the following example:<\/p>\n\n\n\n<p>Our function <code>tripleEqualsExample<\/code>() will always log the message <em>&#8220;it will be false equality&#8221;<\/em>. Unlike using double equals, JavaScript doesn&#8217;t convert the data types to a common data type when using triple equals.<\/p>\n\n\n\n<p>Having said that, anyone who reads &#8220;is <strong>0 <\/strong>equal to <strong>false<\/strong>&#8221; will get the expected value of <strong>false<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Which_one_Should_I_Use_or\"><\/span>Which one Should I Use (== or ===)?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>After several years working with JavaScript, using it from small to large enterprise projects, your best bet is to go use triple equals (===). One of the reasons why it is recommended to use === is because it removes the ambiguity that generates among developers. <br><br>If you have several to run several equality comparisons between different data types (<em>Strings<\/em>, <em>Numbers<\/em>, and <em>Boolean<\/em>, etc) such as the following:<\/p>\n\n\n\n<pre><code class=\"lang-javascript\">\n\nconsole.log(1 === true); \/\/ it will be false;\nconsole.log('1' === 1); \/\/ it will be false;\nconsole.log(0 === false); \/\/ it will be false;\nconsole.log([1, 2] === '1,2'); \/\/ it will be false;\n\n<\/code>\n<\/pre>\n\n\n\n<p>As a developer, you are certain that a comparison between two different data types will fail. If that wasn&#8217;t the case, and we have the following comparisons:<\/p>\n\n\n\n<pre><code class=\"lang-javascript\">\n\nconsole.log(1 == true); \/\/ it will be true;\nconsole.log('1' == 1); \/\/ it will be true;\nconsole.log(0 == false); \/\/ it will be true;\nconsole.log([1, 2] == '1,2'); \/\/ it will be true;\n\n<\/code>\n<\/pre>\n\n\n\n<p>Developers expecting a specific behavior will get unexpected behavior. On top of that, it will make harder the process of finding the bug as reading the equality comparison with a naked eye looks <em>correct<\/em>, even though it is programmatically incorrect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion_Double_Equals_is_for_Loosers%E2%80%A6\"><\/span>Conclusion: Double Equals is for Lo<em>o<\/em>sers\u2026<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>From personal experiences, == represent more trouble than what its worth using it.  However, if you understand well enough how JavaScript works and your code doesn&#8217;t deal with equality comparisons between different data types, it is ok to use == as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether you are coming from a different programming language like C# or you are a brand new programmer learning about JavaScript, you have probably seen different JavaScript codebases using in some cases double equals (==) and in other cases using triple equals (===). Although they seem similar at first, it is important to understand the &#8230; <a title=\"What is the Difference Between == vs === in JavaScript?\" class=\"read-more\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/\" aria-label=\"More on What is the Difference Between == vs === in JavaScript?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":717,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":5,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":2506,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/707\/revisions\/2506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media\/717"}],"wp:attachment":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}