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

Kendo Template Function: Angular JS version 1.6

Tips on capturing the response data in UI testing automation

A ServiceWorker used a promise in FetchEvent.respondWith() that resulted in a non-Response value of 'undefined'. This caused an issue in browser-sync

Assistance with offsetting a jQuery drop down menu

Is it possible to add my own designs to a three.js model?

Prevent the bottom row from being sorted

Could you explain the distinction among req.path, req.params, and req.query?

How can I generate a hyperlink for a specific directory on Github Pages?

Next.js 13 app directory experiences 404 Not Found error due to dynamic routing issues

Identifying Flash content in a unique way

Is there another option besides PHP not being compatible with JavaScript?

Is there a way to trigger validation with a disabled property?

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Leveraging a function for filtering in AngularJS

What is the best way to input individual students' CA and exam scores into distinct fields and then calculate their total scores in a separate text field?

Webpack2 now transforms sass/scss files into JavaScript rather than CSS during compilation

Achieving optimal performance with scoped CSS in Vue.js

Apply a specific class using JavaScript/jQuery when a user selects a specific timezone from the user interface

Troubleshooting Images in a React Application Integrated with WordPress API

Configuring JsFiddle with Vue and integrating vue-tables-2 - The variable "t" is not defined