DEV Community: Owen Rees

Utilising Bitwise Operators in JavaScript, by Building a RGB to Hex Colour Convertor

Owen Rees — Thu, 23 Nov 2023 13:52:58 +0000

A Real World Example of Bitwise AND, OR, and Left/Right Shift

Bitwise operators are a seldomly used part of the JavaScript language, being much more popular in low-level languages such as C. After my previous article on solving a popular coding challenge using the Bitwise XOR operator, we are now going to look at a real world example of using some other bitwise operators, by creating our own RGB to Hex and Hex to RGB colour convertors. These colour code convertors can also be created without using bitwise operators, but that wouldn't be as fun!

The Lineup

In this article, we will be using the following bitwise operators:

Please pay attention to the & and | symbols, as they look similar to their logical counterparts && and ||.

In this article we can afford a bit more time to talk about how each of these operators functions.

Bitwise AND (&)

Bitwise AND is truthy when the two bits being compared are 1, otherwise falsy.

x	y	x AND y
0	0	0
0	1	0
1	0	0
1	1	1

Comparing two binary representations of numbers, each bit is compared against the other, and the resulting bit is set to 1 or 0 depending on the evaluation.

const result = 10 & 5 // 2

// compare each column:
1010    // 10
0110    // 5
----
0010    // 2

Bitwise OR (|)

Bitwise OR is truthy when when either or both bits are 1.

x	y	x OR y
0	0	0
0	1	1
1	0	1
1	1	1

const result = 10 | 5 // 13

// compare each column
1010    // 10
0110    // 5
----
1110    // 13

Bitwise Left Shift

This operator shifts the bits to the left by the specified amount, while shifting in zero bits from the right. We will use an equal amount of bits for the comparisions, for easier visualisation.

// we can see that the singular 1 has been moved to the left by 4 places
const result = 8 << 4 // 128
0000 1000 << 4 = 1000 0000 

// the bits have all been shifted to the left 3 places
const result = 55 << 3 = 440
0000 0011 0111 << 3 = 0001 1011 1000

Bitwise Right Shift

This operator shifts the bits to the right by the specified amount, where excess digits are pushed off the right.

const result = 256 >> 4 // 32
0001 0000 0000 = 0000 0010 0000

// here we see excess bits being pushed off the edge on the right
const result = 440 >> 6 // 6
0001 1011 1000 = 0000 0000 0110

RGB to Hex

Let's take the Hex colour code #157f4c. First we must understand what the Hex colour code represents. Rather than being a large hexdecimal number (0x157f4c = 1408844), we must split this into groups of 2, each representing the value of R, G, and B.

Hexadecimal	Decimal	Binary
0x15	21	00010101
0x7f	127	01111111
0x4c	76	01001100

Our RGB value is 21, 127, 76

Our goal is to make one long 24-bit binary representation of our RGB values, as such:

21	127	76
00010101	01111111	01001100

00010101 01111111 01001100

To achieve this, we need to move the bits for the R and G values to the left, by 16 and 8 bits respectively. For this we will use the Bitwise Left Shift (<<) operator.

// Binary representations are in 24-bit space

// R value
00000000 00000000 00010101 << 16 = 00010101 00000000 00000000

// G value
00000000 00000000 01111111 << 8 = 00000000 01111111 00000000

// B value
00000000 00000000 01001100

We have three binary numbers, and we need to create one long 24-bit binary number with them. We can achieve this using the Bitwise OR (|) operator, as follows:

// R | G, compare each column using the rules for the bitwise OR operator
00010101 00000000 00000000 |
00000000 01111111 00000000
--------------------------
00010101 01111111 00000000

// and now this new value | B
00010101 01111111 00000000 |
00000000 00000000 01001100
--------------------------
00010101 01111111 01001100  // the desired binary representation of our RGB values

Pay attention to how the bitwise OR is working in the above example, concatenating the binary values into one long value.

Let us now write a function to tie this all together.

