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 truncate an array in JavaScript?
This tutorial is going to be about truncating an array in JavaScript. Truncating an array means trimming some elements from the end and assigning back the new value of the truncated array to the actual array.
Sometimes we need to truncate an array. For example, if there is an array with sorted elements in descending order, and we need only the first k sorted elements from the array. Instead of creating an extra array and modifying that, we can directly truncate the original array.
There are several ways to truncate an array. Let's explore these methods.
Syntax
Following are the syntaxes to truncate an array:
arr.splice(index, howmany); // the splice() method arr.length = idx; // array length property arr = arr.slice(start, end); // slice() method
Here arr is the original array. The idx is the desired length. The index is the position to start removal and howmany is the number of elements to remove from the array.
Using Array splice() Method
The splice() method modifies the original array by removing elements. It's the most flexible method for truncation.
<html>
<head>
<title>Example - Truncate an array in JavaScript</title>
</head>
<body>
<h3>Truncate an Array using splice() Method</h3>
<p id="before">Array before truncate:<br></p>
<p id="after">Array after truncate:<br></p>
<script>
let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
document.getElementById('before').innerHTML += arr;
arr.splice(4, arr.length);
document.getElementById('after').innerHTML += arr;
</script>
</body>
</html>
Array before truncate: kalyan,ashis,anand,sonu,tirupati,nagar,arjun Array after truncate: kalyan,ashis,anand,sonu
Using Array length Property
The length property provides the simplest way to truncate an array. When you set the length to a smaller value, elements beyond that position are removed.
<html>
<head>
<title>Example - Truncate an array in JavaScript</title>
</head>
<body>
<h3>Truncate an Array using Array length property</h3>
<p id="before">Array before truncate:<br></p>
<p id="after">Array after truncate:<br></p>
<script>
let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
document.getElementById('before').innerHTML += JSON.stringify(arr);
arr.length = 4;
document.getElementById('after').innerHTML += JSON.stringify(arr);
</script>
</body>
</html>
Array before truncate: ["kalyan","ashis","anand","sonu","tirupati","nagar","arjun"] Array after truncate: ["kalyan","ashis","anand","sonu"]
This method only allows truncation from the beginning (index 0) to the specified length, unlike splice() which offers more flexibility with start and end positions.
Length Property with Larger Values
If you set the length to a value greater than the current array length, undefined elements are added.
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
arr.length = 10;
document.getElementById('result1').innerHTML = JSON.stringify(arr);
document.getElementById('result2').innerHTML = "Element at index 8: " + arr[8];
</script>
</body>
</html>
["kalyan","ashis","anand","sonu","tirupati","nagar","arjun",null,null,null] Element at index 8: undefined
Using Array slice() Method
The slice() method creates a new array with selected elements without modifying the original array. You need to reassign the result to truncate.
<html>
<head>
<title>Example - Truncate an array in JavaScript</title>
</head>
<body>
<h3>Truncate an Array using slice() Method</h3>
<p id="before">Array before truncate:<br></p>
<p id="after">Array after truncate:<br></p>
<script>
let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
document.getElementById('before').innerHTML += arr;
arr = arr.slice(0, 4);
document.getElementById('after').innerHTML += arr;
</script>
</body>
</html>
Array before truncate: kalyan,ashis,anand,sonu,tirupati,nagar,arjun Array after truncate: kalyan,ashis,anand,sonu
Here arr.slice(0, 4) extracts elements from index 0 to 3 (4 is excluded). The slice() method allows you to specify both start and end positions.
Comparison
| Method | Modifies Original | Flexibility | Performance |
|---|---|---|---|
splice() |
Yes | High - can remove from any position | Fast |
length property |
Yes | Low - only from start | Fastest |
slice() |
No - creates new array | High - can extract any portion | Slower due to copying |
Conclusion
Use the length property for simple truncation from the end, splice() for flexible in-place modification, and slice() when you need to preserve the original array. Each method serves different truncation needs in JavaScript.
3K+ Views
