Difference between (|) Bitwise OR vs (^) Bitwise XOR in JavaScript

Question

I'm really getting confused on the use of the | OR vs ^ XOR in JavaScript , illustrated in the simple example below;

(function sayHi(n){
if(n < 1)   //base case
    return;
console.log("Hi!!" | "Hello!!") ;
sayHi(n - 1);   //recurse
})(5);


(function sayHi(n){
if(n < 1)   //base case
    return;
console.log("Hi!!" ^ "Hello!!") ;
sayHi(n - 1);   //recurse
})(5);

---

(function sayHi(n){
if(n < 1)   //base case
    return;
console.log(2 | 6) ;
sayHi(n - 1);   //recurse
})(5);


(function sayHi(n){
if(n < 1)   //base case
    return;
console.log(2 ^ 6) ;
sayHi(n - 1);   //recurse
})(5);

I'm confused about when, how, why, where I should appropriate use | vs ^ .

Can someone please help me make sense the major difference between OR and XOR operations?

I was reading the documentation for JavaScript from MDN web Docs to better understand the concept of bitwise operations, but I am struggling to understand their significant difference.

I just want to make sure I continue to use these operations correctly henceforth.

Thanks a lot for the anticipated help!

Answer 1

| is a bitwise or

So, if either bit is set in two operands, it will be set in the result

^ is an exclusive or, so if one bit is set in one of the operands, it will be set in the result, otherwise, it will not be set.

 var x,y; for (x = 0; x <= 1; x++) { for (y = 0; y <= 1; y++) { console.log('XOR '+ x + "^" + y + "=" + (x^y)); console.log('OR '+ x + "|" + y + "=" + (x|y)); } } 

Answer 2

OR and XOR are different operators:

• OR:

   0 | 0 = 0 0 | 1 = 1 1 | 0 = 1 1 | 1 = 1 

• XOR

   0 ^ 0 = 0 0 ^ 1 = 1 1 ^ 0 = 1 1 ^ 1 = 0 

If you have two bits and combine these with OR, the result will be 1, if one of these bits or both are 1. If you combine them with XOR (Exclusive OR) then it will be 1 if only one of these bits are 1 (not if both).

Answer 3

Bitwise operators are typically used for checking whether a bit is set in a binary or not. You can vision it as a set of boolean values been compact it as a string 11100101 , where each bit is used to represent the boolean flag true or false , 1 for set and 0 for unset respectively.

Binary reading is done abit different from our usual English. It is done from right to left, with the most left bit been the most significant bit because it holds the greatest value and the left hand side bit been the least.

Example:

Value: 64 = binary 10000000

Value: 1 = binary 00000001

Now back to your question.

Q: I'm confused about when, how, why, where I should appropriate use | vs ^.

A: Bitmask and its operators are more commonly seen in low level programming where memory is a constraint (small computing device) or on performance critical application.

Sounds advantageous to use right? But they have their downside as well and it is code readability . Memory is cheap and processing power is much more greater than what it used to be, so people tend to forgo this bit of advantage when doing high level application programming.

Q: Can someone please help me make sense the major difference between OR and XOR operations?

OR and XOR operations are used for comparing two binaries. Let say binary A and binary B.

In layman term. The OR operations | can be read as if the bit in A OR B is set then return as set , which is 1 .

Example:

10000000 // Value 64 in binary
00000001 // Value  1 in binary
10000001 // Gives you 65 when you perform | OR operation

= 65

XOR operation works a bit like OR but it has another special ability that is when two bits are the same it returns you 0 instead.

Example:

10000001 // Value 65 in binary
10000000 // Value 64 in binary
00000001 // Gives you 1 when you perform ^ XOR operation

= 1

From memory, you generally only use the AND & operator to check whether a bit is set or not. So you might be more interested in it and also the shift operations.

Answer 4

Your code doesn't make sense, bitwise operators (OR, XOR, AND) can only be used on numbers, not strings.

Each number is represent in memory by bits, each of which is 1 or 0 (true or false, on or off, etc). 1 and 0 are digits, just like 1, 2, 3, 4 are digits in our counting system. This counting system used by computers is called binary.

Bitwise operations basically perform the namesake operation (OR, XOR, or AND) on every single bit in the two operands.

Take 5 ^ 3 (5 XOR 3) for example:

5 is represented in binary as 00000101

3 is represented in binary as 00000011

For each operation, you have a left input, and a right input. XOR stands for eXclusive OR, and returns 1 if the left OR the right input is 1, but not if they are both 1. OR returns 1 if either of the inputs is 1, so if both are 1, then the output will also be 1.

A bitwise operation on a number performs this for every corresponding bit in each number, so 5 ^ 3 = 00000110 , which is 6.

Note: Binary numbers are written from right to left. Each digit corresponds to a power of 2, like how digits correspond to powers of 10 when counting. The leftmost digit represents the highest power of 2 (in this case, 2 to the 7th, which is 128).

• 0 ^ 0 = 0 for the first 5 bits
• 1 ^ 0 = 1 for the 6th bit
• 0 ^ 1 = 1 for the 7th bit
• 1 ^ 1 = 0 for the 8th bit

Meanwhile, 5 | 3 = 00000111 , which is 7.

• 0 | 0 = 0 for the first 5 bits
• 1 | 0 = 1 for the 6th bit
• 0 | 1 = 1 for the 7th bit
• 1 | 1 = 1 for the 8th bit

Answer 5

They are different math (logical) operators, more related to math than JavaScript.

OR / | , or called "Inclusive OR", is similar to the English phrase "A and/or B", there are 3 possibilities: not A but B, not B but A, both A and B.

XOR / ^ , or called "Exclusive OR", is similar to the English phrase "either A or B", there are only 2 possibilities: not A but B, not B but A. You can see that "both A and B" is excluded, so called "exclusive".

Reference:

https://en.wikipedia.org/wiki/Logical_connective