Skip to main content

How to Get the First N Elements of an Array in JavaScript

A common requirement in programming is to get a "slice" of an array—specifically, the first N elements. This is useful for pagination, creating previews of large datasets, or simply taking a subset of an array. JavaScript's Array.prototype.slice() method is the perfect tool for this job.

This guide will teach you the modern and most effective method for getting the first N elements of an array. You will also learn about an important anti-pattern to avoid and see how destructuring can be used for a related but different task.

The slice() method is the idiomatic, readable, and performant way to get a portion of an array. It returns a new array containing a shallow copy of the elements from a start index up to (but not including) an end index.

To get the first N elements, you call slice() with a start index of 0 and an end index of N.

For example, we have an array and need to create a new array containing only its first three elements.

// Problem: How to get ['a', 'b', 'c'] from this array?
const letters = ['a', 'b', 'c', 'd', 'e', 'f'];

Solution:

const letters = ['a', 'b', 'c', 'd', 'e', 'f'];

// Get the first 3 elements
const firstThree = letters.slice(0, 3);

console.log(firstThree); // Output: ['a', 'b', 'c']

// The original array is not modified
console.log(letters);    // Output: ['a', 'b', 'c', 'd', 'e', 'f']
note

This is the recommended best practice for its clarity and performance.

note

Handling Edge Cases: The slice() method is very safe. If you ask for more elements than the array contains, it will simply return all the elements from the start index to the end of the array without throwing an error.

const shortArray = ['a', 'b'];
const result = shortArray.slice(0, 5);
console.log(result); // Output: ['a', 'b']

An Alternative for Named Variables: Destructuring Assignment​

If your goal is not to create a new array but to get the first few elements into their own separate, named variables, then destructuring is a very clean and modern syntax.

note

This method is best for a fixed, small number of elements, not a dynamic N.

Solution:

const letters = ['a', 'b', 'c', 'd', 'e', 'f'];

// Assign the first two elements to named variables
const [first, second] = letters;

console.log(first);  // Output: "a"
console.log(second); // Output: "b"

// You can also get the rest of the array
const [firstEl, secondEl, ...rest] = letters;
console.log(rest);   // Output: ['c', 'd', 'e', 'f']

The Anti-Pattern to Avoid: Using filter()​

You might see solutions using Array.prototype.filter() to get the first N elements. While this works, it is an anti-pattern and should be avoided.

Example of code with problems:

const letters = ['a', 'b', 'c', 'd', 'e', 'f'];
const n = 3;

// ⛔️ This works, but it is inefficient.
const firstThree = letters.filter((element, index) => index < n);

console.log(firstThree); // Output: ['a', 'b', 'c']

Why This is a Bad Practice​

The filter() method is designed to test every single element in an array. In this example, even after it has found the first three elements, it will continue to iterate over d, e, and f. For a very large array, this is extremely wasteful and inefficient.

The slice() method, by contrast, stops exactly where you tell it to and is highly optimized for this specific task.

Conclusion​

Getting the first N elements of an array is a simple task with a clear best practice.

  • The array.slice(0, N) method is the definitive, recommended solution. It is concise, readable, performant, and safe.
  • Use destructuring assignment when you need to assign the first few elements to their own named variables.
  • Avoid using filter() for this task, as it is inefficient and not the right tool for the job.

Table of Contents