JavaScript Bitwise XOR (^) Operator Usage Explained


Written by - Olorunfemi Akinlua
Reviewed by - Deepak Prasad

Introduction

Logical operators are built within programming languages to allow the creation of different possible logic that drives algorithms. Other than this, there are other types of operators called bitwise operator. With them, we are allowed to manipulate the path of the algorithm based on the corresponding bits' position. One such logical operator is the XOR operator. In this article, we will discuss the XOR operator in JavaScript.

 

Getting started with XOR (^) operator

The bitwise XOR operator in JavaScript is a bitwise operator that takes two operands and returns a one in the corresponding bit position if the operands are different, and a zero if they are the same. This operator is typically used for bitwise operations, such as setting or clearing individual bits in a byte or word.

The bitwise XOR operator is represented by the symbol ^. The bitwise XOR operator is a binary operator, meaning it operates on two operands. The operands can be of any type, but they will be converted to 32-bit signed integers before the operation is performed.

Here is the truth table for Bitwise XOR:

BIT FROM FIRST NUMBER BIT FROM SECOND NUMBER RESULT
1 1  0
1  0 1
 0 1 1
 0  0  0

Bitwise XOR is different from bitwise OR in that it returns 1 only when exactly one bit has a value of 1 (if both bits contain 1, it returns 0).

To XOR the numbers 25 and 3 together, use the following code:

let result = 25 ^ 3;
console.log(result); // 26

The result of a bitwise XOR between 25 and 3 is 26, as shown here:

 25 = 0000 0000 0000 0000 0000 0000 0001 1001
  3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010

Four bits in each number are set to 1; however, the first bit in both numbers is 1, so that becomes 0 in the result. All of the other 1s have no corresponding 1 in the other number, so they are passed directly through to the result. The binary code 11010 is equal to 26. (Note that this is one less than when performing bitwise OR on these numbers.)

 

Example - Set or clear individual bits in a byte

The bitwise XOR operator is not typically used in JavaScript programs, but it can be used for bitwise operations on integers. The following example shows how the bitwise XOR operator can be used to set or clear individual bits in a byte. In this example, we use the bitwise XOR operator to toggle the state of a bit. If the bit is 0, it will be set to 1. If the bit is 1, it will be cleared to 0.

let byte = 0xff; // byte with all bits set

// toggle the state of the first bit
byte ^= 0x01;
console.log(byte)

// toggle the state of the third bit
byte ^= 0x04;
console.log(byte);

console.log(byte);
console.log(byte.toString(2)); // "11110101"

Output

254
250
250
11111010

Using another example, we can apply the XOR operator on two integer numbers (5 and 3) to give a result of 6 because there are two-bit positions where the corresponding bits of either integer number is 1, and the last bit position has both 1s so, therefore, 0. All of the comparison is done in binary, and converted back to the base that the integer numbers were supplied (here, base 10).

const a = 5;        // 101
const b = 3;        // 011

console.log(a ^ b); // 110

Output

6

 

Example - Get a Value of Differing Bits in Each Operand

You have a number that you’d like to coerce into a 32-bit integer and compare against another coerced 32-bit integer, where every differing bit in either operand creates a new integer with matching positive bits. This can be very useful for checking assigning a flag to a bit field or bit mask.

The bitwise XOR operator (^) compares 32-bit integers for their bit values and returns a new 32-bit integer, which is a summation of all of the differing bits (where one operand has a 0 and the other a 1) in the expression.

14 ^ 9; // 7
92 ^ 46; // 114
92 ^ 0; // 92
0 ^ 0; // 0
96 ^ -1; // -97

The bitwise XOR operator first coerces the left and right hand operands into signed 32-bit binary integers. It then looks at each bit between the left and right hand operands and sets each bit in the resulting integer based on the results. The resulting bit in each position is 1 if the left hand or right hand bits in that position equal 1. If they are both 1 or both 0, then the resulting bit will be 0.

 

Summary

The bitwise XOR operator in JavaScript takes two numbers and returns a new number where the bits of the first number are turned on if the bits of the second number are turned off and vice versa. In addition, it is important to note that the two operands are converted to 32-bit integers and expressed by a series of bits for the bitwise XOR operation to occur.

 

References

Bitwise XOR (^) - JavaScript | MDN (mozilla.org)
Bitwise XOR assignment (^=) - JavaScript | MDN (mozilla.org)

 

Views: 0

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on LinkedIn.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment