Take Every Nth Element of Array in JavaScript

In this article, we will learn to extract every nth element from an array and display a fixed number of values in Javascript. The objective is to filter out every second element (or more generally every nth element) from an array and limit the result to a specified count of elements. We will explore different approaches in JavaScript for achieving this functionality, each offering a unique way to solve the problem.

Problem Statement 

Let's say you have an array that takes every nth element. Display a fixed number of values after extracting the elements.

Input

Let's say the following is our array ?

var numbers = [1, 2, 34, 56, 78, 90, 100, 110, 40, 70, 67, 77, 34, 68, 89, 91, 94];

Output

[ 2, 56, 90, 110, 70, 77 ]

The above shows the result will be 6 values if the counter is set as 6.

Different Approaches 

Following are the different approaches to extract every nth element from an array and display a fixed number of values in Javascript ?

• Iterative Filtering 
• Using filter() and Slice()

Iterative Filtering 

This approach extracts every second element from an array while limiting the result to a specified number of values. It uses a loop to iterate through the array, apply index-based filtering, and control the count of elements added.

Following are the steps taken for every nth Element of the Array and display a fixed number using iterative filtering ?

• Iterative Filtering: The code iterates through the entire array using a for loop, examining each element.
  
• Index-based Filtering: It filters the array elements based on their index (every second element, using the condition index % 2 !== 0).
  
• Counter Control: A counter (start) is used to limit the number of elements added to the result.
  
• Condition-based Extraction: The if (start <= counter) condition ensures that only the first counter elements are included, adding it to newNumbers using the push() method.

Example

Below is an example of taking every nth Element of an Array and displaying a fixed number of values ?

var numbers = [1, 2, 34, 56, 78, 90, 100, 110, 40, 70, 67, 77, 34, 68, 89, 91, 94];
var counter = 6;
var newNumbers = [];
var start = 0;
for (var index = 0; index < numbers.length; index++) {
   if (index % 2 != 0) {
      start++;
      if (start <= counter) {
         newNumbers.push(numbers[index]);
      }
   }
}
console.log(newNumbers);

Output

[ 2, 56, 90, 110, 70, 77 ]

Time complexity: O(n) because the algorithm iterates through the entire array once, with each iteration performing constant-time operations (index check and counter increment).
Space complexity: O(n) as the algorithm creates a new array (newNumbers) to store the filtered elements, which can be at most half the size of the input array in the worst case (depending on the counter).

Using filter() and Slice()

This approach utilizes filter() to extract every second element and then limits the result using slice() to display a fixed number of values.

• filter(): The filter() method iterates over the numbers array and only keeps the elements at odd indices (index % 2 !== 0).
  
• slice(0, counter): The slice() method limits the result to the first counter elements. This ensures that only a fixed number of values are displayed.

var newNumbers = numbers
   .filter((value, index) => index % 2 !== 0)
   .slice(0, counter);

Example

Below is an example of taking every nth Element of an Array and displaying a fixed number of values ?

var numbers = [1, 2, 34, 56, 78, 90, 100, 110, 40, 70, 67, 77, 34, 68, 89, 91, 94];
var counter = 6;

// Extract every second element (using filter) and limit the output using slice
var newNumbers = numbers
   .filter((value, index) => index % 2 !== 0)  // Extract every second element
   .slice(0, counter);  // Limit to the first 'counter' elements

console.log(newNumbers);

Output

[ 2, 56, 90, 110, 70, 77 ]

Time complexity: O(n) due to the filter() method, which iterates through the entire array to apply the condition and extract every second element.
Space complexity: O(n) as the filter() method creates a new array of filtered elements (up to half the size of the original array), and the result is stored in a new array after slicing.

Conclusion

Both approaches are efficient for extracting and limiting every nth element from an array. The Iterative Filtering approach uses explicit loop control, while the filter() and slice() approach uses JavaScript's built-in array methods for a more functional and concise implementation. Both methods have a time complexity of O(n) and space complexity of O(n), with the performance varying based on the size of the array and the number of filtered elements.