{"id":15526,"date":"2021-02-17T10:00:32","date_gmt":"2021-02-17T15:00:32","guid":{"rendered":"http:\/\/artsatmichigan.umich.edu\/ink\/?p=15526"},"modified":"2021-02-16T22:15:31","modified_gmt":"2021-02-17T03:15:31","slug":"hidden-gems-the-null-coalescence-operator","status":"publish","type":"post","link":"https:\/\/artsatmichigan.umich.edu\/ink\/2021\/02\/17\/hidden-gems-the-null-coalescence-operator\/","title":{"rendered":"Hidden Gems: The Null Coalescence Operator"},"content":{"rendered":"<p>In a previous Hidden Gems post, I covered the artistic side of programming as expressed through the use of the ternary operator. Here is the original\u00a0<a href=\"http:\/\/artsatmichigan.umich.edu\/ink\/2020\/11\/04\/hidden-gems-the-ternary-operator\/\" target=\"_blank\" rel=\"noopener\">post<\/a>\u00a0if you&#8217;re interested, otherwise here&#8217;s a quick summary of the concept: programming relies on the use of conditional statements, where a certain path is taken depending on the value of a variable or expression, and a ternary operator is an elegant, shorthand way of writing these conditionals. In the example below, the function <code>isItSnowing()<\/code>\u00a0will return a true or false value telling us if it is snowing. If it is snowing, then we&#8217;ll stay inside, and if it is not, then we&#8217;ll go outside.\u00a0The ternary operator has unlimited potential, with the ability to string multiple conditions together, but must be used carefully; just because it improves readability and style in this scenario does not mean it always will.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-15535\" src=\"http:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/isItSnowing.png\" alt=\"\" width=\"679\" height=\"79\" srcset=\"https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/isItSnowing.png 679w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/isItSnowing-300x35.png 300w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/p>\n<p>The null coalescence operator is a slightly more nuanced version of the ternary operator, but even more interesting due to it&#8217;s use cases. Oftentimes in programming, you want to assign a value to a variable, but you don&#8217;t know for sure that the value exists. The value might come from another source and you can&#8217;t guarantee that it was received correctly or as expected. In most programming languages, trying to use a value that was never created causes a disaster (one can easily see why), and will usually crash the program. However, programmers would usually prefer to provide some default value instead, to prevent the program from crashing. Here is that exact situation presented in relatively simple, but verbose code:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-15534\" src=\"http:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/conditional.png\" alt=\"\" width=\"924\" height=\"211\" srcset=\"https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/conditional.png 924w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/conditional-300x69.png 300w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/conditional-768x175.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/p>\n<p>This is a fairly straightforward conditional statement, which says in plain English, &#8220;if the value of temperature is known, the message will be that value, but if for some reason we don&#8217;t have the temperature, let the message be a default warning that we don&#8217;t have the temperature&#8221;. If you&#8217;ve been paying close attention, you might have noticed that this conditional is very similar to the one we explored when discussing ternary operators, and as a matter of fact, this conditional can be expressed using a ternary operator, as demonstrated here:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-15537\" src=\"http:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/ternary.png\" alt=\"\" width=\"954\" height=\"106\" srcset=\"https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/ternary.png 954w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/ternary-300x33.png 300w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/ternary-768x85.png 768w\" sizes=\"(max-width: 954px) 100vw, 954px\" \/><\/p>\n<p>Notice again the power of the ternary operator in simplifying the conditional. It compacts the same logic into one statement, which reduces the number of lines and is more efficient to run. Now behold the same statement written using the null coalescence operator:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-15536\" src=\"http:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/null.png\" alt=\"\" width=\"954\" height=\"104\" srcset=\"https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/null.png 954w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/null-300x33.png 300w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/null-768x84.png 768w\" sizes=\"(max-width: 954px) 100vw, 954px\" \/><\/p>\n<p>The differences may be subtle at first, but they are extremely important. Notice that there is no expression to test whether or not &#8220;temperature&#8221; exists, as it is built into the operator. Also see that it automatically assigns the value of &#8220;temperature&#8221; if it exists. Finally notice that the default message comes after the null coalescence operator, and is assigned when the value of &#8220;temperature&#8221; does not exist. A common way to read the operator in English is &#8220;reading from left to right, give me back the first thing that exists&#8221;. This use case is extremely common in programming, which is what ultimately led to the null coalescence operator being created. Personally, I was thrilled when I discovered this: after writing hundreds of the equivalent ternary versions, I had finally discovered a way to write less code while also improving the style of my code. Once a programmer is used to using this operator, it reads much more naturally than the ternary operator and saves valuable time when trying to understand the code. This operator can also be chained, similar to the ternary operator, as shown in this example, where the default string is used if both the &#8220;temperature&#8221; and &#8220;backupMessage&#8221; variables are null:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-15533\" src=\"http:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/chaining.png\" alt=\"\" width=\"956\" height=\"105\" srcset=\"https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/chaining.png 956w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/chaining-300x33.png 300w, https:\/\/artsatmichigan.umich.edu\/ink\/wp-content\/uploads\/2021\/02\/chaining-768x84.png 768w\" sizes=\"(max-width: 956px) 100vw, 956px\" \/><\/p>\n<p>At the end of the day, the null coalescence operator may not seem like a revolutionary idea, and it isn&#8217;t. However, it is a testament to the ingenuity and artistry of programmers, motivated by a unique combination of laziness and empathy for the programmers who follow. It is the accumulation of these small improvements that evolve into the modern programming languages we have today, which are more powerful and easier to read than ever before.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a previous Hidden Gems post, I covered the artistic side of programming as expressed through the use of the ternary operator. Here is the original\u00a0post\u00a0if you&#8217;re interested, otherwise here&#8217;s a quick summary of the concept: programming relies on the use of conditional statements, where a certain path is taken depending on the value of [&hellip;]<\/p>\n","protected":false},"author":2200,"featured_media":14199,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1602,1601,1557,1603,420],"_links":{"self":[{"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/posts\/15526"}],"collection":[{"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/users\/2200"}],"replies":[{"embeddable":true,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/comments?post=15526"}],"version-history":[{"count":2,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/posts\/15526\/revisions"}],"predecessor-version":[{"id":15538,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/posts\/15526\/revisions\/15538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/media\/14199"}],"wp:attachment":[{"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/media?parent=15526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/categories?post=15526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artsatmichigan.umich.edu\/ink\/wp-json\/wp\/v2\/tags?post=15526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}