Exploring the contrast of && and ?? in JavaScript

Question

Exploring the contrast of && and ?? in JavaScript

My current focus is on utilizing the Logical AND && and Nullish coalescing operator ?? in handling conditional rendering of variables and values. However, I find myself struggling to fully comprehend how these operators function.

I am seeking clarity on the distinctions between these two operators and guidance on when it is more appropriate to use them over an if statement.

/* --------------------  ?? operator -------------------- */
const foo = null ?? '?? default string';
console.log(foo);

const baz = 0 ?? 10;
console.log(baz);

/* --------------------  && operator -------------------- */

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

javascript typescript nullish-coalescing

Answer 1

Answer №1

In order to distinguish between operators and determine the appropriate usage, creating a comparison table can be quite helpful:

                        |    ||   |    &&   |    ??   |
    --------------------+---------+---------+---------+
        0, 'default'    |'default'|    0    |    0    |
       '', 'default'    |'default'|   ''    |   ''    |
    false, 'default'    |'default'|  false  |  false  |
     null, 'default'    |'default'|   null  |'default'|
undefined, 'default'    |'default'|undefined|'default'|
     true, 'default'    |  true   |'default'|  true   |
       20, 'default'    |   20    |'default'|   20    |

Answer 2

In order to distinguish between operators and determine the appropriate usage, creating a comparison table can be quite helpful:

                        |    ||   |    &&   |    ??   |
    --------------------+---------+---------+---------+
        0, 'default'    |'default'|    0    |    0    |
       '', 'default'    |'default'|   ''    |   ''    |
    false, 'default'    |'default'|  false  |  false  |
     null, 'default'    |'default'|   null  |'default'|
undefined, 'default'    |'default'|undefined|'default'|
     true, 'default'    |  true   |'default'|  true   |
       20, 'default'    |   20    |'default'|   20    |

Answer 3

Answer №2

&& - serves as the logical AND operator.

?? - an operator that returns the right-side expression if the left side is null or undefined.

For instance

if(someValue && otherValue) {
// executes when someValue and otherValue are both true
}

Known as the nullish coalescing operator, ?? simply assigns the right-side value when the left-side is null or undefined.

let foo = someValue ?? "default value"; 
// if someValue is null, assign "default value" to variable foo.

Answer 4

&& - serves as the logical AND operator.

?? - an operator that returns the right-side expression if the left side is null or undefined.

For instance

if(someValue && otherValue) {
// executes when someValue and otherValue are both true
}

Known as the nullish coalescing operator, ?? simply assigns the right-side value when the left-side is null or undefined.

let foo = someValue ?? "default value"; 
// if someValue is null, assign "default value" to variable foo.

Answer 5

Answer №3

The Nullish Coalescing Operator ?? differentiates between nullish values (null, undefined) whereas the OR operator || or the AND operator && checks for falsy values which include an empty string "", zero 0, false false, null, and undefined.

var x = '';

console.log(x ?? "default"); // ''
console.log(true && x); // ''

var y; // undefined

console.log(y ?? "default"); // 'default'
console.log(true && y); // undefined

Answer 6

The Nullish Coalescing Operator ?? differentiates between nullish values (null, undefined) whereas the OR operator || or the AND operator && checks for falsy values which include an empty string "", zero 0, false false, null, and undefined.

var x = '';

console.log(x ?? "default"); // ''
console.log(true && x); // ''

var y; // undefined

console.log(y ?? "default"); // 'default'
console.log(true && y); // undefined

Answer 7

Answer №4

The explanation provided in the documentation should clarify the first two statements in your code:

The nullish coalescing operator (??) is a logical operator that returns the right-hand side operand when the left-hand side operand is null or undefined, and it returns the left-hand side operand otherwise.

When it comes to && : The second expression following theAND(&&) operator is only evaluated if the first expression is considered truthy, and then the second expression is returned. If the first expression is not truthy, it gets returned instead.

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

const baz_2 = 20 && 30;
console.log(baz_2);

Answer 8

The explanation provided in the documentation should clarify the first two statements in your code:

The nullish coalescing operator (??) is a logical operator that returns the right-hand side operand when the left-hand side operand is null or undefined, and it returns the left-hand side operand otherwise.

When it comes to && : The second expression following theAND(&&) operator is only evaluated if the first expression is considered truthy, and then the second expression is returned. If the first expression is not truthy, it gets returned instead.

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

const baz_2 = 20 && 30;
console.log(baz_2);

Answer 9

Answer №5

When the left-hand side operand of the ?? operator is null or undefined, it returns the right-hand side operand.

const emptyString = ""
const nullValue = null

const valA = emptyString ?? "valA"  // ""
const valB = nullValue ?? "valB" // "ValB"

const valC = emptyString && "valC" // ""
const valD = nullValue && "valD" // null

Answer 10

When the left-hand side operand of the ?? operator is null or undefined, it returns the right-hand side operand.

const emptyString = ""
const nullValue = null

const valA = emptyString ?? "valA"  // ""
const valB = nullValue ?? "valB" // "ValB"

const valC = emptyString && "valC" // ""
const valD = nullValue && "valD" // null

Exploring the contrast of && and ?? in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

An issue has occurred in Vue3 where the argument type 'typeof import("../dist/vue")' cannot be assigned to the parameter type 'PublicAPIComponent'

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

Minimize the count of switch cases that are not empty

Pull data from another domain's DIV using jQuery's load/ajax function

Particles.js fails to persist as I scroll down the HTML page

Spicing up PHP data insertion into the database

Eliminating the "undefined" error in TypeScript within a React application

Mastering the Art of Utilizing $(this) in jQuery

Understanding the response from an AJAX call

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Django enables anonymous Ajax requests to reach a Generic View

Steps for aligning the upper rectangular text in the center of the larger rectangular border

How to insert an image into a placeholder in an .hbs Ember template file

Issues persist with Ajax form submissions; the submitted data never seems to go through

Error: The variable "Set" cannot be found in the react.js code, specifically in Safari browser

Why do I keep receiving the error message "Cannot set property of undefined"?

Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

Explaining the union type using a list of data types

The modal appears on the screen prior to the content being shown