ES6 null merge operator (?)

Null merge operator （??）

When we get data from the back-end interface , We often encounter the lack of fields at the back end , The front end has to do short value compatibility , Prevent the back end from not giving fields

For example, when we need to obtain commodity prices , We will write ：

const price = res.data?.price || ' No price '

But in fact, this approach is problematic , Obviously easy to see , If the price of a free item is 0 Words , We have || There will be a bug. And used to it || When writing , It's easy to overlook this potential problem . wait until bug When it came into being , We can only change it to ：

const price = (res.data?.price === null || res.data?.price === undefined) ? ' No price ' : res.data?.price 

Obviously the code is long , The readability is poor . Is there a better way to judge whether the field is empty , Yes , That is the null merge operator ??.

const price = res.data?.price ?? ' No price ' 

The code becomes much simpler and more comfortable ！
You can see , Null merge operator （??） It's a logical operator , When the operands on the left are null perhaps undefined when , Returns its right-hand operand , Otherwise, return the left-hand operand .
In some business scenarios , Can replace ||, To avoid using || To set default values for some variables , You may encounter unexpected behavior .（ for example ,’ ’ or 0）

const res={
    data:{
    price:0}}
const price=res.data?.price??'123'
console.log(price)
 0

It is easy to ignore the judgment written normally 0 And empty string ’ ’

Use ?? Can accurately judge