What is Bitwise OR Operator (|) in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn about JavaScript's Bitwise OR (|) operator.

There are many operators in JavaSript, and Bitwise OR (|) is one of them used to perform a Boolean OR operation on each bit of its integer arguments. In simple terms, the Bitwise OR operator takes the two numeric operands and performs the Boolean OR operation on every bit of both operands.

Using the Bitwise OR (|) Operator with Binary Numbers

In this section, users will learn to use the Bitwise OR (|) operator with binary numbers. The binary number means the number with representation using the 0 and 1 values. In JavaScript, we can declare the binary numbers with the prefix ‘0b’.

For example, 01010 and 10101 are binary numbers, and we can perform the Bitwise OR (|) operation between both of them the following way.

01010
10101
______
11111

In the above example, users can see that every bit of the first or second number contains the ‘1’. So, it gives all 1’s in the output.

Users can follow the syntax below to perform the Bitwise OR (|) operation on two binary operands.

Syntax

let first = 0b110;
let second = 0b100;
let BitwiseOR = first | second; // 110

We have performed the Bitwise OR (|) operation on two binary numbers in the above syntax.

Example

In the example below, we have created the two variables, ‘first’ and ‘second’. Both variables are initialized by the binary number and perform the Bitwise OR(|) operation by taking both numbers as operands.


<html>
<body>
   <h2>Using the Bitwise OR (|) operator with Binrary Numbers</h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let first = 0b1101011;
      let second = 0b110101011;
      let BitwiseOR = first | second;
      output.innerHTML += "1101011 | 110101011 = " + BitwiseOR + " <br/> ";
      output.innerHTML += "010 | 000 = " + (0b010 | 0b000);
   </script>
</body>
</html>

Using the Bitwise OR (|) Operator with Decimal Numbers

In JavaScript, Decimal numbers are 64-bit, but when we apply the Bitwise OR (|) operation to a decimal number, it converts the number to a 32-bit binary number. After that, It performs the Bitwise OR (|) operation.

Users can see the example below to know how the output is generated using the Bitwise OR (|) operation.

3 | 4 == 11 | 100
0000000000000000000000000000011
0000000000000000000000000000100
________________________________
0000000000000000000000000000111 == 7

From the above example, users can understand how decimal numbers are converted to a 32-bit binary integer value and perform a Bitwise OR (|) operation.

Users can follow the syntax below to use the Bitwise OR (|) operation with decimal numbers.

Syntax

let value1 = 5;
let value2 = 7;
let BitwiseOR = value1 | value2;

We have performed the Bitwise OR (|) operation in the above syntax on two decimal operands.

Example 1

In the example below, we have two different variables and initialized them with the decimal integer values. After that, we performed the Bitwise OR (|) operation on the decimal number, and users can see the results in the example's output.


<html>
<body>
   <h2>Using the Bitwise OR (|) operator with Decimal Numbers</h2>
   <p id = "output"></p>
   <script>
      let output = document.getElementById("output");
      let value1 = 200;
      let value2 = 500;
      let BitwiseOR = value1 | value2;
      output.innerHTML += value1 + " | " + value2 + " = " + BitwiseOR + " <br/> ";
      output.innerHTML += "5 | 10 = " + (5 | 10);
   </script>
</body>
</html>

Example 2

We have created the two custom input fields in the given example. Users can enter any number values in the input field, and the example will show the output after performing the Bitwise OR (|) operation on both numbers. It is recommended to add the decimal values in the input box.


<html>
<body>
   <h2>Using the Bitwise OR (|) operator with custom Decimal Numbers</h2>
   <p>Enter two decimal numbers below and click "Do Bitwise OR" button</p>
   <input type = "number" id = "number1" value = 23></input>
   <br/>
   <br/>
   <input type = "number" id = "number2" value = 5></input>
   <br/>
   <br/>
   <button onclick="BitwiseOROperation()"> Do Bitwise OR </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      function BitwiseOROperation(){
         let value1 = document.getElementById("number1").value;
         let value2 = document.getElementById("number2").value;
         let BitwiseOR = value1 | value2;
         output.innerHTML = value1 + " | " + value2 + " = " + BitwiseOR + " <br/> ";
      }
   </script>
</body>
</html>

We have learned what Bitwise OR (|) operator is in this tutorial. It is the Boolean OR operation between every bit of the two operands. The operands can be binary, decimal, octal, hexadecimal, etc. Also, users can use both operands with different bases.