Introduction to JavaScript Bitwise Operators

Introduction

Recently on twitter, a tweep asked how to determine if a number is even or odd. I hurriedly answered using modulus. Yeah, my answer was right, but any other approach? I was hinted about bitwise operator. JavaScript operates usin…


This content originally appeared on DEV Community and was authored by ISIAKA ABDULAHI AKINKUNMI

Introduction

Recently on twitter, a tweep asked how to determine if a number is even or odd. I hurriedly answered using modulus. Yeah, my answer was right, but any other approach? I was hinted about bitwise operator. JavaScript operates using different type of operator which includes

  • Assignment operators
  • Arithmetic operators
  • Ternary operators
  • Logical operators
  • Comparison operators
  • Typeof operator
  • Bitwise operators

We commonly use most of these operators in our routine but sparingly use bitwise operator especially if you just getting started with JavaScript.
This article will elucidate on different bitwise operators, how we can use it and

What's bitwise?

Bitwise is a level of operations that involves working with individual bits, which are the smallest units of data in a computer. a bit can be 0 or 1. All bitwise operations are performed with 32bits binary numbers and later converted to 64bits(javaScript works with 64bits).

In this article, we will make use of ES6 arrow function syntax and conversion to decimal(base 10) will follow the example below:

base 10

Conversion of integers to bit will be done using the binary operation as illustrated below, Writing of the bits begins from the lasts bit to the first as pointed by the arrow:

base2

bits

From the above snippets, we can conclude that numbers that has the last bit as 0 are even while integer with last bit as 1 are odd

Converting 12 to bit , we have

000000000000000000000000000001100

But for simplicity sake, we remove the preceding 0s and our bits are

  1100

Types of Bitwise Operators

  • & — AND

  • | — OR

  • ~ — NOT

  • ^ —  XOR

  • << — Left Shift

  • >> — Sign-Propagating Right Shift

  • >>> — Zero-Fill Right Shift

Lets get started

  • & - AND OPERATOR : This return 1 if the corresponding bits of operands are 1 and return 0 if they differs.

Below is a table for comparison

AND

Example 1: The example below is a function that computes the AND operator.

AND

Common interview question is to determine if a number is even or odd, JavaScript Bitwise AND can be used.

Example 2 : Determine if a number is even or odd

even

Explanation
As I said earlier, Even Numbers when converted to bits ends with 0, JavaScript compares the last bit and discard the remaining. Therefore, 0 & 1 will return 0.

Example 3: The below code checks for odd Number

odd

Explanation
This check if the last bit is 1, then compare 1 & 1 and return true otherwise return false

  • | - OR OPERATOR : This return 1 if any of the corresponding operand's bit is 1and return 0 is the operand's bits are 0.

Below is a table illustrating different bits combination

OR

Example 4 : The below code takes two operands as arguments and perform the OR bitwise operation.

Bitwise OR

  • ~ NOT Operator : This accepts only one operand(unary operator). ~ performs NOT operator on every bit. bits that are 1 become 0 and bits that are 0 turn to 1, forming the ones' complement of the given binary value.
Example 5 : The function below performs NOT operation

bitwiseNOT

Explanation

As we said earlier, ~ operator turns the bit from zero to one and vice-versa.
~ 8 becomes 1111111111111111111111111111011 (-9 in decimal)

Few things to note:
  • The first bit by the left is called the sign bit. The sign bit is 0 for positive integer and 1 for negative integer.

  • The remaining 31bits are used to represent integer.

  • the maximum 32bits integer that can be represented can be calculated as 2^31 - 2^0 = 2147483647

  • While the minimum is -(2^31) = - 2147483648

Bitwise operators convert their operands to 32-bit signed integers in two’s complement format. when the NOT operator is used on an integer, the resulting value is the two’s complement of the integer as shown below

noToPERATOR

  • ^ - XOR OPERATOR : Also called (exclusive-Or), it returns 0 if the operand's bit are the same (0 or 1) and if different return 1

XOR

Example 6 : The function below performs XOR operation

XOR

  • << - Left shift OPERATOR : This takes two operands, the first is an integer to be converted to bits while the second operand is the number of bits of the first operand to be shifted away from the left and added to the right. ##### Example 7 : The function below performs Left shift operation

checkLeftShift

  • >> - Sign-propagating right shift OPERATOR: This takes two operands, the first is an integer to be converted to bits while the second operand is the number of bits of the first operand to be shifted away from the right and also discarded from the left.
Example 8 : The function below performs Sign-propagating right shift operation.

checkRightShift

  • >>> - Zero-fill right shift : This behaves like the sign-propagating right shift (>>) operator. The difference is that bits are shifted in from the left.
Example 9 : The function below performs Zero-fill right shift operation.

Zero-fill

Thanks for Reading!!!!
If you enjoy this and wish to get Notified when I published new articles, click here to subscribe.


This content originally appeared on DEV Community and was authored by ISIAKA ABDULAHI AKINKUNMI


Print Share Comment Cite Upload Translate Updates
APA

ISIAKA ABDULAHI AKINKUNMI | Sciencx (2021-08-15T20:37:12+00:00) Introduction to JavaScript Bitwise Operators. Retrieved from https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/

MLA
" » Introduction to JavaScript Bitwise Operators." ISIAKA ABDULAHI AKINKUNMI | Sciencx - Sunday August 15, 2021, https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/
HARVARD
ISIAKA ABDULAHI AKINKUNMI | Sciencx Sunday August 15, 2021 » Introduction to JavaScript Bitwise Operators., viewed ,<https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/>
VANCOUVER
ISIAKA ABDULAHI AKINKUNMI | Sciencx - » Introduction to JavaScript Bitwise Operators. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/
CHICAGO
" » Introduction to JavaScript Bitwise Operators." ISIAKA ABDULAHI AKINKUNMI | Sciencx - Accessed . https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/
IEEE
" » Introduction to JavaScript Bitwise Operators." ISIAKA ABDULAHI AKINKUNMI | Sciencx [Online]. Available: https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/. [Accessed: ]
rf:citation
» Introduction to JavaScript Bitwise Operators | ISIAKA ABDULAHI AKINKUNMI | Sciencx | https://www.scien.cx/2021/08/15/introduction-to-javascript-bitwise-operators/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.