{"id":3189,"date":"2024-04-16T11:27:07","date_gmt":"2024-04-16T09:27:07","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3189"},"modified":"2024-04-16T11:27:07","modified_gmt":"2024-04-16T09:27:07","slug":"exploring-the-difference-between-and-in-javascript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/04\/16\/exploring-the-difference-between-and-in-javascript\/","title":{"rendered":"Exploring the Difference Between ‘||’ and ‘??’ in JavaScript"},"content":{"rendered":"\n

In JavaScript, the logical OR operator<\/em><\/strong> (||) and the nullish coalescing operato<\/em><\/strong>r (??) are two distinct operators that serve different purposes when it comes to handling values. Understanding the differences between these operators is crucial for writing robust and error-free JavaScript code. In this article, we will delve into the nuances of ||<\/strong> and ??<\/strong> operators<\/em><\/strong>, providing detailed examples to illustrate their behaviors and use cases.<\/p>\n\n\n\n

The Logical OR Operator (||)<\/h4>\n\n\n\n

The logical OR operator (||) in JavaScript is commonly used for providing a default value when dealing with falsy values such as null, undefined, 0, false, and empty strings.<\/p>\n\n\n\n

Example:<\/strong> (*Javascript<\/em>)<\/p>\n\n\n\n

\/\/ Using the logical OR operator to provide a default value\r\nconst defaultValue = someValue || 'default';<\/code><\/pre>\n\n\n\n
In the above example, if someValue<\/em> is falsy, the expression will evaluate to ‘default’. However, if someValue<\/em> is truthy, the expression will evaluate to someValue<\/em>.<\/p>\n\n\n\n
JavaScript considers a value that is not among the following truthy:<\/p>\n\n\n\n
  • false<\/code><\/li>
  • 0<\/code><\/li>
  • ''<\/code> (empty string)<\/li>
  • null<\/code><\/li>
  • undefined<\/code><\/li>
  • NaN<\/code><\/li><\/ul>\n\n\n\n
    let name = \"\";\r\nlet defaultName = \"Chloe\";\r\nlet displayName = name || defaultName; \/\/ Chloe<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    The Nullish Coalescing Operator (??)<\/h4>\n\n\n\n
    The nullish coalescing operator (??<\/strong>) was introduced in ECMAScript 2020 as a more specific alternative to the logical OR operator. It specifically checks for null<\/span> or undefined<\/span> values and provides a default value only if the operand on the left-hand side is null<\/span> or undefined<\/span>.<\/strong><\/em><\/p>\n\n\n\n
    Example:<\/strong> (*Javascript<\/em>)<\/p>\n\n\n\n
    \/\/ Using the nullish coalescing operator to provide a default value\r\nconst defaultValue = someValue ?? 'default';<\/code><\/pre>\n\n\n\n
    In this example, if someValue<\/em> is null or undefined, the expression will evaluate to ‘default’. If someValue<\/em> is any other falsy value, the expression will evaluate to someValue<\/em>.<\/p>\n\n\n\n
    let age = 0;\r\nlet defaultAge = 18;\r\nlet userAge = age ?? defaultAge; \/\/ 0<\/code><\/pre>\n\n\n\n
    In this example, even though age is\u00a00<\/code>\u00a0(which is considered falsy), the\u00a0??<\/code>\u00a0operator does not consider it as a trigger for the fallback because\u00a00<\/code>\u00a0is not\u00a0null<\/code>\u00a0or\u00a0undefined<\/code>. Therefore,\u00a0userAge<\/code>\u00a0is assigned the value of age, which is\u00a00<\/code>.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    Key Differences and Use Cases<\/h4>\n\n\n\n
    1. Treatment of Falsy Values:<\/strong><\/li><\/ol>\n\n\n\n
      • The logical OR operator ( || ) considers all falsy values (such as 0, false, and empty strings) as candidates for providing a default value.<\/li>
      • The nullish coalescing operator ( ?? ) only considers null and undefined as candidates for providing a default value.<\/li><\/ul>\n\n\n\n


        2. Use Cases:<\/strong><\/p>\n\n\n\n
        • The logical OR operator ( || ) is commonly used for providing a default value in a broader sense, including cases where 0, false, or empty strings should trigger the default value.<\/li>
        • The nullish coalescing operator ( ?? ) is specifically designed for scenarios where null or undefined should trigger the default value, while other falsy values should not.<\/li><\/ul>\n\n\n\n

          <\/p>\n","protected":false},"excerpt":{"rendered":"
          In JavaScript, the logical OR operator (||) and the nullish coalescing operator (??) are two distinct operators that serve different purposes when it comes to handling values. Understanding the differences between these operators is crucial for writing robust and error-free JavaScript code. In this article, we will delve into the nuances of || and ?? […]<\/p>\n","protected":false},"author":1,"featured_media":258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[831,832,834,830,463,833],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3189"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3189"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3189\/revisions"}],"predecessor-version":[{"id":3190,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3189\/revisions\/3190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}