Javascript: Get first element of an array (6 ways)

While working in javascript, often there is a requirement to get the first element from an array. This article will discuss accessing the first element of a javascript array.

Table of Contents:-

• Get first element of an array using [ ]
• Get first element of an array using shift()
• Get first element of an array using shift() and filter()
• Get first element of an array using find()
• Get first element of an array using splice()
• Get first element of an array using spice()

Get first element of an array using [ ]

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
let firstValue = stringArray[0];
console.log("First element of array is: " + firstValue );

Output:-

First element of array is: Javascript

Explanation:-

Here, the first element of an array is retrieved by accessing the element at the 0^th index within the [ ].

Get first element of an array shift()

Javascript’s shift() method removes the first element of the array and returns it.

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
let firstValue = stringArray.shift() ; //modifies the original array
console.log("First element of array is: " + firstValue );

Output:-

First element of array is: Javascript

Explanation:-

• The above code uses the shift() method to get the first element of an array.
• Note that the shift() method will modify the original array. That is after implementing shift() the elements left in stringArray will be [ “Is”, “Popular”,”Language” ]

Get first element of an array shift() and filter()

We can use the filter() function to preserve the original array and then apply the shift() method. 

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
var firstValue = stringArray.filter(element => typeof element!==undefined).shift();
console.log("First element of array is: " + firstValue );

Output:-

First element of array is: Javascript

Explanation:-

• The above code uses the filter() method to get the first element of an array. 
• Within the filter() method, the code will check if the element is undefined or not. Only if the element is not undefined will the shift() method be applied to it to retrieve the first element.
• Note that the filter() method for this case is inefficient as it will loop through all elements and create another array.

Get first element of an array find()

Javascript’s find(<callBackFunction>) method will return the first element of the array, which satisfies the functionality provided in the brackets.

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
let firstItem = stringArray.find(element=>element!==undefined);
console.log("First element of array is: " + firstItem );

Output:-

First element of array is: Javascript

Explanation:-

• The above code uses the find() method to get the first element of an array.
• Within the brackets, the functionality is to identify if the element is other than undefined. As soon as the first element, which is undefined, is found, it gets returned.

Get first element of an array splice()

Javascript’s splice(start, deleteCount, item1, item2….) method is used to modify the elements of an array. The splice() method can remove, replace or/and add new elements to the array.

• start: is the index from where the change in the array needs to be done.
• deleteCount: is the number of elements to be removed from the array. It is an optional value.
• item1,item2,… : are the elements that need to be added. It is optional if they are not present it means nothing has to be added to the array.

Learn more about splice()

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
var firstValue = stringArray.splice(0,1);
console.log("First element of array is: " + firstValue );

Output:-

First element of array is: Javascript

Explanation:-

In the above code stringArray.splice(0, 1) is used, which will change the stringArray from 0^th index, delete 1 element and return the same.

Get first element of an array slice()

Javascript’s slice(startIndex, endIndex) method returns a shallow copy of a portion of the calling array into a new array object based on indexes passed as arguments. The index is zero-based.

• startIndex: is the index to start the extraction.The extraction includes the element at startIndex.
• endIndex: is the index to end the extraction. The extraction excluded the element at endIndex.This argument is optional; therefore, if not present, it means to extract array elements till the end of the array.

Example:-

Get the first element of the array [“Javascript”, “Is”, “Popular”,”Language”]

Code:-

let stringArray = ["Javascript", "Is", "Popular","Language"];
var firstValue = stringArray.slice(0,1);
console.log("First element of array is: " + firstValue );

Output:-

First element of array is: Javascript

Explanation:-

Here, stringArray.slice(0, 1) is used to extract a sub-string from the 0^th index element(included) till 1^st index(excluded) element of the array.

Read More:

• Javascript: Get element of array by index
• Javascript: remove a specific element from an array
• Javascript: Add element to beginning- Array
• Javascript: Remove element from beginning of array

I hope this article helped you to get the first element from an array in javascript. Good Luck !!!