Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the first n values of an array in JavaScript?
In JavaScript, getting the first n elements from an array is a common operation. There are several built-in methods to accomplish this efficiently.
First n values means extracting elements from index 0 to index n-1. For example, if n=3, you get elements at positions 0, 1, and 2.
Using the slice() Method (Recommended)
The slice() method is the most common and efficient way to get the first n elements. It creates a new array without modifying the original.
Syntax
array.slice(0, n)
Example 1: Basic Usage
<!DOCTYPE html>
<html>
<head>
<title>Get First N Elements</title>
</head>
<body>
<div id="output"></div>
<script>
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let firstThree = numbers.slice(0, 3);
document.getElementById("output").innerHTML =
"Original array: " + numbers + "<br>" +
"First 3 elements: " + firstThree;
</script>
</body>
</html>
Original array: 1,2,3,4,5,6,7,8,9 First 3 elements: 1,2,3
Example 2: With Mixed Data Types
<!DOCTYPE html>
<html>
<head>
<title>First N Elements - Mixed Array</title>
</head>
<body>
<div id="result"></div>
<script>
let mixedArray = ["Alice", 40, "Edward", "Cullen", true, null];
let n = 4;
let firstN = mixedArray.slice(0, n);
document.getElementById("result").innerHTML =
"First " + n + " elements: " + firstN.join(", ");
</script>
</body>
</html>
First 4 elements: Alice, 40, Edward, Cullen
Using Array Destructuring
For small, fixed values of n, you can use array destructuring with rest syntax:
<!DOCTYPE html>
<html>
<head>
<title>Array Destructuring</title>
</head>
<body>
<div id="destructure"></div>
<script>
let colors = ["red", "blue", "green", "yellow", "purple"];
// Get first 3 elements using destructuring
let [first, second, third, ...rest] = colors;
let firstThree = [first, second, third];
document.getElementById("destructure").innerHTML =
"First 3 colors: " + firstThree.join(", ");
</script>
</body>
</html>
First 3 colors: red, blue, green
Using External Libraries
Libraries like Lodash provide utility functions. Note that this requires including the library:
<!DOCTYPE html>
<html>
<head>
<title>Using Lodash</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
<div id="lodash"></div>
<script>
let numbers = [10, 20, 30, 40, 50, 60];
let firstFour = _.take(numbers, 4);
document.getElementById("lodash").innerHTML =
"First 4 numbers using Lodash: " + firstFour.join(", ");
</script>
</body>
</html>
First 4 numbers using Lodash: 10, 20, 30, 40
Comparison of Methods
| Method | External Dependency | Performance | Flexibility |
|---|---|---|---|
slice() |
None | Excellent | High |
| Destructuring | None | Good | Low (fixed n) |
Lodash _.take()
|
Lodash library | Good | High |
Conclusion
The slice() method is the recommended approach for getting the first n elements from an array. It's built into JavaScript, performs well, and doesn't modify the original array.
1K+ Views
