Skip to main content

toggle()

toggle<T>(array, element): T[]

Toggles the presence of an element in an array.

note

Uses strict equality (===). Only the first occurrence is removed.

Type Parameters​

T: T​

The type of elements in the array.

Parameters​

array: readonly T[]​

The source array.

element: T​

The element to toggle.

Returns: T[]​

A new array with the element added or removed.

Since​

2.0.0

Performance​

O(n) time & space, uses indexOf and filter/spread operations.

Also known as​

symmetricDifference (Remeda, Ramda) · toggle (Radashi) · xor (Lodash) · ❌ (es-toolkit, Effect, Modern Dash, Antfu)

Example​

toggle([1, 2, 3], 2);
// => [1, 3]

toggle([1, 2, 3], 4);
// => [1, 2, 3, 4]

How it works?​

Toggle adds an element if absent, or removes it if present — a single operation for both actions. Uses reference equality (===) to find the element.

Toggle vs Filter vs Spread​

OperationPurposeResult
toggle(arr, x)Add or remove in one callToggles presence
arr.filter(i => i !== x)Remove onlyAlways removes
[...arr, x]Add onlyAlways appends (duplicates possible)

Use Cases​

Manage selected items in a multi-select UI 📌​

Toggle selection state for checkboxes, tags, or list items. Perfect for filter panels, shopping carts, or bulk action selectors.

let selectedFilters = ["electronics", "in-stock"];

selectedFilters = toggle(selectedFilters, "on-sale");
// => ["electronics", "in-stock", "on-sale"]  (added)

selectedFilters = toggle(selectedFilters, "electronics");
// => ["in-stock", "on-sale"]  (removed)

Handle favorites or bookmarks 📌​

Add or remove items from saved lists with a single action. Ideal for wishlists, reading lists, or starred content.

let bookmarkedIds = [101, 205, 342];

bookmarkedIds = toggle(bookmarkedIds, 205);
// => [101, 342]  (removed)

bookmarkedIds = toggle(bookmarkedIds, 789);
// => [101, 342, 789]  (added)

Manage user permissions dynamically​

Grant or revoke access rights with a single action. Useful for admin panels, role management, or feature flags.

let permissions = ["read", "write"];

permissions = toggle(permissions, "delete");
// => ["read", "write", "delete"]  (granted)

permissions = toggle(permissions, "write");
// => ["read", "delete"]  (revoked)

Toggle sidebar panels in a dashboard​

Open or close dashboard panels with a single action. Perfect for multi-panel layouts where users customize their workspace.

let openPanels = ["overview", "metrics"];

openPanels = toggle(openPanels, "logs");
// => ["overview", "metrics", "logs"]  (opened)

openPanels = toggle(openPanels, "overview");
// => ["metrics", "logs"]  (closed)

// Render panels
panels.forEach((panel) => {
  panel.visible = openPanels.includes(panel.id);
});

Manage active filters in a product catalog​

Toggle filter chips on and off in a faceted search interface. Essential for e-commerce product filtering and search refinement.

let activeFilters = ["in-stock", "free-shipping"];

// User clicks "On Sale" chip
activeFilters = toggle(activeFilters, "on-sale");
// => ["in-stock", "free-shipping", "on-sale"]

// User clicks "Free Shipping" again to remove it
activeFilters = toggle(activeFilters, "free-shipping");
// => ["in-stock", "on-sale"]

const filteredProducts = products.filter((p) =>
  activeFilters.every((f) => p.tags.includes(f))
);

Toggle checkbox state in a form group​

Manage checked items in a checkbox group with a single toggle call. Essential for form components with multi-select checkboxes.

let checkedOptions = ["email", "sms"];

// User clicks "push" checkbox
checkedOptions = toggle(checkedOptions, "push");
// => ["email", "sms", "push"]

// User unchecks "email"
checkedOptions = toggle(checkedOptions, "email");
// => ["sms", "push"]

// Render checkboxes
options.forEach((opt) => {
  const isChecked = checkedOptions.includes(opt.value);
  renderCheckbox(opt, isChecked);
});

Toggle expanded rows in a data table​

Expand or collapse detail rows in a data table. Perfect for master-detail tables and accordion-style data displays.

let expandedRowIds = ["row-3"];

const toggleRow = (rowId: string) => {
  expandedRowIds = toggle(expandedRowIds, rowId);
  renderTable(data, expandedRowIds);
};

// User clicks expand icon on row-5
toggleRow("row-5");
// expandedRowIds => ["row-3", "row-5"]

// User clicks again on row-3
toggleRow("row-3");
// expandedRowIds => ["row-5"]