Skip to content

WebDevHubs

  • Home
  • HTML
  • CSS
  • JavaScript
  • Web Technologies
  • Web Templates
  • Toggle search form

How to Get First and Last Elements of an Array in JavaScript?

Posted on December 17, 2024 By Admin No Comments on How to Get First and Last Elements of an Array in JavaScript?

There are different approaches to accessing the first and last elements of an array in JavaScript.

1. Using Array Indexing

The basic method to access the first and last elements of an array is through indexing.

let arr = [10, 20, 30, 40, 50];
let first = arr[0];
let last = arr[arr.length - 1];

console.log(`First: ${first}, Last: ${last}`); 
// Output: First: 10, Last: 50

2. Using shift() and pop() Methods

JavaScript provides shift() to remove and return the first element and pop() to remove and return the last element. While these methods modify the original array, they can also be used to extract the required elements.

let arr = [10, 20, 30, 40, 50];
let first = arr.shift();
let last = arr.pop();

console.log(`First: ${first}, Last: ${last}`); 
// Output: First: 10, Last: 50

3. Using the slice() Method

The slice() method allows you to create shallow copies of array elements without modifying the original array. You can use it to get the first and last elements.

let arr = [10, 20, 30, 40, 50];
let first = arr.slice(0, 1)[0];
let last = arr.slice(-1)[0];

console.log(`First: ${first}, Last: ${last}`); 
// Output: First: 10, Last: 50

4. Using Destructuring Assignment

Array destructuring provides a clean and concise way to extract the first and last elements.

For the First Element

let arr = [10, 20, 30, 40, 50];
let [first] = arr;

console.log(`First: ${first}`); 
// Output: First: 10

For Both Elements

Using the length property to calculate the last element index:

let arr = [10, 20, 30, 40, 50];
let [first] = arr;
let last = arr[arr.length - 1];

console.log(`First: ${first}, Last: ${last}`); 
// Output: First: 10, Last: 50

5. Using the at() Method (Introduced in ES2022)

The at() method allows for retrieving elements using positive or negative indices. Negative indices are especially useful for getting the last element.

let arr = [10, 20, 30, 40, 50];
let first = arr.at(0);
let last = arr.at(-1);

console.log(`First: ${first}, Last: ${last}`); 
// Output: First: 10, Last: 50

6. Using Loops

You can use loops to retrieve the first and last elements programmatically, especially when the array size or conditions are dynamic.

For First Element

let arr = [10, 20, 30, 40, 50];
let first;

for (let i = 0; i < arr.length; i++) {
    first = arr[i];
    break; // Exit after the first iteration
}

console.log(`First: ${first}`); 
// Output: First: 10

For Last Element

let arr = [10, 20, 30, 40, 50];
let last;

for (let i = arr.length - 1; i >= 0; i--) {
    last = arr[i];
    break; // Exit after the first iteration
}

console.log(`Last: ${last}`); 
// Output: Last: 50
JavaScript, Web Technologies Tags:JavaScript-Array, JavaScript-Questions

Post navigation

Previous Post: How to Find the Length of an Array in JavaScript?
Next Post: Add New Elements at the Beginning of an Array in JavaScript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • June 2025
  • May 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024

Categories

  • CSS
  • HTML
  • JavaScript
  • Lodash
  • PHP
  • Python
  • Web Technologies
  • Web Templates

Recent Posts

  • JavaScript Array isArray() Method
  • JavaScript Array forEach() Method
  • JavaScript Array includes() Method
  • JavaScript Array keys() Method
  • JavaScript Array lastIndexOf() Method

Recent Comments

No comments to show.

Copyright © 2025 WebDevHubs.

Powered by PressBook Green WordPress theme