How to Get Every Nth Element of an Array in JavaScript
A common task in data processing is to select elements from an array at regular intervals—for example, getting every 2nd, 3rd, or Nth item. This is useful for sampling data, creating layouts, or processing items in batches. JavaScript provides several ways to achieve this, with the filter() method offering a declarative approach and a for loop providing a more performant one.
This guide will teach you how to use both the Array.prototype.filter() method and a classic for loop to get every Nth element from an array, explaining the trade-offs of each approach so you can choose the best one for your needs.
The Core Problem: Selecting by Interval
The goal is to create a new array containing only the elements from the original array at specific, evenly spaced indexes (e.g., 0, 2, 4, 6...).
For example, how to get every 3rd element?
// Problem: How to get every 3rd element: [0, 3, 6]?
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
The Functional Method: Array.prototype.filter()
The filter() method is a clean, declarative way to solve this problem. It creates a new array containing all elements that pass a test implemented by the provided callback function. We can use the element's index to perform our test.
The modulo operator (%) is the key. The expression index % N gives the remainder when index is divided by N. If the remainder is 0, it means the index is a multiple of N.
Solution:
function getEveryNth(array, nth) {
// Keep an element if its index is a multiple of nth.
// We add 1 to the index to make the selection 1-based (every 1st, 2nd, etc.)
// If you want 0-based (0th, 2nd, 4th), use `index % nth === 0`.
return array.filter((element, index) => (index + 1) % nth === 0);
}
// Example: Get every 2nd element
const letters = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(getEveryNth(letters, 2)); // Output: ['b', 'd', 'f']
// Example: Get every 3rd element
console.log(getEveryNth(letters, 3)); // Output: ['c', 'f']
The Imperative Method (More Performant): A for Loop
While filter() is very readable, it has to visit every single element in the array. For very large arrays, a classic for loop can be more performant because we can configure it to "jump" directly to the indexes we need.
Instead of incrementing the loop counter by 1 on each iteration (i++), we increment it by N (i += nth).
Solution:
function getEveryNth(array, nth) {
const result = [];
// Start at the desired index (e.g., `nth - 1` for 1-based)
// and jump by `nth` on each iteration.
for (let i = nth - 1; i < array.length; i += nth) {
result.push(array[i]);
}
return result;
}
// Example: Get every 2nd element
const letters = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(getEveryNth(letters, 2)); // Output: ['b', 'd', 'f']
This method only visits the elements it needs, making it more efficient for large datasets.
Which Method Should You Choose?
filter(): Choose this method for its readability and declarative style. For most arrays, the performance difference is negligible. It clearly communicates what you are trying to do ("filter the array").forloop: Choose this method for performance-critical operations on very large arrays. It is faster because it does less work, but the code is more imperative and less expressive.
For the vast majority of use cases, the filter() method is the recommended best practice.
Practical Example: Creating Data Batches
A common use case is to process a large list of items in smaller "batches." This script gets every 10th item to create a sample batch.
// Imagine this is a large array of 1000 items
const allItems = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
function createBatch(items, batchSize) {
// Filter to get every Nth item
return items.filter((_, index) => (index + 1) % batchSize === 0);
}
const batchOf100 = createBatch(allItems, 10);
console.log(batchOf100.length); // Output: 100
console.log(batchOf100[0]); // Output: "Item 10"
console.log(batchOf100[1]); // Output: "Item 20"
Conclusion
Selecting every Nth element from an array is a common task with two excellent solutions in JavaScript.
- The
filter()method, combined with the modulo operator (%), is the recommended best practice for its readability and declarative style. - A
forloop with a custom increment (i += nth) is a more performant alternative that is well-suited for very large arrays where efficiency is the primary concern.
For most day-to-day coding, the clarity of the filter() method makes it the superior choice.