How to get the first element of an array?

like this

alert(ary[0])

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.

Anther commonly used method is shift() but you should avoid using this for the purpose of accessing the first element.

Well, this method modifies the original array (removes the first item and returns it) but re-indexes what is left in the array to make it start from 0 (shifts everything down). Therefore the length of an array is reduced by one. There are good cases where you may need this, for example, to take the first customer waiting in the queue, but it is very inefficient to use this for the purpose of accessing the first element.

In addition, this requires a perfect array with [0] index pointer intact, exactly as using [0];

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.

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.

Another one I have seen in some projects is splice() to get the first item in an array and then get it by index:

var firstItem = yourArray.splice(0, 1)[0];

I am not sure why you would do that. This method won't solve the problem with holes in array (sparse array). It is costly as it will re-index the array, and it returns an array and you have to access again to get the value. For example, if you delete first couple of elements and splice will return undefined instead of the first defined value from array.

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

**(I see some people suggest using loops to get the first element, but I would recommend against this method. Obviously, you can use any loop to get a value from array but why would you do that? Readability, optimization, unnecessary block of code etc. When use native functions, browser can better optimize your code. And it may not even work with some loops which don't guarantee the order in iteration.

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, but why?**

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-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Also,

Source, courtesy of bobince