What's the Difference Between & and && in JavaScript

What's the difference between & and && in JavaScript?

& is bitwise AND

This operator is almost never used in JavaScript. Other programming languages (like C and Java) use it for performance reasons or to work with binary data. In JavaScript, it has questionable performance, and we rarely work with binary data.

This operator expects two numbers and retuns a number. In case they are not numbers, they are cast to numbers.

How does it work? Wikipedia has an answer: https://en.wikipedia.org/wiki/Bitwise_operation#AND

&& is logical AND

Most usually, programmers use this operator to check if both conditions are true, for example:

true && true        // returns true
true && false       // returns false

However, in JavaScript, it is extended to allow any data type and any number of terms. It returns:

• First term that evaluates to false
• Last term otherwise (if all are true-y)

Here are some examples:

true && false && true         // returns false
true && 20 && 0 && false      // returns 0 (it is first false-y)
10 && "Rok" && true && 100    // returns 100 (as all are true-y)

&& short-circuiting

As can be seen from above, as soon as you find one that term is false-y, you needn't to care about the following terms. This allows Javascript to stop evaluation altogether. This is called short circuiting.

This statement doesn't alert anything and false is returned:

true && false && alert("I am quiet!")     // returns false

Therefore, you could use the && operator as a shorter replacement for an if statement. These are equivalent:

if (user.isLoggedIn()) alert("Hello!")
user.isLoggedIn() && alert("Hello!")

Almost all JS compressors use this trick to save 2 bytes.

What is the difference and what are the & and && operators used for?

The key difference is that the & operator is a bitwise operator, while the && operator is a logical operator.

Bitwise operators work on bits and perform "bit by bit" operations, they are applied to the bits of one or two operands. The & represents a bitwise AND operation- where A and B represent two inputs; both inputs must be true in order for C to be true.

So for instance in the example you provided you have:

if(0 & 1){
}

The result of the bitwise AND on 0 and 1 as inputs is 0 (false) because both inputs must be true for the output to be true.

The && operator is a logical operator, which is used to make a decision based on multiple conditions. It can apply to one or two operands each of which may be true or false.

if (!a && b < 5) {
}

The above still evaluates to false because both conditions must be met for the code inside the if statement to be executed. In addition to this, using the && operator will (depending on the language) short circuit, which means that the second condition of the if will only be evaluated if the outcome is not determined by the first condition.

So this expression will fail as soon as a is found to be zero (false) because there is no point in evaluating the second expression as the first expression had to be true. This is another difference as the bitwise & operator does not short circuit.

What is the difference between using '&&' and '||' over a ternary operator ('?' and ':')?

These are two different concepts that happen to give you the same answer.

---

The first example uses the ternary operator and its result depends only on the first operand (in your example true/false):

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"
false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

It is a shorthand form of an if/else. If the first operand is truthy, return the second operand (Hello). If the first operand is falsy, return the third operand (Goodbye).

The first expression of your first example can be rewritten as:

if (true)
    return 'Hello';
else
    return 'Goodbye';

---

The second example makes use of logical operators and its result depends on both the first and the second operand.

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"
false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

If firstOperand && secondOperand evaluates to a truthy value, return secondOperand. If they evaluate to something falsy, return thirdOperand (Goodbye).

In your examples, since a non-empty string is truthy, true && 'Hello' evaluates to Hello, and false && 'Hello' evaluates to false.

So your second example turns into:

'Hello' || 'Goodbye'
false || 'Goodbye'

Because of how || works, that happens to output what your first example outputs, but they're different concepts.

Notice how in the first example, we know what to return after evaluating the first operand. In the second example, we have to evaluate the first two operands before we know what to return.

What's the difference between the `&` and `&&` in Vue.js?

They have the same type of logic. 0101 & 1010 = 0000. However && will not valuate the second one if the first on is false, it will always consider the second one true..

try this

<span
  v-if="1 > 3 && 2 > 3"
>
  span
</span>

What's the difference between ( | ) and ( || )?

| is a bitwise or, || is a logical or.

A bitwise or takes the two numbers and compares them on a bit-by-bit basis, producing a new integer which combines the 1 bits from both inputs. So 0101 | 1010 would produce 1111.

A logical or || checks for the "truthiness" of a value (depends on the type, for integers 0 is false and non-zero is true). It evaluates the statement left to right, and returns the first value which is truthy. So 0101 || 1010 would return 0101 which is truthy, therefore the whole statement is said to be true.

The same type of logic applies for & vs &&. 0101 & 1010 = 0000. However 0101 && 1010 evaluates to 1010 (&& returns the last truthy value so long as both operands are truthy).

What's the difference between & and && in MATLAB?

The single ampersand & is the logical AND operator. The double ampersand && is again a logical AND operator that employs short-circuiting behaviour. Short-circuiting just means the second operand (right hand side) is evaluated only when the result is not fully determined by the first operand (left hand side)

A & B (A and B are evaluated)

A && B (B is only evaluated if A is true)

---

Related Topics