It is a short tutorial on multiple ways to get the first element from an array.
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. that means array[0] returns first element, array[array.length-1] returns last element of an array.
Array.length
property returns length of an array.
Following are Multiple ways to 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.
How to convert UUID to String in vanilla javascript?
var uuidData = Uuid.fromString('8336b1c6-59e7-4ac7-a0f6-0a80a38ef6a6');
var uuidString = uuidData.toString();
It works on all browsers in and simple way.
find a method to get the first element of an array with es6 lambda expressions
Array.find method returns the first single element for the given function,
Here lambda functions in es6 are for the call-back function.
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?
findIndex
method works similarly to the find
method.
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?
Ecmascript (ES6) array slice method to get the first element of an array
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 does simplify as follows.
[firstElement] = array.slice(0,1);
console.log(firstElement); //12
Array destructing with ES6 example
Latest ES6 provides feature destructing assignment operators, with this, the First element can be easily retrieved.
let [firstElememt]=array;
console.log(firstElememt);
Using a reverse method to get the first element
It is also a simple approach by reversing an original array using the reverse()
method.
It will return an array in reverse order.
Next, retrieve last element using pop()
method
var reverseArray = array.reverse().pop;
console.log(reverseArray[0]) // 12
Select the first element using Third-party JavaScript
JavaScript has different third-party libraries like UnderscoreJs
, Lodash
and Ramda
. These are utility libraries that provide a lot of methods to be reused.
The first
function returns the first element of an array.
_.last(array);
Lodash
provides the head
method, which returns the first element from an array.
_.head(array);
It will be useful if your project is already using that library.
It is a simple and easy way to find the first element.
select the first element with mutation of an original array using the shift method
shift
method of an array returns the first element. However, 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.
How to get first element using Object values function
Object values method takes object enumerable properties and returns an array
It also takes an array and returns the same an array
console.log(Object.values(array)[0]);
Conclusion
Multiple approaches are specified here, To sum up, you can take whichever approach fits your application.