Null merge operator ‘?? ‘

In this article, we refer to expressions whose values are neither null nor undefined as “defined.”

The Nullish coalescing operator can be written with two question marks?? .

a ?? The result of B is:

  • ifaIs defined, the result isa.
  • ifaIs not defined, the result isb.

In other words, if the first argument is not null/undefined, then?? Returns the first argument. Otherwise, the second argument is returned.

The null-value merge operator is not entirely new. It’s just a nice syntax for getting the first “defined” value of the two.

We can override result = a?? Using the operator we already know. B, like this:

result = (a ! = =null&& a ! = =undefined)? a : b;Copy the code

Usually?? Is used to provide a default value for a variable that may be undefined.

For example, here, if user is undefined, we show Anonymous:

let user;

alert(user ?? "Anonymous"); // Anonymous
Copy the code

Of course, if user had any value other than NULL /undefined, then we would see it:

let user = "John";

alert(user ?? "Anonymous"); // John
Copy the code

We can also use?? The sequence selects the first non-NULL /undefined value from a series of values.

Suppose we store data for a user in the variables firstName, lastName, or nickName. The values of all these variables may be undefined if the user decides not to enter a value.

We want to display the user name using one of these variables, or “Anonymous” if the values of these variables are undefined.

Let’s use?? Operator to implement this requirement:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// Display the first value defined
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
Copy the code

Compared with the | |

Or the operator | | can with?? Operator is used in the same way. As we talked about in the last chapter.

For example, in the code above, we can use the | | replace?? , the same result can be obtained:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// Display the first truth value:
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
Copy the code

Since the birth of JavaScript or | | operators, so developers to be used for this purpose for a long time.

On the other hand, the null-value merge operator?? Was only recently added to the JavaScript, it is because people for | |.

The important differences between them are:

  • ||Return the firsttrueValue.
  • ??Return the firstThe definedValue.

In other words, | | can’t distinguish between false, 0, an empty string “” and null/undefined. They’re all the same — falsy values. If any one is | | the first parameter, then we will get the second parameter as a result.

In practice, however, we might only want to use the default value if the variable is null/undefined. That is, when the value is truly unknown or not set.

For example, consider the following situation:

let height = 0;

alert(height || 100); / / 100
alert(height ?? 100); / / 0
Copy the code
  • height || 100The first thing they do is they checkheightIs it a false value, and it is.
    • So, the result is the second parameter,100.
  • height ?? 100The first thing they do is they checkheightWhether it isnull/undefinedAnd found that it wasn’t.
    • So, the result isheightThe original value of,0.

If height 0 is valid, you should not replace it with the default, so?? You get the right result.

priority

?? The priority of the operator is quite low: 5 in the MDN table. Therefore,?????? In = and? Before, but after most other operators (for example, + and *).

So, if we need to use?? In an expression that also has other operators, For the value, consider adding parentheses:

let height = null;
let width = null;

// Important: use parentheses
let area = (height ?? 100) * (width ?? 50);

alert(area); / / 5000
Copy the code

Otherwise, if we omit the parentheses, the priority ratio of * to?? High, it will execute first, which leads to the wrong result.

// No parentheses
let area = height ?? 100 * width ?? 50;

/ /... This is calculated in the same way as the following line of code (which is probably not what we would expect) :
let area = height ?? (100 * width) ?? 50;
Copy the code

?? 与 && 或 ||Used together

For security reasons, JavaScript is prohibited from using?? Operator with && and | | operators are used together, unless you use parentheses to specify the priority.

The following code will trigger a syntax error:

let x = 1 && 2 ?? 3; // Syntax error
Copy the code

This limitation is questionable, but it is added to the language specification is to avoid people from | | to switch to?? A programming error with.

You can solve this problem explicitly by using parentheses:

let x = (1 && 2)??3; // It works properly

alert(x); / / 2
Copy the code

conclusion

  • Null merge operator?? Provides an easy way to select the first “defined” value from a list.

    It is used to assign default values to variables:

    // Set height to 100 when null or undefined
height = height ?? 100;
Copy the code

  • ?? The operator has a very low priority, just above? And =, so consider adding parentheses when using it in an expression.

  • If there is no clear add parentheses, not with the | | or && used together.

Modern JavaScript Tutorial: open source modern JavaScript from the beginning to the advanced quality of the tutorial. The React official documentation recommends a JavaScript tutorial alongside MDN.

Read online for free: zh.javascript.info

Wechat search public account “Technology Talk”, subscribe to more exciting content: