Оптимизация хранения данных с помощью битовой маски в JavaScript

Битовые маски - это специальный инструмент в программировании, который позволяет использовать отдельные биты числа для хранения множественных булевых значений. Это особенно удобно, когда нужно оптимизировать память и получать быстрый доступ к данным.

Представьте, что у вас есть интерфейс, в котором у пользователя доступны различные флаги для конфигурации (например, показывать кнопку с новым функционалом или дать доступ к новой странице). Такое может понадобиться, когда вы разрабатываете большую фичу и хотите держать её код в основной ветке, но при этом не готовы открывать фичу всем пользователям, пока не протестируете.

Мы можем хранить данные об активных флагах в cookie, для того чтобы иметь к ним доступ во время SSR (server side rendering). Но максимальный объем хранимой информации в cookie сильно ограничен, а флагов может быть большое количество. Поэтому, вместо использования нескольких переменных, мы можем хранить все эти флаги в одном числе.

const NEW_BUTTON_FLAG = 1;  // 0001
const NEW_PAGE_FLAG = 2;    // 0010
const NEW_FORM_FLAG = 4;    // 0100
const NEW_API_FLAG = 8;     // 1000

let userFlags = 0;

// Включаем нужные флаги
userFlags = userFlags | NEW_FORM_FLAG | NEW_BUTTON_FLAG; // 0101

// Проверяем, активен ли флаг у пользователя
const showNewForm = (userFlags & NEW_FORM_FLAG) !== 0; // true
const showPageForm = (userFlags & NEW_PAGE_FLAG) !== 0; // false

// Убираем флаг
userFlags &= ~NEW_BUTTON_FLAG;
console.log(userFlags.toString(2)); // 100

С помощью побитовых операций (|, & и ~) мы можем добавлять, удалять, а также проверять флаги.