Top 10 ways to find the first element from an array in javascript

Top 10 ways to find the first element from an array in javascript

multiple ways to get the first element from an array.

  • Array index without mutating an original array, to retrieve the first element. array[0]
  • ES6 find method using lambda expression. array.find(element => element);
  • ES6 Array slice method that returns new array array.slice(0,0) returns [firstlement]
  • ES6 Array destructing by assigning to a single variable. let [variable]=array;, the variable holds the first element.
  • Reverse an array using the reverse method, call pop to get the first element of an original array
  • UnderscoreJs, Lodash, and Ramda libraries first method
  • shift method, returns the first element and mutates an original array.
  • Object values method, Object.values(array)[0] get first element

Let’s declare an array.

let array = [12, 1, 8, 9];

Array index always starts with index=0, and array.length returns the length of an array. array[0] returns first element, array[array.length-1] indicates last element of an array.

The Array.length property returns the length of an array.

Following are Multiple ways, we can retrieve the first element of an array in JavaScript. For the given input array above, Output is the first element from an array is 9.

Use the array index with square bracket syntax

As array.length returns the number of elements in it. The array always starts with zero indexes, So the first element can be retrieved using the bracket syntax.

console.log(array[0]);

It works on all browsers in and simple way.

use find method with lamba functions

The Array.find() method returns the first single element for the given function,

Here lambda functions in es6 are used for call-back functions.

let firstElemet = array.find((element) => element);
console.log(firstElemet); // 12 is returned

How can you get the first index of an array using the find method?

The findIndex method works similarly to the find method but returns the index.

let firstIndex = array.findIndex((item) => item);
console.log(firstIndex); // 0 is returned

This approach works if the array contains all defined values.

How do you select the first element without mutating the original array?

Use ES6 array slice method

array.slice is a method in ES6 javascript. It returns a shallow copy of an array and creates a new array from a start index to an end index.

let array = [12, 1, 8, 9];
console.log(array.length); //4
console.log(array.slice(0, 1)); // (1) [12]
console.log(array.slice(0, 1)[0]); // 12
console.log(array.length); //4

with destructing assignment operators, The same can be simplified as follows

[firstElement] = array.slice(0, 1);
console.log(firstElement); //12

Use Array destructing with examples

latest ES6 provides feature destructing assignment operators, with this, the First element can be easily retrieved.

let [firstElememt] = array;
console.log(firstElememt);

Use a reverse method

It is also a simple approach by reversing an original array using the reverse() method. It returns an array in reverse order.

Next, retrieve the last element using pop() method

var reverseArray = array.reverse().pop;
console.log(reverseArray); // 12

use thirdparty utility methods

JavaScript has different third-party libraries like UnderscoreJs, Lodash, and Ramda. These utility libraries provide a lot of methods that can be reused.

The first function returns the first element of an array.

_.first(array);

Lodash provides the head method which also returns the first element from an array.

_.head(array);

It is useful if your project is already using those libraries.

It is a simple and easy way to find the first element.

Use shift with original array mutation

The shift method of an array returns the first element and the original array is modified.

Please see an example after calling shift(), the Original array removes the first element.

let array = [12, 1, 8, 9];
console.log(array); // [12,1,8,9]
let firstElement = array.shift();
console.log(firstElement); // 12
console.log(array); // [1,8,9]

It is useful if you want to mutate the original array.

Use the Object values function

The object values method takes object enumerable properties and returns an array.

It also takes an array and returns the same array

console.log(Object.values(array)[0]);

Conclusion

Multiple approaches are specified here, To sum up, you can take whichever approach fits your application.