Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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. Suppose in a case, there is an array in which sorted (descending order) elements are there, and now we need only the first k sorted element from the array and delete the else value. So we don’t need to create an extra array and modify that and assign it to the actual.
There are many ways to truncate an array let’s have a look at all these methods.
Syntax
Following are the syntaxes to truncate an array:
arr.splice(index, howmany); // the splice() method. arr.length=idx; // array length property.
Here arr is the original array. The idx is the index/ position to that we want to truncate the array. The index is the position to remove element and howmany is number of elements to remove from the array.
Algorithm
- STEP 1 − Create an array arr and add elements to it. Display the arr using the innerHTML property.
- STEP 2 − Apply splice() method on the array arr passing the index and howmany as arguments. Alternatively, we could apply arr.length=idx.
- STEP 3 − Display the truncated array using the innerHTML property.
Example 1
Using Array splice() Method
In the below example, we use the array splice() method to truncate the array. We defined an array with seven elements. We truncated the elements beyond position 3.
<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>
Example 2
Using Array length Property
In this example, we truncate the array using the array length property. We simply assign our desired length to the array and its size got altered according to the assigned size.
<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 truancate:<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>
Here we altered the array to size 4 using arr.length=4 . It took the first 4 elements and after that all elements avoided from the array.
It has one drawback that we will only get elements from starting index 0 till given size unlike in splice we have an option of defining starting and ending indexes.
Now one question might be coming to your mind. What if we assigned the size greater than the array length? Then we get an undefined array element after the size of the array.
Example 3
In the example below, we define an array of length 7 and then assign the size greater than the array length.
<html> <body> <p id="result1"><p> <p id="result2"><p> <script> let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"]; arr.length=15 document.getElementById('result1').innerHTML=JSON.stringify(arr); document.getElementById('result2').innerHTML=arr[13]; </script> </body> </html>
Here we are altering the array size from 7 to 15 without adding the elements in the array. Notice the elements are null from index 7 to 14.
Example 4
Using Array slice() method
In the below example, we use the array slice() method to truncate the array.The Array slice() method doesn’t make changes in the original array it only returns the elements according to given arguments. So we need to store the returned elements in a variable.
We defined an array with seven elements. We truncated the elements beyond position 3.
<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>
Here arr = arr.slice(0, 4); 0 is starting index of array and 4 is ending index till which we want to splice our array and before the given starting index and after the ending index all the elements will be avoided and then we’ve assigned our updated array to actual array.
If arr = arr.slice(2, 5); will be there then output will be Anand, sonu, tirupati
In this tutorial, we learned how to use array splice() and slice() methods and the length property to truncate an array in JavaScript.
2K+ Views
