Javascript get first item

Top 10 ways to find 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

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 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.

select an element using the array index without mutating the original array

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 below syntax.

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 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.

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 can be simplified 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 returns an array in reverse order.

Next, retrieve the last element using pop() method

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

Select the first element using Third-party JavaScript

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.

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

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

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

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.

How to get the first element using 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 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.

Источник

Array.prototype.find()

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

• If you need the index of the found element in the array, use findIndex() .
• If you need to find the index of a value, use indexOf() . (It’s similar to findIndex() , but checks each element for equality with the value instead of using a testing function.)
• If you need to find if a value exists in an array, use includes() . Again, it checks each element for equality with the value instead of using a testing function.
• If you need to find if any element satisfies the provided testing function, use some() .

Try it

Syntax

find(callbackFn) find(callbackFn, thisArg) 

Parameters

A function to execute for each element in the array. It should return a truthy value to indicate a matching element has been found, and a falsy value otherwise. The function is called with the following arguments:

The current element being processed in the array.

The index of the current element being processed in the array.

The array find() was called upon.

A value to use as this when executing callbackFn . See iterative methods.

Return value

The first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

Description

The find() method is an iterative method. It calls a provided callbackFn function once for each element in an array in ascending-index order, until callbackFn returns a truthy value. find() then returns that element and stops iterating through the array. If callbackFn never returns a truthy value, find() returns undefined .

callbackFn is invoked for every index of the array, not just those with assigned values. Empty slots in sparse arrays behave the same as undefined .

find() does not mutate the array on which it is called, but the function provided as callbackFn can. Note, however, that the length of the array is saved before the first invocation of callbackFn . Therefore:

• callbackFn will not visit any elements added beyond the array’s initial length when the call to find() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn , its value passed to the callbackFn will be the value at the time that element gets visited. Deleted elements are visited as if they were undefined .

Warning: Concurrent modifications of the kind described above frequently lead to hard-to-understand code and are generally to be avoided (except in special cases).

The find() method is generic. It only expects the this value to have a length property and integer-keyed properties.

Examples

Find an object in an array by one of its properties

const inventory = [  name: "apples", quantity: 2 >,  name: "bananas", quantity: 0 >,  name: "cherries", quantity: 5 >, ]; function isCherries(fruit)  return fruit.name === "cherries"; > console.log(inventory.find(isCherries)); // 

Using arrow function and destructuring

const inventory = [  name: "apples", quantity: 2 >,  name: "bananas", quantity: 0 >,  name: "cherries", quantity: 5 >, ]; const result = inventory.find(( name >) => name === "cherries"); console.log(result); // 

Find a prime number in an array

The following example finds an element in the array that is a prime number (or returns undefined if there is no prime number):

function isPrime(element, index, array)  let start = 2; while (start  Math.sqrt(element))  if (element % start++  1)  return false; > > return element > 1; > console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found console.log([4, 5, 8, 12].find(isPrime)); // 5 

Using find() on sparse arrays

Empty slots in sparse arrays are visited, and are treated the same as undefined .

// Declare array with no elements at indexes 2, 3, and 4 const array = [0, 1, , , , 5, 6]; // Shows all indexes, not just those with assigned values array.find((value, index) =>  console.log("Visited index", index, "with value", value); >); // Visited index 0 with value 0 // Visited index 1 with value 1 // Visited index 2 with value undefined // Visited index 3 with value undefined // Visited index 4 with value undefined // Visited index 5 with value 5 // Visited index 6 with value 6 // Shows all indexes, including deleted array.find((value, index) =>  // Delete element 5 on first iteration if (index === 0)  console.log("Deleting array[5] with value", array[5]); delete array[5]; > // Element 5 is still visited even though deleted console.log("Visited index", index, "with value", value); >); // Deleting array[5] with value 5 // Visited index 0 with value 0 // Visited index 1 with value 1 // Visited index 2 with value undefined // Visited index 3 with value undefined // Visited index 4 with value undefined // Visited index 5 with value undefined // Visited index 6 with value 6 

Calling find() on non-array objects

The find() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length .

const arrayLike =  length: 3, "-1": 0.1, // ignored by find() since -1 < 00: 2, 1: 7.3, 2: 4, >; console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x))); // 7.3 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Polyfill of Array.prototype.find in core-js
• Indexed collections
• Array
• Array.prototype.findIndex()
• Array.prototype.findLast()
• Array.prototype.findLastIndex()
• Array.prototype.includes()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• TypedArray.prototype.find()

Found a content problem with this page?

This page was last modified on Jun 27, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник