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
First element and last element in a JavaScript array?
An array is a group of elements where each element has its own index value. We can access any element using these indexes. For the first element, the index is always 0, but for the last element, we need to use the array's length property to calculate the correct index.
Accessing the First Element
Since arrays are zero-indexed in JavaScript, the first element is always at index 0. If the array is arr, then the first element is arr[0].
Example
In the following example, we have two arrays and we'll access their first elements using index 0.
<html>
<body>
<script>
var array1 = ["Tutorix","Tutorialspoint","Javascript","Java"];
document.write("First element of array1: " + array1[0]);
document.write("<br>");
var array2 = ["Elon musk","Bilgates","Larry page","slim helu"];
document.write("First element of array2: " + array2[0]);
</script>
</body>
</html>
Output
First element of array1: Tutorix First element of array2: Elon musk
Accessing the Last Element
To access the last element, we use the array's length property. Since array indexes start from 0, the last element is at index array.length - 1. This approach works regardless of the array size.
Example
In the following example, we demonstrate two ways to access the last element: using a known index and using the length property for dynamic access.
<html>
<body>
<script>
var array1 = ["Javascript","Java","Spring","springboot"];
document.write("Last element using index 3: " + array1[3]);
document.write("<br>");
var array2 = ["Elon musk", "Bilgates", "Larry page", "slim helu", "jackma", "Ambani"];
document.write("Last element using length: " + array2[array2.length-1]);
document.write("<br>");
// Dynamic approach works for any array size
document.write("Array2 length: " + array2.length);
document.write("<br>");
document.write("Last index: " + (array2.length-1));
</script>
</body>
</html>
Output
Last element using index 3: springboot Last element using length: Ambani Array2 length: 6 Last index: 5
Alternative Methods
JavaScript also provides modern methods to access first and last elements:
<html>
<body>
<script>
var fruits = ["apple", "banana", "orange", "grape"];
// Using at() method (ES2022)
document.write("First: " + fruits.at(0));
document.write("<br>");
document.write("Last: " + fruits.at(-1));
document.write("<br>");
// Using slice() method
document.write("Last using slice: " + fruits.slice(-1)[0]);
</script>
</body>
</html>
Output
First: apple Last: grape Last using slice: grape
Comparison of Methods
| Method | First Element | Last Element | Browser Support |
|---|---|---|---|
| Index notation | arr[0] |
arr[arr.length-1] |
All browsers |
at() method |
arr.at(0) |
arr.at(-1) |
Modern browsers (ES2022) |
slice() method |
arr.slice(0,1)[0] |
arr.slice(-1)[0] |
All browsers |
Conclusion
Use arr[0] for the first element and arr[arr.length-1] for the last element. The at() method with negative indexing provides a cleaner syntax for modern applications.
830 Views