function rgbToHex(rgb) {
    // shifting the bits to the left and comparing with bitwise OR
    const binaryRGB = rgb[0] << 16 | rgb[1] << 8 | rgb[2]   
    // convert the binaryRGB string to a hexadecimal (base-16) string
    const hex = binaryRGB.toString(16)      
    // add '#' to the beginning. Make sure the returned value is always 6 characters long, padding with a 0 if not.
    return `#${hex.padStart(6, '0')}` 
}

console.log(rgbToHex([21, 127, 76]))  // values taken from a form etc. 
// '#157f4c'

Hex to RGB

And now to do the inverse, taking a Hex colour value and returning RGB values. Let's use the same Hex code that the previous section returned, to prove that it is correct by returning our original RGB values.

First of all, we need to work with a real hexadecimal value:

const hex = '#15014c'.replace('#', '0x') // '0x15014c'

If we view this hexadecimal in its binary representation again, we get:
00010101 01111111 01001100

R	G	B
00010101	01111111	01001100
21	127	76

Now we need to store each of the R, G, and B values in their own variables. In order to create the correct binary number for each of these values, we must now bitwise right shift the R and G values by 16 and 8 bits respectively.

00010101 01111111 01001100 >> 16 = 00000000 00000000 00010101 // R (21)
00010101 01111111 01001100 >> 8 = 00000000 00010101 01111111  // G (4319)
00010101 01111111 01001100 // G (219948)

Wait, these values are incorrect! We need to take one more very important step, which would leave us with just the required bits.

Comparing the binary representation with Bitwise AND (&) against 11111111 will leave us with just the last 8 bits of information.

// Compare the columns

// R
00000000 00000000 00010101 &
00000000 00000000 11111111
--------------------------
00000000 00000000 00010101  // (21)

// G
00000000 00010101 01111111 &
00000000 00000000 11111111
--------------------------
00000000 00000000 01111111  // (127)

// B
00010101 01111111 01001100 &
00000000 00000000 11111111
--------------------------
00000000 00000000 01001100  // (76)

Pay attention to how the bitwise AND operator works in the above examples, and how it leaves us with only the required information.

Let us now tie this all together in a function.

function hexToRgb(hexColour) {
    // replace '#' with '0x' to give us a real hexadecimal string to work with
    const hex = hexColour.replace('#', '0x')  

    // right shift the respective bits
    // followed bit masking with bitwise AND against '11111111' (0xff in hexadecimal)
    const r = hex >> 16 & 0xff
    const g = hex >> 8 & 0xff
    const b = hex & 0xff

    return [r, g, b] // return an array of the RGB values
}

console.log(hexToRgb('#15014c'))
// [ 21, 1, 76 ]

Conclusion

In this article we saw a real world example of using bitwise operators in JavaScript, by building a RGB to Hex and Hex to RGB colour convertors. If you have never dealt with bitwise operators before, there is a lot to take in here. However there is no better way to learn a concept than by actually building something!

If you are looking for further reading on the topic, try the following articles:

JavaScript Bitwise Operators

MDN - Expressions and Operators

Using Bitwise operators in JavaScript

Using Bitwise XOR to Solve the 'Lonely Integer' Problem

Owen Rees — Sat, 18 Nov 2023 11:42:06 +0000

The Lonely Integer problem is a common coding challenge used to test your ability to count or filter numbers in an array, with the goal of isolating the number which appears only once. On HackerRank, the definition is as follows:

Given an array of integers, where all elements but one occur twice, find the unique element.

Example:
a = [1, 2, 3, 4, 3, 2, 1];

The unique element is 4.

There are multiple ways to solve this problem, including counting and filtering, or my personal favourite of utilising a Set to keep track of elements that have been seen. For example:

const set = new Set();

numberArray.forEach(num => set.has(num) ? set.delete(num) : set.add(num));
return Array.from(set)[0];

We are going to explore a rather different method, utilising the Bitwise XOR (^) or "exclusive-or" operator.

A Summary of Bitwise Operations

We are not going to do a deep dive into how bitwise operators work in JavaScript. If you wish to delve a bit deeper, this article will give you a good overview.

In summary, these operators compare binary representations of numbers, offering faster performance compared to their logical counterparts since computers are optimised for bitwise operations.

Bitwise XOR

The Bitwise XOR is an "exclusive-or" operator, which has subtle differences compared to the Bitwise OR operator.

