Null-value merge operator?? Provides a short syntax for getting the first “defined” variable in a list.

a ?? The result of B is:

  • aIf theanotnull 或 undefined.
  • bOther circumstances.

So x is equal to a? B is short for the following expression:

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

Here’s a longer example.

Suppose we have a user and the variables firstName, lastName, and nickName correspond to the user’s first, last, and nickName, respectively. These variables can be undefined if the user decides not to enter any values.

We want to display the name of the user: display one of these three variables, or “Anonymous” if none is set.

Let’s use?? The operator selects the first defined variable:

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

// Display the first value that is not null/undefined
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
Copy the code

Compared with the | |

Or the operator | | with?? Operators are used in the same way. As said in the previous chapter, we can use the | | replaced in the above example?? , the same result can be obtained.

The important differences are:

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

This distinction is crucial when we want to treat null/undefined differently from 0.

For example, consider the following case:

height = height ?? 100;
Copy the code

If height is not defined, it is assigned a value of 100.

Let us with the | | comparison:

let height = 0;

alert(height || 100); / / 100
alert(height ?? 100); / / 0
Copy the code

In this case, the height | | 100 it will be deemed not set the height value of 0 (the unset), and null, and undefined and any other false (falsy) values. So you get 100.

height ?? 100 returns 100 only if height is indeed null or undefined. Therefore, alert displays a height of 0 as is.

Which behavior is better depends on the specific usage scenario. When height 0 is valid,?? Operators are more suitable.

priority

?? The operator has a fairly low priority: 5 in MDN tables.

Therefore,?????? After most of the other operations, but after = and? So let’s do that.

If we need to use?? In complex expressions. To evaluate, consider 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 *?? If the value is high, it will be executed first.

The operation will be equivalent to the following expression:

// May not be correct
let area = height ?? (100 * width) ?? 50;
Copy the code

There is also a related language-level limitation.

For security reasons, it is prohibited to??The operator and&& 和 ||Operators used together.

The following code raises a syntax error:

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

This limitation is undoubtedly debatable, but it was added to the language specification to avoid programming errors as people began to use?? Alternative | |.

We can explicitly use parentheses to solve this problem:

let x = (1 && 2)??3; / / work

alert(x); / / 2
Copy the code

conclusion

  • Null-value merge operator?? Provides a concise way to get “defined” values in a list.

    It is used to assign default values to variables:

    // When height is null or undefined, set height to 100
height = height ?? 100;
Copy the code

  • ?? The operator has a very low priority, only slightly higher than? And =.

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

Modern JavaScript Tutorials: Open source modern JavaScript tutorials from beginner to advanced quality. React provides a JavaScript tutorial for MDN learners.

Read for free online: zh.javascript.info

Scan code on wechat to follow the public account “Technology Talk” and subscribe to more exciting content: