Home » JavaScript Tutorial

Bitwise Operators in JavaScript

JavaScript Bitwise Operators: In this tutorial, we are going to learn about the bitwise operations in JavaScript with examples.
Submitted by Siddhant Verma, on October 02, 2019

JavaScript Bitwise Operators

A lot of times you come across some strange operators where you're knocking your head to understand what is going on in the code. Almost all the programming languages have bitwise operators. It is essential for a language to have these since they work at the binary level. Let's first understand what bitwise operators are and why they are the way they are for any general language or framework then we can dive into how to use them in JavaScript.

In the number system, we have more than one way of representing numbers. Most of the time we are using the decimal numbers which have a base-10 but there are other types of numbers such as hexadecimal, binary, octal, etc. Bitwise operators interact with the numbers at the binary level. Since any machine understands only binary (a mere combination of the 0's and 1's), the way a machine understands what we're doing in a program is by converting into its own language of the 0's and 1's. That's why the most fundamental way of playing with numbers is by breaking them down at the binary level. When you store a variable or carry out even basic arithmetic operations, in reality, these operations are being done by first converting the base -10 numbers to binary numbers. Even variables stored in memory are referenced through binary numbers and memory addresses are themselves a hexadecimal value. So understanding Bitwise is a great way to understand how a machine is interpreting things and anything has done using them is always faster than what you'd achieve through some other operation.

Bitwise operators help us to carry out bit masking operations and play with the numbers at the binary level. We will look at the following most common bitwise operators in JavaScript.

List of Bitwise Operators in JavaScript

Operator Description
& Bitwise AND
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Right Shift

Note:

  • JavaScript stores numbers as 64 bits floating-point numbers, but all bitwise operations are performed on 32 bits binary numbers.
  • Before a bitwise operation is performed, JavaScript converts numbers to 32 bits signed integers.
  • After the bitwise operation is performed, the result is converted back to 64 bits of JavaScript numbers.

Let's first see what they mean by carrying out some operations. The bitwise AND first converts the two numbers into their binary and then does the AND operation (logical multiplication) from the end bit by bit.

    Let's say we have two numbers; 5 and 1.
    Binary of 5: 1001
    Binary of 1: 0001

If we take AND of every digit from the right side we get 0001 which is 1 in decimal notation. We can simply use & to get the same result, ie, the Bitwise AND between two numbers.

To tryout, this code follow the following rules,

Open the chrome dev console to try out the examples by right clicking on the browser → selecting inspect → selecting console or simply pree f12.

Bitwise Operators in JavaScript (Example 1)

You can carry out these operations to verify the results. You simply need to change the decimal numbers to their binary equivalent and perform bit by bit operation and convert the binary so obtained back to decimal.

The Bitwise OR does logical addition of two binary numbers.

Bitwise Operators in JavaScript (Example 2)

The Bitwise XOR gives 1 if the bits are different and 0 otherwise.

Bitwise Operators in JavaScript (Example 3)

The Bitwise NOT ~ simply inverses all bits of the binary representation of the number. Wherever you have a 0, you'll have a 1 and vice versa.

Bitwise Operators in JavaScript (Example 4)

Notice, how NOT ~ of a number gives us the negative of that number incremented by 1? This can be logically verified concerning how the computer stores a negative number.

<< or the left shift operator pushes all the bits to the right and the leftmost one falls off.

Binary of 5: 0101 5<<1=> 1010 which is the binary representation of 10.

Similarly, the right shift >> operator pushes all the bits to the left and rightmost falls off.

Binary of 5: 0101 5>>1=> 0010 which is the binary representation of 2.

Let's verify these,

Bitwise Operators in JavaScript (Example 5)

What if you left shift a certain number a b times? Or right shift a b times?

Bitwise Operators in JavaScript (Example 6)

In general, we can say a<<b is a*(2^b). If a=5, b=2 then 5*(2^2) which gives 5*4=20.

Similarly, we can say a>>b is a/(2^b). If a=5, b=2 then 5/(2^2) which gives 5/4=1.

Okay now let's write a simple function that accepts two numbers and performs all the bitwise operations we have discussed so far.

function bitwiseOperations(a=2,b=3){
	console.log('${a} AND ${b} : ',a&b);
	console.log('${a} OR ${b} : ',a|b);
	console.log('${a} XOR ${b} : ',a^b);
	console.log('NOT ${a} : ',~a);
	console.log('NOT ${b} : ',~b);
	console.log('Left Shift ${a} : ',a<<1);
	console.log('${a} left shift ${b} : ',a>>b);
	console.log('${a} right shift ${b} : ',a<<b);
}
Bitwise Operators in JavaScript (Example 7)

Let's look at the application of the bitwise operator. Let's say we have an array in which every number is repeated twice except for one number that occurs only once. We need to find that unique number. There can be different approaches to this problem but an efficient method would be to XOR all elements of the array. Let's see this with an example,

Say we have an array with the elements: 1,5,6,2,5,6,3,2,3

Clearly, the unique number is 1.

If we XOR all these numbers together due to the same bits in the repeated numbers, they will give 0.

5^5=6^6=3^3=2^2=0.

And, when we XOR 1 and 0, we'll get 1. This way we can easily find the unique number.

Let's implement this solution,

function findUnique(arr){
	var ans=0;
	for(let i=0; i<arr.length; i++)
		ans=ans^arr[i];
	return ans;
}
Bitwise Operators in JavaScript (Example 8)








Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.