How To Get The First Element Of An Array In JavaScript -With Examples

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.

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

Additional Resources

Leave a Comment