JavaScript Logic and Logic (&&) with logic or (| |) logical OPERATION rules Understanding

Logic and (&&)

Logic and (&&) operations can be applied to any type of operation, not just Boolean values,
The,&& operator does not necessarily return a Boolean value if there is an operand that is not a Boolean: follow these rules:

1. If the first operand is an object (generalized), a second operand is returned

alert (‘GeCan’ && null) // null
alert (‘GeCan’ && NaN) // NaN
alert (‘GeCan’ && 0) // 0
alert (‘GeCan’ && false) // false
alert (‘GeCan‘ && ‘GeCan’) // "GeCan"
alert (‘GeCan’ && undefined) // undefined
alert (‘0‘ && ‘GeCan’) // ‘GeCan’
alert (1 && ‘GeCan’) // ‘GeCan’
2. If the second operand is an object, only return the object if the first operand evaluates to true
The first operand evaluates to true; return the object
// When the first operand is an object, also return the object (refer to the first point)

alert (true && ‘GeCan’) // ‘GeCan’

Otherwise directly return the first number (short circuit operation)
alert (null && ‘GeCan’) // null
alert (NaN && ‘GeCan’) // NaN
alert (0 && ‘GeCan’) // 0
alert (false && ‘GeCan’) // false
alert (undefined && ‘GeCan’) // undefined
alert (‘‘ && ‘GeCan’) // ‘‘;
Note that when the first operand evaluates to true, but the second operand is undefined, an error will be reported

alert (true && someUndefinedVariable) // error; someUndefinedVariable is not defined
3. If both are objects, return the second one (a bit repetitive with the rules above)

4. If one of the operands is null, NaN, 0, false or undefined or ‘‘, then return themselves
In the first case, these operators are in the first one, refer to the first point of the second rule above, and directly return to themselves (short circuit);
In the second case, these operators return themselves after the second one (after the first operator evaluates to true)

alert (true && null) // null
alert (true && NaN) // NaN
alert (true && 0) // 0
alert (true && false) // false
alert (true && undefined) // undefined
alert (true && ‘‘) // ‘‘
Summary of the above rules,
Logical AND (&&) depends on whether the value on the left is true or false, if it is true, the value on the right is returned, if it is false, the value on the left is returned;
(Only false, 0, NaN, null, undefined, empty string is false, the rest are true)

-------------------------------------------------- -------------------------------------------------- -----------------------

Logical OR (||)

Logical OR (||) and Logic are similar to the operation of (&&) As long as one is not a Boolean value, || does not necessarily return a Boolean value, follow the rules below:

1. The first one is an object, it returns the first one (short circuit)

alert (‘GeCan’ || undefined) // "GeCan"
alert (‘GeCan‘ || ‘KaiKai‘) // "GeCan"
2. The first one is false, null, NaN, 0 or undefined or ‘‘, then return the second operand;

· The first operand evaluates to false; returns the second operand

alert (false || null) // null
alert (false || NaN) // NaN
alert (false || 0) // 0
alert (false || false) // false
alert (false || ‘GeCan’) // "GeCan"
alert (false || undefined) // undefined
Note that when the first operand evaluates to false, but the second operand is undefined, an error will be reported

alert (false || someUndefinedVariable); // error; someUndefinedVariable is not defined
· The first one is null; returns the second operand

alert (null || null) // null
alert (null || NaN) // NaN
alert (null || 0) // 0
alert (null || false) // false
alert (null || ‘GeCan’) // "GeCan"
alert (null || undefined) // undefined
· The first is NaN; returns the second operand

alert (NaN || NaN) // NaN
alert (NaN || null) // null
alert (NaN || 0) // 0
alert (NaN || false) // false
alert (NaN || ‘GeCan’) // ‘GeCan’
alert (NaN || undefined) // undefined
· The first one is 0; returns the second operand

alert (0 || null) // null
alert (0 || NaN) // NaN
alert (0 || 0) // 0
alert (0 || false) // false
alert (0 || ‘GeCan’) // "GeCan"
alert (0 || undefined) // undefined
· The first one is undefined; returns the second operand

alert (undefined || null) // null
alert (undefined || NaN) // NaN
alert (undefined || 0) // 0
alert (undefined || false) // false
alert (undefined || ‘GeCan’) // "GeCan"
alert (undefined || undefined) // undefined
· The first one is ‘‘; returns the second operand

alert (‘‘ || null) // null
alert (‘‘ || NaN) // NaN
alert (‘‘ || 0) // 0
alert (‘‘ || false) // false
alert (‘‘ || ‘GeCan’) // "GeCan"
alert (‘‘ || undefined) // undefined
Summary of the above rules,

Logical OR (||) First look at whether the value on the left is true or false, if it is true, the value on the left is returned, if it is false, the value on the right is returned
(Only false, 0, NaN, null, undefined, empty string is false, the rest are true)
-------------------------------------------------- -------------------------------------------------- ------------------------

So regarding logical AND (&&) and logical OR (||), just remember the following two rules:

Logical AND (&&)
See if the value on the left is true or false, if it is true, the value on the right is returned, if it is false, the value on the left is returned;
(Only false, 0, NaN, null, undefined, empty string is false, the rest are true)

Logical OR (||)
See if the value on the left is true or false, if it is true, the value on the left is returned, if it is false, the value on the right is returned
(Only false, 0, NaN, null, undefined, empty string is false, the rest are true)

-------------------------------------------------- -------------------------------------------------- -----------------------

Application of logical operations

1. Use logical OR (||)
// Example 1 manipulate the DOM
If the value of the variable is not false, null, NaN, 0 or undefined or ‘‘, the variable is passed;

function addMessage (message) {
    message = message || ‘default message’;

    var el = document.createElement (‘p‘);
    el.innerHTML = message;

    document.body.appendChild (el);
}

addMessage (); // Operation default parameters
addMessage (‘hello world’) // Operate the parameters we pass in
 

Please note Use with caution || Fill in the default values! ! !
// Example 2

function Foo (value) {
    value = value || ‘default value’;
    return value;
}

Foo () // ‘default value’; pass the default parameters
Foo (‘hello’) // ‘hello’
Note: If you pass in false, null, NaN, 0 or undefined or ‘‘ ‘equivalent’ value, the second default parameter will be used! ! !
          However, in fact, only the case of undefined should be considered that the user has not specified its value and needs to use the backup default value.

Improved version

function Foo (value) {
    value = value! == undefined? value: ‘defaule value’;
    return value;
}
In this way, the default value is set for the parameter. Only when undefined is passed in, its value will be forced to be replaced with the default value.

Foo (undefined) // "defaule value"
None of the following values will be replaced by force (a lot safer !!!)

Foo (‘‘) // ‘‘
Foo (0) // 0
Foo (NaN) // NaN
Foo (null) // null
Foo (false) // false
Supplement ES6, you can set default values for parameters like this

function Foo (value = ‘default value’) {
    return value;
}

// Replace with default value
Foo (undefined) // "default value"

// No replacement; very safe
Foo (‘‘) // ‘‘
Foo (0) // 0
Foo (NaN) // NaN
Foo (null) // null
Foo (false) // false
2. Comprehensive use of logical AND (&&) and logical OR (||)

function whatDoesItDo (mood) {
    return mood && "I like this" || "I do n‘t like this ";
}
When mood evaluates to true, return "I like this" (A instead)
When mood evaluates to false, return "I dont like this" (B instead)

When mood is an object (broad sense), it also displays A.

It feels a bit like an upgraded version of ternary operator;

the above.

 

Understanding the logical operation rules of JavaScript logical AND (&&) and logical OR (||)