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
Selected Reading
JavaScript code to print last element of an array
Getting the last element of an array is a common operation in JavaScript. There are several methods to accomplish this, with different approaches depending on whether you want to modify the original array or not.
Using Array Length (Recommended)
The most efficient method uses the array's length property to access the last index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Last Array Element</title>
</head>
<body>
<h2>Array: ["A", 1, 2, 3, "B", "D"]</h2>
<button onclick="getLastElement()">Get Last Element</button>
<p id="result"></p>
<script>
let arr = ["A", 1, 2, 3, "B", "D"];
function getLastElement() {
let lastElement = arr[arr.length - 1];
document.getElementById("result").innerHTML =
"Last element: " + lastElement + "<br>Original array: " + arr;
}
</script>
</body>
</html>
Using Array.pop() Method
Warning: This method removes the last element from the array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Pop Method</title>
</head>
<body>
<h2>Using pop() - Modifies Original Array</h2>
<button onclick="popLastElement()">Pop Last Element</button>
<p id="popResult"></p>
<script>
let arr2 = ["A", 1, 2, 3, "B", "D"];
function popLastElement() {
let originalLength = arr2.length;
let lastElement = arr2.pop();
document.getElementById("popResult").innerHTML =
"Popped element: " + lastElement +
"<br>Array after pop: " + arr2 +
"<br>Length changed from " + originalLength + " to " + arr2.length;
}
</script>
</body>
</html>
Using Array.slice() Method
This method returns the last element without modifying the original array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Slice Method</title>
</head>
<body>
<h2>Using slice(-1) - Non-destructive</h2>
<button onclick="sliceLastElement()">Get Last with Slice</button>
<p id="sliceResult"></p>
<script>
let arr3 = ["A", 1, 2, 3, "B", "D"];
function sliceLastElement() {
let lastElement = arr3.slice(-1)[0];
document.getElementById("sliceResult").innerHTML =
"Last element: " + lastElement +
"<br>Original array unchanged: " + arr3;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Modifies Array? | Performance | Use Case |
|---|---|---|---|
arr[arr.length - 1] |
No | Fastest | General purpose |
arr.pop() |
Yes | Fast | When you want to remove |
arr.slice(-1)[0] |
No | Slower | Functional programming |
Handling Empty Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handle Empty Arrays</title>
</head>
<body>
<h2>Safe Last Element Access</h2>
<button onclick="safeGetLast()">Test with Empty Array</button>
<p id="safeResult"></p>
<script>
function safeGetLast() {
let emptyArr = [];
let nonEmptyArr = [1, 2, 3];
function getLastSafely(arr) {
return arr.length > 0 ? arr[arr.length - 1] : undefined;
}
document.getElementById("safeResult").innerHTML =
"Empty array last: " + getLastSafely(emptyArr) +
"<br>Non-empty array last: " + getLastSafely(nonEmptyArr);
}
</script>
</body>
</html>
Conclusion
Use arr[arr.length - 1] for best performance when you need the last element without modifying the array. Use arr.pop() only when you want to remove the last element. Always check for empty arrays to avoid undefined results.
Updated on: 2026-03-15T23:18:59+05:30
269 Views
Advertisements