Detailed comparison of && operator, || operator, ?? operator, ?. operator in JS

JavaScript has many useful operators. Reasonable use can greatly improve work efficiency, so you have more time to fish. The following is a brief introduction to 4 types, as follows:

&&

The logical AND operation ( && ) is an AND Boolean operation. Only true is returned when both operands are true , otherwise false is returned . The specific description is shown in the table:

Condition one	Condition 2	result	Demo
true1	true2	true2	1 && 2 => 2
true	false	false	1 && 0 => 0
false	true	false	0 && 1 => 0
false1	false2	false1	null && 0 => null

Logical AND is a kind of short-circuit logic. If the expression on the left is false , the result is directly short-circuited and returned, and the expression on the right is no longer evaluated. The operation logic is as follows:

1. Evaluates the first operand (the expression on the left).
2. Check the value of the first operand. If the value of the left-hand expression can be converted to false (such as null, undefined, NaN, 0, "", false), then the operation will end and the value of the first operand will be returned directly.
3. If the first operand can be converted to true, the second operand (the right-hand expression) is evaluated.
4. Returns the value of the second operand.

Example:

let test = 20
(test > 10) && console.log('打印出来了'); // 打印出来了
语法相当于：
if(x> 10) {
	console.log('打印出来了');
}

||

The logical OR operation ( || ) is a Boolean OR operation. If both operands are true , or one of them is true , it returns true , otherwise it returns false . Specifically as shown in the figure:

Condition one	Condition 2	result	Demo
true	true	true	1 || 2 => 1
true	false	true	1 || 0 => 1
false	true	true	0 || 2 => 2
false1	false2	false2	0 || undefined=> undefined

Logical OR is also a kind of short-circuit logic. If the expression on the left is true , the result is directly short-circuited and returned, and the expression on the right is no longer evaluated. The operation logic is as follows:

1. Evaluates the first operand (the expression on the left).
2. Check the value of the first operand. If the value of the expression on the left is convertible to true, the operation ends and the value of the first operand is returned directly.
3. If the first operand can be converted to false, the second operand (the right-hand expression) is evaluated.
4. Returns the value of the second operand.

Example:

let username;
if (name !== null || name !== undefined || name !== '') {
   userName = name;
} else {
   userName = "";
}

//可以写为
let userName = name || "";

??

The null value coalescing operator (??) is a logical operator. If the expression on the left is null or undefined , it returns the expression on the right, otherwise it returns the expression on the left. true and false in the following table represent anything except null undefined

Condition one	Condition 2	result	Demo
null	1	1	null ?? 1 => 1
undefined	2	2	undefined ?? 2 => 2
true	false	true	true ?? false => true

Example:

let username;
if (name !== null || name !== undefined ) {
   userName = name;
} else {
   userName = "测试";
}

//可以写为
let userName = name ?? "测试";

?.

The optional chain operator ( ?. ) allows reading the value of a property located deep in the chain of connected objects without having to explicitly verify that each reference in the chain is valid. The function of the (?.) operator is similar to the (.) chain operator. The difference is that it will not cause an error when the reference is nullish (null or undefined). The short-circuit return value of this expression is undefined. When used with function calls, returns undefined if the given function does not exist.

The following table inherits the above data:

Condition one	Condition 2	result	Demo |
obj(existence)	name	test	obj ?. name => test
obj(does not exist)	xxxx	undefined	obj ?. xxxxx =>undefined

Example:

//比如这个item.shopList若是为null undefined这种情况 不加?.就会页面报错
shopList: item.shopList?.map((mItem) => {
    return {
      shopCode: mItem.shopCode,
      shopName: mItem.shopName,
      custCode: mItem.shopCode,
      custName: mItem.shopName,
      labels: mItem.labels,
      labelnames: mItem.labelnames,
      parentCustCode: item.custCode,
      parentCustName: item.labels,
    }
  }),

Conclusion priority: ?. > && > || > ??