Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
4 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

Understanding Bitwise Shifts in JavaScript: << and >>

A practical guide to left and right shift operators in JavaScript

Bitwise operators are powerful but often overlooked features in JavaScript. While they’re not common in everyday web development, understanding them can unlock performance optimizations and help you better understand how computers handle numbers at a low level.

What Are << and >>?

<< (left shift) and >> (right shift) are operators that move bits left or right in a number’s binary representation.

JavaScript
// Left Shift (<<)
let num = 5; // Binary: 00000101
let shifted = num << 1; // Binary: 00001010 (decimal: 10)
// Right Shift (>>)
let num2 = 10; // Binary: 00001010
let shifted2 = num2 >> 1; // Binary: 00000101 (decimal: 5)

Left Shift <<: Quick Multiplication

Left shifting multiplies a number by 2 for each position shifted:

JavaScript
console.log(5 << 1); // 10 (5 * 2)
console.log(5 << 2); // 20 (5 * 4)
console.log(5 << 3); // 40 (5 * 8)

Right Shift >>: Integer Division

Right shifting divides by 2 for each position shifted, rounding down:

JavaScript
console.log(10 >> 1); // 5 (10 / 2)
console.log(10 >> 2); // 2 (10 / 4)
console.log(10 >> 3); // 1 (10 / 8)

Practical Applications of Bit Shifts

Bit shifts shine in several specific domains where working with binary data becomes essential. Let’s dig into each use case and understand exactly how and why they work.

When building permission systems or configuration managers, bit shifts provide an elegant way to handle multiple boolean flags in a single number. Think of each bit position as a switch - it’s either on (1) or off (0).

The most common and practical use of bit operations in JavaScript is working with numbers. Here’s a real example you might encounter:

JavaScript
// Parse RGB colors to hex and back
function rgbToHex(r, g, b) {
return ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}
function hexToRgb(hex) {
const num = parseInt(hex, 16);
return {
r: num >> 16 & 255,
g: num >> 8 & 255,
b: num & 255
};
}
// Use case: Working with CSS colors
console.log(rgbToHex(255, 0, 0)); // 'ff0000'
console.log(hexToRgb('ff0000')); // { r: 255, g: 0, b: 0 }

When working with images in JavaScript, each pixel’s color is often represented as a single number. Bit shifts make it easy to work with these values.

JavaScript
function getRedChannel(pixel) {
// Move red bits to the right and mask off other colors
return (pixel >> 16) & 0xFF;
}
function getGreenChannel(pixel) {
return (pixel >> 8) & 0xFF;
}
function getBlueChannel(pixel) {
return pixel & 0xFF;
}
function createPixel(red, green, blue) {
// Combine RGB values into a single number
return (red << 16) | (green << 8) | blue;
}
// Using in practice
const pixel = createPixel(255, 128, 0); // Bright orange color
console.log(getRedChannel(pixel)); // 255
console.log(getGreenChannel(pixel)); // 128
console.log(getBlueChannel(pixel)); // 0

This code is doing something quite clever. Instead of storing three separate numbers for red, green, and blue, we pack them all into a single number. Each color gets 8 bits of space - enough to store values from 0 to 255. The red value goes in the leftmost 8 bits, green in the middle 8 bits, and blue in the rightmost 8 bits.

When we want to get a color back out, we shift the bits right until our desired color is in the lowest 8 bits, then mask off everything else with & 0xFF

It’s like having a bookshelf where each shelf can hold numbers up to 255, and we’re just moving books between shelves.

This bit-shifting approach is much faster than storing RGB values in an array or object. It’s especially useful when processing lots of pixels, like in image filters or games. Modern browsers use similar techniques under the hood when rendering graphics.

That said, you might never need to write code like this yourself. Modern web APIs usually handle these low-level details for you. But understanding how it works helps you appreciate what’s happening behind the scenes in your browser’s rendering engine.

The truth is, for most web development work, you’ll rarely need bit operations. They’re most useful when:

  • Converting between number systems (like RGB colors)
  • Working with binary data (like WebGL or file processing)
  • Implementing performance-critical use cases like game physics engines or real-time data processing

For everyday tasks, using objects or Sets are usually clearer and more maintainable.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Javascript
4 min read

Intl.DurationFormat: Format Time Durations with Locale Support

Stop writing manual duration formatting code. Instead, leverage the new powerful Intl.DateTimeFormat API for internationalized time displays

Mar 13, 2025
Read article
Javascript
7 min read

JavaScript Truthy and Falsy: A Deep Dive

Grasp JavaScript's type coercion with practical examples and avoid common pitfalls

Oct 27, 2024
Read article
Javascript
4 min read

JavaScript compile hints: what they are and when to use them

V8's compile hints let you control which JavaScript gets compiled immediately during page load

May 12, 2025
Read article
Javascript
3 min read

Float16Array in JavaScript

Understanding the new 16-bit floating point array in JavaScript

Apr 14, 2025
Read article
Javascript
6 min read

Understanding JavaScript Closures With Examples

Closures are essential for creating functions that maintain state, without relying on global variables.

Sep 6, 2024
Read article
Javascript
5 min read

Working with JavaScript's Scheduler API

Learn how to prioritize and control task execution in JavaScript using the new Scheduler API for better performance and user experience

Nov 26, 2024
Read article
Javascript
6 min read

AggregateError in JavaScript

Handle multiple errors at once

Sep 2, 2024
Read article
Javascript
7 min read

WeakRefs in JavaScript: Explained In Simple Terms

Understanding how WeakRef helps manage memory in JavaScript

Jan 7, 2025
Read article
Javascript
3 min read

JavaScript's &&= Operator: Understanding Logical AND Assignment

Use the &&= operator to safely update truthy values while preserving falsy states

Nov 5, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/bitwise-shifts-in-javascript. It was written by a human and polished using grammar tools for clarity.