drop()

drop<T>(array, count): T[]

Creates a slice of array with n elements dropped from the beginning.

---

Type Parameters

T: T

The type of elements in the array.

---

Parameters

array: readonly T[]

The array to query.

count: number

The number of elements to drop.

---

Returns: T[]

A new array with the first count elements removed.

---

Throws

RangeError If count is negative.

---

Since

2.0.0

---

Performance

O(n) time & space, single slice operation.

---

Also known as

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

---

Example

const numbers = [1, 2, 3, 4, 5];

drop(numbers, 2);
// => [3, 4, 5]

drop(numbers, 0);
// => [1, 2, 3, 4, 5]

---

How it works?

---

Use Cases

Implement cursor-based pagination 📌

Skip already-fetched items when loading more content. Essential for infinite scroll or "Load More" buttons.

#pagination#cursor#skip#infinite-scroll#loading#huge dataset

const allMessages = ["msg1", "msg2", "msg3", "msg4", "msg5", "msg6"];
const alreadyLoaded = 3;

const nextBatch = drop(allMessages, alreadyLoaded);
// => ["msg4", "msg5", "msg6"]

Skip metadata rows in imported data

Remove header lines from CSV or spreadsheet imports. Critical for data processing pipelines.

#skip#metadata#header#CSV#import#spreadsheet

const csvRows = [
  "Name,Age,City", // Header
  "Alice,25,Paris",
  "Bob,30,Lyon",
];

const dataRows = drop(csvRows, 1);
// => ["Alice,25,Paris", "Bob,30,Lyon"]

Exclude first N results from search

Remove promoted or pinned items to get organic results. Useful for search engines or content feeds.

#exclude#search#promoted#sponsored#organic#results

const searchResults = [
  { title: "Sponsored: Product A", sponsored: true },
  { title: "Sponsored: Product B", sponsored: true },
  { title: "Organic Result 1", sponsored: false },
  { title: "Organic Result 2", sponsored: false },
];

const organicOnly = drop(searchResults, 2);
// => [{ title: "Organic Result 1" }, { title: "Organic Result 2" }]

Skip already-rendered items in infinite scroll

Drop items already visible when loading the next batch in an infinite scroll. Essential for feed-based UIs and content-heavy pages.

#skip#rendered#infinite scroll#offset#pagination#design system#loading

const allPosts = await fetchAllPosts();
const alreadyVisible = currentPage * PAGE_SIZE;

const nextBatch = take(drop(allPosts, alreadyVisible), PAGE_SIZE);
// => Next PAGE_SIZE posts after what's already shown

appendToFeed(nextBatch);

Slice visible rows for virtual scroll viewport

Drop items above the viewport and take only the visible portion for rendering. Essential for virtual scroll implementations that render only what's visible.

#virtual#scroll#viewport#slice#visible#rows#design system#huge dataset#performance

const ROW_HEIGHT = 40;
const VIEWPORT_HEIGHT = 600;
const visibleCount = Math.ceil(VIEWPORT_HEIGHT / ROW_HEIGHT);

const getVisibleRows = (allRows: Row[], scrollTop: number) => {
  const startIndex = Math.floor(scrollTop / ROW_HEIGHT);
  return take(drop(allRows, startIndex), visibleCount + 2); // +2 for buffer
};

container.addEventListener("scroll", throttle(() => {
  const visible = getVisibleRows(allData, container.scrollTop);
  renderRows(visible);
}, 16));

Remove sticky header rows from a grouped list

Drop the group header items to get only the data rows within a section. Perfect for grouped lists with sticky section headers.

#sticky#header#group#section#list#design system

const sectionItems = [
  { type: "header", label: "Today" },
  { type: "item", text: "Meeting at 10am" },
  { type: "item", text: "Lunch with team" },
  { type: "item", text: "Code review" },
];

const dataOnly = drop(sectionItems, 1);
// => [Meeting, Lunch, Code review] (header removed)