How to get the first element of an array?

How do you get the first element from an array like this:

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

29 thoughts on “How to get the first element of an array?”

  1. 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
    
    Reply
  2. When there are multiple matches, JQuery’s .first() is used for fetching the first DOM element that matched the css selector given to jquery.

    You don’t need jQuery to manipulate javascript arrays.

    Reply
  3. 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']) );
    Reply
  4. Declare a prototype to get first array element as:

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

    Then use it as:

    var array = [0, 1, 2, 3];
    var first = array.first();
    var _first = [0, 1, 2, 3].first();
    

    Or simply (:

    first = array[0];
    
    Reply
  5. @NicoLwk You should remove elements with splice, that will shift your array back. So:

    var a=['a','b','c'];
    a.splice(0,1);
    for(var i in a){console.log(i+' '+a[i]);}
    
    Reply
  6. Find the first element in an array using a filter:

    In typescript:

    function first<T>(arr: T[], filter: (v: T) => boolean): T {
        let result: T;
        return arr.some(v => { result = v; return filter(v); }) ? result : undefined;
    }
    

    In plain javascript:

    function first(arr, filter) {
        var result;
        return arr.some(function (v) { result = v; return filter(v); }) ? result : undefined;
    }
    

    And similarly, indexOf:

    In typescript:

    function indexOf<T>(arr: T[], filter: (v: T) => boolean): number {
        let result: number;
        return arr.some((v, i) => { result = i; return filter(v); }) ? result : undefined;
    }
    

    In plain javascript:

    function indexOf(arr, filter) {
        var result;
        return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
    }
    
    Reply
  7. Use this to split character in javascript.

    var str = "boy, girl, dog, cat";
    var arr = str.split(",");
    var fst = arr.splice(0,1).join("");
    var rest = arr.join(",");
    
    Reply
  8. If you’re chaining a view functions to the array e.g.

    array.map(i => i+1).filter(i => i > 3)

    And want the first element after these functions you can simply add a .shift() it doesn’t modify the original array, its a nicer way then array.map(i => i+1).filter(=> i > 3)[0]

    If you want the first element of an array without modifying the original you can use array[0] or array.map(n=>n).shift() (without the map you will modify the original. In this case btw i would suggest the ..[0] version.

    Reply
  9. Why not account for times your array might be empty?

    var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
    first = (array) => array.length ? array[0] : 'no items';
    first(ary)
    // output: first
    
    var ary = [];
    first(ary)
    // output: no items
    
    Reply
  10. If your array is not guaranteed to be populated from index zero, you can use Array.prototype.find():

    var elements = []
    elements[1] = 'foo'
    elements[2] = 'bar'
    
    var first = function(element) { return !!element }    
    var gotcha = elements.find(first)
    
    console.log(a[0]) // undefined
    console.log(gotcha) // 'foo'
    
    Reply
  11. array.find(e => !!e);  // return the first element 
    

    since “find” return the first element that matches the filter && !!e match any element.

    Note This works only when the first element is not a “Falsy” : null, false, NaN, "", 0, undefined

    Reply
  12. I know that people which come from other languages to JavaScript, looking for something like head() or first() to get the first element of an array, but how you can do that?

    Imagine you have the array below:

    const arr = [1, 2, 3, 4, 5];
    

    In JavaScript, you can simply do:

    const first = arr[0];
    

    or a neater, newer way is:

    const [first] = arr;
    

    But you can also simply write a function like…

    function first(arr) {
       if(!Array.isArray(arr)) return;
       return arr[0];
    }
    

    If using underscore, there are list of functions doing the same thing you looking for:

    _.first 
    
    _.head
    
    _.take
    
    Reply
  13. You can do it by lodash _.head so easily.

    var arr = ['first', 'second', 'third', 'fourth', 'fifth'];
    console.log(_.head(arr));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
    Reply
  14. You can use the combination of reverse then pop. The idea is to reverse the array then pop which will get you the last item in that array.

    Be careful as this will modify the original array.

    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var first = fruits.reverse().pop();
      
    console.log('First element -->', first);
    console.log('Original array -->', fruits);
    Reply
  15. @thomax ‘s answer is pretty good, but will fail if the first element in the array is false or false-y (0, empty string, etc.). Better to just return true for anything other than undefined:

    const arr = [];
    arr[1] = '';
    arr[2] = 'foo';
    
    const first = arr.find((v) => { return (typeof v !== 'undefined'); });
    console.log(first); // ''
    
    Reply
  16. Method that works with arrays, and it works with objects too (beware, objects don’t have a guaranteed order!).

    I prefer this method the most, because original array is not modified.

    // In case of array
    var arr = [];
    arr[3] = 'first';
    arr[7] = 'last';
    var firstElement;
    for(var i in arr){
        firstElement = arr[i];
        break;
    }
    console.log(firstElement);  // "first"
    
    // In case of object
    var obj = {
        first: 'first',
        last: 'last',
    };
    
    var firstElement;
    
    for(var i in obj){
        firstElement = obj[i];
        break;
    }
    
    console.log(firstElement) // First;
    
    Reply
  17. Just use ary.slice(0,1).pop();

    In

    var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
    
    console.log("1º "+ary.slice(0,1).pop());
    console.log("2º "+ary.slice(0,2).pop());
    console.log("3º "+ary.slice(0,3).pop());
    console.log("4º "+ary.slice(0,4).pop());
    console.log("5º "+ary.slice(0,5).pop());
    console.log("Last "+ary.slice(-1).pop());

    array.slice(START,END).pop();

    Reply
  18. var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
    
    console.log(Object.keys(ary)[0]);
    

    Make any Object array (req), then simply do Object.keys(req)[0] to pick the first key in the Object array.

    Reply
  19. ES6 Spread operator + .shift() solution

    Using myArray.shift() you can get the 1st element of the array, but .shift() will modify the original array, so to avoid this, first you can create a copy of the array with [...myArray] and then apply the .shift() to this copy:

    var myArray = ['first', 'second', 'third', 'fourth', 'fifth'];
    
    var first = [...myArray].shift();        
    
    console.log(first);
    Reply
  20. Using ES6.

    let arr = [22,1,4,55,7,8,9,3,2,4];
    
    let {0 : first ,[arr.length - 1] : last} = arr;
    console.log(first, last);
    

    or

    let {0 : first ,length : l, [l - 1] : last} = [22,1,4,55,7,8,9,3,2,4];
    console.log(first, last);
    
    Reply

Leave a Comment