Skip to content
Advertisements

Array findIndex()

FindIndex () returns the order of the first value that provides the condition in the array. In this respect, it is very similar to the find () method. The only difference between them: one turns the order and the other returns the value. Returns -1 if no value is entered.

        const years = [1990, 2000, 2007, 3214];

        function future(element) {
            return element > 2019;
        }

        console.log(years.findIndex(future))

output:

3

So what’s the 3rd element?

        var x = years.findIndex(future)
        console.log(years[x])

output:

3214 // True – future

Syntax:

arr.findIndex(callback(element[, index[, array]])[, thisArg])

callback: It takes 3 parameters.
        -element: The current element being processed in the array.
        -index: The index of the current element being processed in the array.
        -array: The array findIndex was called upon.
thisArgOptional: Object to use as this when executing callback.

Note: Returns -1 if no value is entered.


Called with 3 arguments:
-The value of the element
-The index of the element
-The Array object being traversed


Examples

Example-1 (age control)

        const ages = [12,14,18];

        function ageControl(age) {
            return age >= 18;
        }

        var x = ages.findIndex(ageControl);
        console.log(ages[x])

output:

18


Example-2 (Note calculation)

        let notes = [
            {
                name: "Math",
                note: 90
            },
            {
                name: "Physic",
                note: 50
            },
            {
                name: "Chemistry",
                note: 40
            }
        ]

        var noteControl = notes.findIndex(x => x.note > 50);
        console.log(notes[noteControl]);

output:

{name: “Math”, note: 90}

note: we could do this by a shorter path using the find () method.

        let notes = [
            {
                name: "Math",
                note: 90
            },
            {
                name: "Physic",
                note: 50
            },
            {
                name: "Chemistry",
                note: 40
            }
        ]

        console.log(notes.find(x => x.note > 50));

output:

{name: “Math”, note: 90}


Example-3 (number control)

        function numberControl( element, index, array ) {
            return ( element % 5 == 0);
        }

        console.log([ 2, 21, 8, 17, 12 ].findIndex( numberControl ));
        console.log([ 2, 21, 8, 15, 12 ].findIndex( numberControl ));
        console.log([ undefined, 15, 22 ].findIndex( numberControl ));
        console.log([ , , , , 15 ].findIndex( numberControl ))

output:

-1
3
1
4


Example-4

        let cars = ["bmw", "audi", "toyota"];
        let index = cars.findIndex( x => x === "audi" )

        console.log(index);
        console.log(cars[index])

output:

1
audi


Polyfill

if (!Array.prototype.findIndex) {
  Object.defineProperty(Array.prototype, 'findIndex', {
    value: function(predicate) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      var thisArg = arguments[1];

      while (k < len) {
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return k;
        }
        k++;
      }
      return -1;
    },
    configurable: true,
    writable: true
  });
}

Browser Support

Chrome45
EdgeYes
Firefox25
Internet ExplorerNo
Opera32
Safari8
Android webviewYes
Chrome for AndroidYes
Edge mobileYes
Firefox for Android4
Opera AndroidYes
iOS Safari8
Advertisements

2 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: