Open In App

Get the first and last item in an array using JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript array is used to store multiple elements in a single variable. It is often used when we want to store a list of elements and access them by a single variable. We will learn how to get the first & last element in an array in JavaScript, along with understanding their implementation through the examples.

These are the following approaches:

Approach 1: Using length property in JavaScript

The array length property in JavaScript is used to set or return the number of elements in an array. 

Example 1: This example illustrates how to access the first and last numbers in the array.

Javascript




// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable
    let f = s[0];
 
    // Storing the last item
    let l = s[s.length - 1];
 
    // Printing output to screen
    console.log("First element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function


Output

First element is 3
Last element is 5

Example 2: This example illustrates to access the first and last word in the array.

Javascript




// Simple array
let s = ["Geeks", "for", "geeks", "computer", "science"];
function Gfg() {
 
    // First item of the array
    let f = s[0];
 
    // Last item of the array
    let l = s[s.length - 1];
 
    // Printing the output to screen
    console.log("First element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function


Output

First element is Geeks
Last element is science

Approach 2: Using Array.pop() and Array.shift() Method

The Array.pop()  method removes the last element of the array and returns it and the Array.shift() method removes the first element from the array and returns it.

Example: In this example, we will be using the array pop() and shift() methods to get the last and first element of the array.

Javascript




// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable
    let f = s.shift(0);
 
    // Storing the last item
    let l = s.pop();
 
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log(" Last element is " + l);
}
 
Gfg(); // Calling the function


Output

first element is 3
 Last element is 5

Approach 3: Using Array.slice() Method

Array.slice() method returns the part of the array by slicing it with provided index and length. 

Example: In this example, we will be using the slice() method to get the first and the last element of the array.

Javascript




// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable
    let f = s.slice(0, 1);
 
    // Storing the last item
    let l = s.slice(-1);
 
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function


Output

first element is 3
Last element is 5

Approach 4: Using Array.filter() Method

Array.filter() method returns a filtered array that removes the element which returns false for the callback function. 

Example: In this example, we will be using the filter() method to get the first and the last element of the array.

Javascript




// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item and second in a variable
    let [f, l] = s.filter((item, i) =>
                (i == 0) || (i == s.length - 1));
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log(" Last element is " + l);
}
Gfg(); // Calling the function


Output

first element is 3
 Last element is 5

Approach 5: Using Spread Operator

The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array.

Example:

Javascript




const array = [1, 2, 3, 4, 5];
 
const [firstItem, ...rest] = array;
const lastItem = rest.pop();
 
console.log('First item:', firstItem);
console.log('Last item:', lastItem);


Output

First item: 1
Last item: 5

Approach 6: Using Array.at() Method

The Array.at() method in JavaScript allows to access elements of an array by their index. To get the first and last elements of an array using the at() method, pass the desired indices to the method. The first element has an index of 0. Array last element can be accessed by using the array’s length-1 as the index.

Example: In this example, we are using array.at() method.

Javascript




// Get the array first and last elements using Array.at() method
function gfg() {
  let s = ["Geeks", "for", "geeks", "computer", "science"];
 
  // Get the first element (index 0)
  console.log(s.at(0))
 
  // Get the last element (index: length - 1)
  console.log(s.at(s.length - 1))
}
 
// Call the function
gfg();


Output

Geeks
science


Last Updated : 01 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads