{"id":190,"date":"2020-11-01T16:26:00","date_gmt":"2020-11-01T16:26:00","guid":{"rendered":"https:\/\/kurtgrung.com\/blog\/?p=190"},"modified":"2024-02-06T14:00:58","modified_gmt":"2024-02-06T14:00:58","slug":"nullish","status":"publish","type":"post","link":"https:\/\/kurtgrung.com\/blog\/nullish\/","title":{"rendered":"nullish ??, elvis ?: or .?"},"content":{"rendered":"\n<p>Nullish Coalescing Operator (??)<br>Conditional (Ternary) Operator (?:) aka the Elvis Operator.<br>Optional chaining (?.) <br><br>The (<code>??<\/code>) and (<code>?:<\/code>) are both operators in JavaScript, but they serve different purposes.<\/p>\n\n\n\n<p><strong>Nullish Coalescing Operator (<code>??<\/code>):<\/strong><br><br>The &#8220;Nullish Coalescing&#8221; operator is a feature introduced in ECMAScript 2020 (ES11) JavaScript. It is represented by two question marks (<code>??<\/code>) and is used to provide a default value for a variable if the variable is <code>null<\/code> or <code><em><strong>undefined<\/strong><\/em><\/code>, but not for other falsy values such as <code><strong>0<\/strong><\/code>, <code><strong>false<\/strong><\/code>, or an empty string (<code>\"\"<\/code>).<br><br>The&nbsp;<strong>nullish coalescing (<code>??<\/code>)<\/strong>&nbsp;operator is a logical operator that returns its right-hand side operand when its left-hand side operand is&nbsp;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-primary-color\"><em><strong>null<\/strong><\/em><\/mark>&nbsp;or&nbsp;<kbd><code><em><strong>undefined<\/strong><\/em><\/code><\/kbd>, and otherwise returns its left-hand side operand.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Introduced in ECMAScript 2020 (ES11).<\/li>\n\n\n\n<li>It provides a concise way to handle default values for variables that may be <code><strong>null<\/strong><\/code> or <code><strong>undefined<\/strong><\/code>.<\/li>\n\n\n\n<li>It returns the right-hand operand when the left-hand operand is <code><strong>null<\/strong><\/code> or <code><strong>undefined<\/strong><\/code>; otherwise, it returns the left-hand operand.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let variable = null;\nlet result = variable ?? \"default value\";\nconsole.log(result); \/\/ Output: \"default value\"<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Conditional (Ternary) Operator (<code>?:<\/code>):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This is a standard JavaScript operator used for conditional expressions.<\/li>\n\n\n\n<li>It is a concise way of writing an <code>if-else<\/code> statement.<\/li>\n\n\n\n<li>It evaluates a condition and returns one of two values depending on whether the condition is true or false.<\/li>\n\n\n\n<li>Not new \ud83d\ude42 been in since its early versions of JavaScript. <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>let x = 5;\nlet result = x &gt; 0 ? \"positive\" : \"non-positive\";\nconsole.log(result); \/\/ Output: \"positive\"<\/code><\/pre>\n\n\n\n<p><br><strong>TODO<\/strong> &#8211; Optional chaining (?.) more info. <br><br><strong>In summary<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the Nullish Coalescing Operator (<code>??<\/code>) when you want to provide a default value for a variable if it is <code><strong>null<\/strong><\/code> or <code><strong>undefined<\/strong><\/code>.<\/li>\n\n\n\n<li>Use the Conditional (Ternary) Operator (<code>?:<\/code>) when you want to create a conditional expression based on a <strong>true\/false<\/strong> condition.<\/li>\n<\/ul>\n\n\n\n<p>These operators can be used in different scenarios, and choosing between them depends on the specific use case and the behaviour you want to achieve in your code.<br><br><strong>MDN Docs<\/strong><br><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Nullish_coalescing\" target=\"_blank\" rel=\"noreferrer noopener\">Nullish Coalescing<\/a><br><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_operator\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional (Ternary) <\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nullish Coalescing Operator (??)Conditional (Ternary) Operator (?:) aka the Elvis Operator.Optional chaining (?.) The (??) and (?:) are both operators in JavaScript, but they serve different purposes. Nullish Coalescing Operator (??): The &#8220;Nullish Coalescing&#8221; operator is a feature introduced in ECMAScript 2020 (ES11) JavaScript. It is represented by two question marks (??) and is used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114,8,7,51],"tags":[121,120,116,67,9,115,11,66,65,69],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-best-practice","category-code","category-news","category-research","tag-conditional-ternary-operator","tag-nullish-coalescing-operator","tag-ternary","tag-coalescing","tag-coding","tag-conditional","tag-javascript","tag-nullish","tag-nullish-coalescing","tag-operator"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":17,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}