{"id":3300,"date":"2022-07-30T11:26:28","date_gmt":"2022-07-30T16:26:28","guid":{"rendered":"https:\/\/www.becomebetterprogrammer.com\/?p=3300"},"modified":"2022-08-02T17:34:35","modified_gmt":"2022-08-02T22:34:35","slug":"javascript-double-exclamation-marks","status":"publish","type":"post","link":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/","title":{"rendered":"JavaScript | How Double Bangs (Exclamation Marks) !! Work"},"content":{"rendered":"\n<p>In Javascript, most users are well familiar with the single exclamation mark (\u201c!\u201d) symbol (<em>the logical \u201cnot\u201d operator<\/em>) used to reverse a boolean value. For example, <code>!true<\/code> will return false and <code>!false<\/code> will return true. Now, you must have come across the double exclamation mark <code>!!<\/code> symbols in your coding journey. Some developers call them \u201cthe double bang,\u201d or \u201cdouble shots.\u201d What exactly is the function of double exclamation marks and how do you use them in your Javascript code?<\/p>\n\n\n\n<p><strong>The double bang or exclamation marks (!!) is not a Javascript operator. It\u2019s a double <code>!<\/code> logic \u201cnot\u201d operator which converts a value to a boolean and then returns the opposite of the resulting boolean value.<\/strong><\/p>\n\n\n\n<p>To have a better understanding of the double bang, this post will first give you a detailed guide on truthy and falsy values and the logical \u201cnot\u201d operator in Javascript, before diving into the double bang.<\/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\/javascript-double-exclamation-marks\/#Javascript_Boolean_Values\" >Javascript Boolean Values<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Falsy_Values_in_Javascript\" >Falsy Values in Javascript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Truthy_Values_in_Javascript\" >Truthy Values in Javascript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Boolean_Operations_in_Javascript\" >Boolean Operations in Javascript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#The_Logical_%E2%80%9CNot%E2%80%9D_Operator_Single_Exclamation_Mark_or_Single_Bang_%E2%80%93\" >The Logical \u201cNot\u201d Operator (Single Exclamation Mark or Single Bang &#8211; ! )<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Double_Exclamation_Marks_Double_Bang_%E2%80%93\" >Double Exclamation Marks (Double Bang &#8211; !! )<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Why_double_exclamation_marks\" >Why double exclamation marks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Real_World_Application_of_the_Double_Exclamation_Marks\" >Real World Application of the Double Exclamation Marks !!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Javascript_Boolean_Values\"><\/span><a id=\"post-3300-_yc234skps4sv\"><\/a>Javascript Boolean Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Javascript language has a unique way of associating every value with a boolean &#8211; true or false value. For example, an empty string like let <code>str = \" \"<\/code> is regarded as false while a number greater than zero like <code>const num = 9<\/code> is regarded as true. Truthy Values are values that return an associated boolean value of True while Falsy values are values that return an associated boolean value of False.<\/p>\n\n\n\n<p>Let\u2019s look at some of the truthy and falsy values in Javascript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Falsy_Values_in_Javascript\"><\/span><a id=\"post-3300-_bxty8w1jifor\"><\/a>Falsy Values in Javascript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>All values in Javascript are considered \u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener\">Truthy values<\/a>\u201d unless they are defined as Falsy values. Below is a list of all falsy values in Javascript.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>False\nZero of Number type: 0 and also -0, 0.0, and hex form 0x0\n\" \", or ' ', or ` `: Any string with a length zero(0)\nZero of BigInt type: 0n and 0x0n\nNull\nUndefined\nNaN<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Truthy_Values_in_Javascript\"><\/span><a id=\"post-3300-_iq88fu1qh5dc\"><\/a>Truthy Values in Javascript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Some of the values considered as \u201cTruthy values\u201d include:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>An empty Object: {}\nAn empty Array: &#91;]\nNon-empty string: \"Javascript\"\nA value greater than Zero : 3.14 or 10\nDate: new Date();<\/code><\/pre>\n\n\n\n<p>Now that you have a good understanding of Truthy and Falsy values, let\u2019s see how they come into play when performing boolean operations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Boolean_Operations_in_Javascript\"><\/span><a id=\"post-3300-_r1ppcjez3kmm\"><\/a>Boolean Operations in Javascript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>There are operations in Javascript that tend to use the associated boolean value (true\/false) instead of the value itself. For example, conditional statements such as the \u201cif statement\u201d or the \u201c<a href=\"https:\/\/www.becomebetterprogrammer.com\/javascript-how-the-question-mark-works\/\">ternary operator<\/a>\u201d will check the associated boolean value instead of the value itself when checking for a particular condition.<\/p>\n\n\n\n<p>Let\u2019s have a look at the two variables below.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const str = \"Javascript\" \nconst num = 0<\/code><\/pre>\n\n\n\n<p>Here, we have both a Truthy and a Falsy value. When used in a conditional statement, <code>const str = \"Javascript\"<\/code> Is regarded as a Truthy value since it\u2019s not an empty string, while <code>const num = 0 <\/code> is regarded as a Falsy value since zero (0) is a Falsy value in Javascript.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>if (str){\n    console.log(\"Hello Block One\")\n}\n\/\/Returns: Hello Block One\n\nif (num){\n    console.log(\"Hello Block Two\")\n}\n\/\/This statement will NOT execute\n\nstr ? console.log(\"Condition is True\") : console.log(\"Condition is False\")\n\/\/Returns: Condition is True<\/code><\/pre>\n\n\n\n<p>Let\u2019s have a look at the code above. The first block of the \u201c<em>if statement<\/em>\u201d is executed because the condition is evaluated as True. However, the second block of the \u201cif statement\u201d didn\u2019t execute since the condition was evaluated as False. In the last line where we used a ternary operator, it returned the first statement \u201c<em>Condition is True<\/em>\u201d because the condition was evaluated as True.<\/p>\n\n\n\n<p>Now, using the same piece of code above, let\u2019s look at the single bang (!) or the logical \u201cnot\u201d operator.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Logical_%E2%80%9CNot%E2%80%9D_Operator_Single_Exclamation_Mark_or_Single_Bang_%E2%80%93\"><\/span><a id=\"post-3300-_t4b2di8zhkr\"><\/a>The Logical \u201cNot\u201d Operator (Single Exclamation Mark or Single Bang &#8211; <code>!<\/code> )<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The logical \u201cnot\u201d operator or commonly referred to as the \u2018single bang\u2019 reverses the associated boolean value of a variable.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>!true \/\/Returns: False\n!false \/\/Returns: True<\/code><\/pre>\n\n\n\n<p>In the previous section, we saw that <code>const str = \"Javascript\"<\/code> returned a Truthy value. By putting an exclamation sign in front of the <code>!str<\/code> variable, we will now get a Falsy value. Similarly, when we place an exclamation sign in front of the <code>!num<\/code> variable, we get a Truthy value.<\/p>\n\n\n\n<p>Take a look at the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>if (!str){\n    console.log(\"Hello Block One\")\n}\n\/\/This block will NOT execute as the condition evaluates to False\n\nif (!num){\n    console.log(\"Hello Block Two\")\n}\n\/\/ Hello Block Two - This block executed because the condition evaluates to  True<\/code><\/pre>\n\n\n\n<p>From the explanation above, we can conclude that the logical \u201cnot\u201d operator has two main functions.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It checks for the associated boolean value of a variable.<\/li><li>It returns the opposite of the \u201cassociated boolean value.\u201d<\/li><\/ul>\n\n\n\n<p>Now that you have a good understanding of Truthy-Falsy values and the logical not operator, let\u2019s look at the \u2018double bang\u2019 or the double exclamation marks in Javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Double_Exclamation_Marks_Double_Bang_%E2%80%93\"><\/span><a id=\"post-3300-_zg7lfzr8lolw\"><\/a>Double Exclamation Marks (Double Bang &#8211; <code>!!<\/code> )<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the previous section, we have seen that by using a single exclamation mark on a variable, we will get the opposite of its associated boolean value. What would happen if we instead used two exclamation marks?<\/p>\n\n\n\n<p>Well, a pretty interesting logic will come into play.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The first exclamation mark will cast the value of the variable to a boolean and then return the opposite of its associated boolean value.<\/li><li>The second exclamation mark will return the opposite of the returned boolean value.<\/li><\/ul>\n\n\n\n<p>Let\u2019s look at the code below to have a better understanding.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const marks = 13\n\nconsole.log(!marks) \/\/Returns False\n\nconsole.log(!!marks) \/\/ Returns True<\/code><\/pre>\n\n\n\n<p>From the results above, we see that the double bang first gets the opposite of the associated boolean value a variable and then returns the opposite of that.<\/p>\n\n\n\n<p>Let\u2019s look at more examples.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>!!false \/\/Returns FALSE\n!!true \/\/Returns TRUE\n\n!!0 \/\/Returns FALSE - zero is a falsy value\n!!1 \/\/Returns TRUE - a number greater than 0 is a truthy value\n\n!!\"\" \/\/Returns FALSE - an empty string is falsy value\n!!undefined \/\/Returns FALSE - undefined is falsy value\n!!null \/\/Returns FALSE - null is a falsy value\n\n!!{} \/\/ Returns TRUE an empty object is a truthy value\n!!&#91;] \/\/ Returns TRUE an empty array is a truthy value\n\nconst points = 40\n!!points \/\/ Returns TRUE\n\nconst city = \u201c \u201c\n!!city Returns FALSE<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_double_exclamation_marks\"><\/span><a id=\"post-3300-_7rq35hsmv1an\"><\/a>Why double exclamation marks?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Up to this point, I believe you have one main question about the double bang. Let\u2019s use the line of code below as an example.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const schoolName = \" \";<\/code><\/pre>\n\n\n\n<p class=\"has-vivid-cyan-blue-background-color has-background\"><strong>Question<\/strong>: If <code>schoolName<\/code> is an empty string, that means, it\u2019s already falsy value? So, what is the point of adding the double bang operator ( <code>!!schoolName<\/code>) if it will return a False when it was already False from the beginning?<\/p>\n\n\n\n<p>To understand this, you need to know that \u201cTruthy-Falsy\u201d and \u201cTrue-False\u201d are not technically the same thing in Javascript.<\/p>\n\n\n\n<p class=\"has-vivid-green-cyan-background-color has-background\"><strong>Answer<\/strong>: An empty string, is a falsy value in Javascript. When used in a conditional \u2018if statement,\u2019 it will evaluate to \u201cfalse\u201d but it\u2019s still an empty string. By using double exclamation, we cast\/ convert the value of the variable to a boolean value &#8211; in this case, \u201cFalse.\u201d Therefore, when used in a conditional statement, it will be the literal value of false, rather than an empty string. In short, the double bang is used to cast a variable to be <strong>explicitly boolean<\/strong>.<\/p>\n\n\n\n<p>Another reason why we use the double exclamation is that, according to the <a href=\"https:\/\/airbnb.io\/javascript\/#coercion--booleans\" target=\"_blank\" rel=\"noopener\">Airbnb Javascript documentation<\/a>, the double bang is one of the best methods of casting a variable to a boolean. As per the documentation, there are three main ways that you can cast a variable to a boolean with a rating of <em>bad<\/em> -&gt; <em>good<\/em> -&gt; <em>best<\/em>. The use of double exclamation marks is regarded as the best method of casting a value to boolean.<\/p>\n\n\n\n<p>The image below shows the piece of code as written in the documentation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"492\" src=\"http:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2022\/07\/word-image-3300-1.png\" alt=\"\" class=\"wp-image-3301\" srcset=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2022\/07\/word-image-3300-1.png 1600w, https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2022\/07\/word-image-3300-1-300x92.png 300w, https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2022\/07\/word-image-3300-1-1024x315.png 1024w, https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2022\/07\/word-image-3300-1-1536x472.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Real_World_Application_of_the_Double_Exclamation_Marks\"><\/span><a id=\"post-3300-_jc6raktb5xdu\"><\/a>Real World Application of the Double Exclamation Marks !!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s say we are developing a web application that fetches user details (e.g username) from a database and stores this value as a boolean. We would use the logic below.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const name = getUserName(userID); \n\nconst userName = !!name; \n\/\/If the userID exists in Database, this value will return True<\/code><\/pre>\n\n\n\n<p>Here, the userName variable stores the boolean value of the name variable which is either True or False.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><a id=\"post-3300-_bjhfg4hnkhw\"><\/a>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This post has given you a comprehensive guide about the Truthy and Falsy values, the logical \u201cnot\u201d operator, and the double exclamation marks in Javascript. The double exclamation marks or double bang return a value\u2019s truthy value. Therefore, a Truthy value will cast to a boolean True while a Falsy value will cast to a boolean False.<\/p>\n\n\n\n<p><strong>Was this article helpful? Do you have any comments or suggestions?<\/strong><\/p>\n\n\n\n<p>Let us know by replying on Twitter of <a href=\"https:\/\/twitter.com\/bbprogrammer\" target=\"_blank\" rel=\"noopener\">Become A Better Programmer<\/a> or to my <a href=\"https:\/\/twitter.com\/arealesramirez\" target=\"_blank\" rel=\"noopener\">personal Twitter account<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Javascript, most users are well familiar with the single exclamation mark (\u201c!\u201d) symbol (the logical \u201cnot\u201d operator) used to reverse a boolean value. For example, !true will return false and !false will return true. Now, you must have come across the double exclamation mark !! symbols in your coding journey. Some developers call them &#8230; <a title=\"JavaScript | How Double Bangs (Exclamation Marks) !! Work\" class=\"read-more\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/javascript-double-exclamation-marks\/\" aria-label=\"More on JavaScript | How Double Bangs (Exclamation Marks) !! Work\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3303,"comment_status":"closed","ping_status":"closed","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-3300","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\/3300","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=3300"}],"version-history":[{"count":4,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/3300\/revisions"}],"predecessor-version":[{"id":3306,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/3300\/revisions\/3306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media\/3303"}],"wp:attachment":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media?parent=3300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/categories?post=3300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/tags?post=3300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}