Let us first look at the Bitwise OR (|) operand. MDN defines Bitwise OR as returning a number whose binary representation has a 1 in each bit position for which the corresponding bits of either or both operands are 1

const a = 6;  // Binary 0110
const b = 10; // Binary 1010

const result = a | b // 14 (Binary: 1110)

The Bitwise OR operation produces a truthy result when one or both bits are set to 1. If true, the result bit is set to 1, otherwise it is set to 0.

// Bitwise OR (|)
0 | 1 = 1   // one of the bits = 1
1 | 1 = 1   // both bits = 1
0 | 0 = 0   // neither bits = 1

0110 | 1010 = 1110

The Bitwise XOR (^) operator produces a truthy result when one bit is exclusively set to 1 and the other bit is exclusively set to 0. If both bits are set to 1, the result is not truthy. If true, the result bit is set to 1, otherwise it is set to 0.

const a = 6;  // Binary 0110
const b = 10; // Binary 1010

const result = a ^ b // 12 (Binary: 1100)

This is calculated as follows:

// Bitwise XOR (^)
0 ^ 1 = 1   // one bit exclusively = 1
1 ^ 1 = 0   // neither bit exlusively = 1
0 ^ 0 = 0   // neither bits exclusively = `1`

0110 ^ 1010 = 1100

Cancelling Out Numbers Using Bitwise XOR

If we take the same integer twice and perform a Bitwise XOR operation on them, they cancel each other out and return 0.

const a = 1     // Binary 1
a ^ a = 0       // 1 ^ 1 = 0 since one bit is not exclusiely set to 1

const b = 5     // Binary 101
b ^ b = 0       // 101 ^ 101 = 000 since none of the corresponding bits are exclusively set to 1

Using Bitwise XOR to Solve the Lonely Integer Problem

As demonstrated earlier, when an even number of identical integers is compared using Bitwise XOR, the result nullifies them, while an odd number of the same integer will yield the original integer.

We can iterate through the integers in the array and keep the results of our comparisons in a variable using the Bitwise XOR assingment operator (^=). Let's begin by examining some manual calculations for this process:

const arr1 = [1, 2, 1]  // Binary [01, 10, 01] with 2 bits for easier visualisation
01 ^ 10 = 11            // use the new binary number to compare against the next element in the array
11 ^ 01 = 10            // 2, the unique element in the array

const arr2 = [1, 2, 3, 4, 3, 2, 1]  // Binary [001, 010, 011, 100, 011, 010, 001]
001 ^ 010 = 011     // 1 ^ 2 = 3
011 ^ 011 = 000     // 3 ^ 3 = 0
000 ^ 100 = 100     // 0 ^ 4 = 4
100 ^ 011 = 111     // 4 ^ 3 = 7
111 ^ 010 = 101     // 7 ^ 2 = 5
101 ^ 001 = 100     // 5 ^ 1 = 4, the unique element in the array

By maintaining a record of the resulting bits, we can conduct Bitwise XOR comparisons on them while iterating through the array.

const array = [5, 3, 4, 1, 1, 3, 2, 4, 5]
// Binary [101, 011, 100, 001, 001, 011, 010, 100, 101]

let total = 0
array.forEach(n => total ^= n)
return total    // 2

// each iteration works as follows:
101 ^ 011 = 110     // 5 ^ 3 = 6
110 ^ 100 = 010     // 6 ^ 4 = 2
010 ^ 001 = 011     // 2 ^ 1 = 3
011 ^ 001 = 010     // 3 ^ 1 = 2
010 ^ 011 = 001     // 2 ^ 3 = 1
001 ^ 010 = 011     // 1 ^ 2 = 3
011 ^ 100 = 111     // 3 ^ 4 = 7
111 ^ 101 = 010     // 7 ^ 5 = 2, the unique element in the array

Conclusion

In conclusion, the Bitwise XOR operator proves invaluable in singling out the unique integer within an array, capitalising on the even occurrence of other integers that effectively cancel each other through bitwise exclusive-OR comparisons. This approach can be flexibly extended to address various scenarios, including the identification of odd or even occurrences within an array.