JavaScript - How to Get First N Elements from an Array?

There are different ways to get the first N elements from array in JavaScript.

Examples:

Input:
arr = [1, 2, 3, 4, 5, 6], n = 3 
Output: [1, 2, 3] 

Input:
arr = [6, 1, 4, 9, 3, 5, 7], n = 4
Output: [6, 1, 4, 9]

1. Using slice() Method

The slice() method is used to extract a part of an array and returns a new array containing the extracted elements. It does not change the original array. Here, start is the starting index from where to begin extraction and end is the ending index from where to end extraction. The end index is exclusive, i.e., the element at the end index is not included in the extracted array.

Syntax

array.slice(start, end);

const arr = [1, 2, 3, 4, 5, 6];
const n = 3;
const result = arr.slice(0, n);
console.log(result);

[ 1, 2, 3 ]

2. Using for Loop

We can also use a for loop to iterate through the array and extract the first N elements. we will iterate the loop by N number that we want and we will use console.log to print those numbers into the console.

Syntax

for (let i = 0; i < n; i++) {
    // Access and store elements here
}

const arr = [1, 2, 3, 4, 5, 6];
const n = 3; // Number of elements to extract
const result = [];
for (let i = 0; i < n; i++) {
    result.push(arr[i]);
}
console.log(result); // Output: [1, 2, 3]

[ 1, 2, 3 ]

3. Using splice() Method

The splice() method can be used to add or remove elements from an array. We can use it to remove all elements after the first N elements. Here, start is the starting index from where to begin deletion, and deleteCount is the number of elements to be deleted. We can set deleteCount to the length of the array to remove all elements after the first N elements.

Syntax

array.splice(start, deleteCount);

const arr = [1, 2, 3, 4, 5, 6];
const n = 3;
arr.splice(n);
console.log(arr); // Output: [1, 2, 3]

[ 1, 2, 3 ]

4. Using filter() Method

We can also use the filter() method but this method is not much efficient because it iterates over the entire array.

const arr = [1,2,3,4,5,6];
const n = 4;

const newArray = arr.filter((element, index) => index < n);
console.log(newArray); 

Output:

[ 1, 2, 3, 4 ]

5. Using Lodash _.take() Method

Lodash _.take() method is used to create a slice of an array with n elements from the beginning.

Syntax

_.take(array, n);

const _ = require('lodash');

let x = [1, 2, 3, 4, 5, 6, 7]
let newArray = _.take(x, 5);

console.log(newArray);

Output

[ 1, 2, 3, 4, 5 ]

6. Using Spread Operator

Another approach to get the first N number of elements from an array in JavaScript is by using the spread operator along with array destructuring. This method creates a shallow copy of the original array with the specified number of elements.

Syntax

const newArray = [...array.slice(0, n)];

const arr = [1, 2, 3, 4, 5, 6];
const n = 4;

const newArray = [...arr.slice(0, n)];
console.log(newArray);

[ 1, 2, 3, 4 ]

7. Using reduce() Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. We can use it to accumulate the first N elements into a new array.

const arr = [1, 2, 3, 4, 5, 6];
const n = 3;

const result = arr.reduce((acc, curr, index) => {
  if (index < n) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(result); 

[ 1, 2, 3 ]

8. Using Array.from() Method

The Array.from() method creates a new, shallow-copied array instance from an array-like or iterable object. By combining it with Array.prototype.keys(), we can easily extract the first N elements from an array

const arr = [1, 2, 3, 4, 5, 6];
const n = 3;

const result = Array.from(arr.keys()).slice(0, n).map(index => arr[index]);

console.log(result); 

[ 1, 2, 3 ]