Arrays are used to store multiple items in a single object.
You can get the first element of an array in JavaScript using the numarray[0] statement.
This tutorial teaches you the different methods to get the first element of an array in JavaScript and when it is appropriate to use them.
Table of Contents
Get The First Element Of An Array Using Array Index (Simple Method)
You can use the array index 0
to get the first element of the array.
- Returns the first item if elements exist in the array.
- Returns
undefined
if the array is empty.
Use this method when you’re sure that the array will not be empty.
Code
const numarray = [1, 2, 3, 4, 5];
console.log(numarray[0]);
Output
1
Get The First Element Of An Array Using ES6 Destructuring method
The destructuring assignment allows you to unpack items from an array into distinct variables.
When you assign an array to a list of variables, the items from the array will be assigned to the variables.
- Assign the array to a single variable to get the first element from the array.
It also supports assigning a default value when the array is empty.
Use this method when you want to use a default value instead of undefined
when the array is empty. (Explained in the second code snippet of this section).
const numarray = [1, 2, 3, 4, 5];
const [firstElement] = numarray;
console.log(firstElement);
Output
1
Code
The following method demonstrates how to use the default value with the deconstructing assignment.
const numarray = [];
const [firstElement = 8] = numarray;
console.log(firstElement);
Output
The array is empty. Hence, the value 8
is assigned.
8
Get The First Element Of An Array Using Shift() method
The shift()
removes the first element from the array and returns it. The original array is mutated, and the array’s length is changed while using shift()
.
Use this method when you want to get the first element from the array and remove it.
Code
const numArray = [1, 2, 3, 4, 5];
const firstElement = numArray.shift();
console.log(firstElement);
console.log(numArray);
Output
The first element is retrieved from the array, and it is also removed from the array.
1
[2, 3, 4, 5]
Find the First Truthy Element using Find()
Sometimes the array might contain Falsy
values at the beginning of the array. In that case, you might need to get the first truthy element from the array.
To find the first truthy element, pass the Boolean
parameter to the find() method.
Use this method when your array might contain some falsy values at the beginning, and you want to get the first Truthy value.
Code
const numArray = [null, 1, 2, 3, 4, 5];
const firstElement = numArray.find(Boolean)
console.log(firstElement);
Output
1
Get the First Element of the Array If It Exists
undefined
will be returned when you try to get the first element from an empty array.
To avoid this, you can check if the array.length
is not 0
before getting the first value from the array.
Code
const numArray = [1, 2, 3, 4, 5];
if (numArray.length) {
console.log(numArray[0]);
}
Output
1