Get first element in array

Get first element in array

How do you get the first element from an array:
var ary = [‘first’, ‘second’, ‘third’, ‘fourth’, ‘fifth’];

I tried this:
alert($(ary).first());

But it would return [object Object].
So I need to get the first element from the array which should be the element first.

Solutions/Answers:

Solution 1:

like this

alert(ary[0])

Solution 2:

Why are you jQuery-ifying a vanilla JavaScript array? Use standard JavaScript!

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
alert(ary[0]);

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

Also,
needs more jQuery

Source, courtesy of bobince

Solution 3:

Some of ways below for different circumstances.

In most normal cases, the simplest way to access the first element is by

yourArray[0]

but this requires you to check if [0] actually exists.

There are real world cases where you don’t care about the original array, and don’t want to check if index exists, you want just to get the first element or undefined inline.

In this case, you can use shift() method to get the first element, but be cautious that this method modifies the original array (removes the first item and returns it). Therefore the length of an array is reduced by one.
This method can be used in inline cases where you just need to get the first element, but you dont care about the original array.

yourArray.shift()

The important thing to know is that the two above are only an option if your array starts with a [0] index.

There are cases where the first element has been deleted, example with, delete yourArray[0] leaving your array with “holes”. Now the element at [0] is simply undefined, but you want to get the first “existing” element. I have seen many real world cases of this.

Related:  I get a status 200 when connecting to the websocket, but it is an error?

So, assuming we have no knowledge of the array and the first key (or we know there are holes), we can still get the first element.

You can use find() to get the first element.

The advantage of find() is its efficiency as it exits the loop when the first value satisfying the condition is reached (more about this below).
(You can customize the condition to exclude null or other empty values too)

var firstItem = yourArray.find(x=>x!==undefined);

I’d also like to include filter() here as an option to first “fix” the array in the copy and then get the first element while keeping the the original array intact (unmodified).

Another reason to include filter() here is that it existed before find() and many programmers have already been using it (it is ES5 against find() being ES6).

var firstItem = yourArray.filter(x => typeof x!==undefined).shift();

Warning that filter() is not really an efficient way (filter() runs through all elements) and creates another array. It is fine to use on small arrays as performance impact would be marginal, closer to using forEach, for example.

Related:  How to run a jsfiddle result with url?

(I see some people recommend using for…in loop to get the first element, but I would recommend against this method because for…in should not be used to iterate over an Array where the index order is important because it doesn’t guarantee the order although you can argue browsers mostly respect the order.By the way, forEach doesn’t solve the issue as many suggest because you cant break it and it will run through all elements. You would be better off using a simple for loop and by checking key/value

Both find() and filter() guarantee the order of elements, so are safe to use as above.

Solution 4:

Element of index 0 may not exist if the first element has been deleted:

let a = ['a', 'b', 'c'];
delete a[0];

for (let i in a) {
  console.log(i + ' ' + a[i]);
}

Better way to get the first element without jQuery:

function first(p) {
  for (let i in p) return p[i];
}

console.log( first(['a', 'b', 'c']) );

Solution 5:

If you want to preserve the readibility you could always add a first function to the Array.protoype:

Array.prototype.first = function () {
    return this[0];
};

A then you could easily retrieve the first element:

[1, 2, 3].first();
> 1

Solution 6:

Using ES6 destructuring

let [first] = [1,2,3];

Which is the same as

let first = [1,2,3][0];