Javascript: Alternative to Array.prototype.find()?

Question

I am having an issue where .find() is not working on my Chrome browser when I use it in AngularJS. This was my original question: AngularJS: Array.prototype.find() does not work in Chrome

It's failing on this line:

      console.log($scope.products_colors); // prints `[Object]0: Objectlength: 1__proto__: Array[0]concat: function concat() { [native code] }constructor: function Array() { [native code] }every: function every() { [native code] }filter: function filter() { [native code] }forEach: function forEach() { [native code] }indexOf: function indexOf() { [native code] }join: function join() { [native code] }lastIndexOf: function lastIndexOf() { [native code] }length: 0map: function map() { [native code] }pop: function pop() { [native code] }push: function push() { [native code] }reduce: function reduce() { [native code] }reduceRight: function reduceRight() { [native code] }reverse: function reverse() { [native code] }shift: function shift() { [native code] }slice: function slice() { [native code] }some: function some() { [native code] }sort: function sort() { [native code] }splice: function splice() { [native code] }toLocaleString: function toLocaleString() { [native code] }toString: function toString() { [native code] }unshift: function unshift() { [native code] }__proto__: Object mens_detail_controller.js?body=1:24`

      $scope.selected_color = $scope.products_colors.find(function(el) {
        return el.id == 91;
      });

I know it's failing on .find, because the code works when I replace it with something else.

Is there an alternative to looking through an array and grabbing the first element with a certain condition in javascript?

Why not patch it in? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — cookie monster
– cookie monster, Commented Sep 22, 2014 at 19:19
Filter seems to work fine. Better than patching it in. Weird since docs say .find is compatible with chrome developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — bigpotato
– bigpotato, Commented Sep 22, 2014 at 19:20
Why is .filter() better than patching it? It's potentially less efficient since it has to search the entire Array, whereas .find() stops as soon as it finds a match. — cookie monster
– cookie monster, Commented Sep 22, 2014 at 19:24
...the MDN docs are wrong. Chrome may have it under an experimental flag, but they currently don't as a release since ECMAScript 6 isn't finalized yet. — cookie monster
– cookie monster, Commented Sep 22, 2014 at 19:25

3 revs, 2 users 75% · Accepted Answer · 2019-03-02 12:40:35Z

18

As pointed out by elclanrs in the comments, xs.filter(f)[0] workes as an alternative to xs.find(f).

edited Mar 2, 2019 at 12:40

community wiki

3 revs, 2 users 75%
Matty

Sign up to request clarification or add additional context in comments.

4 Comments

Apoorv Over a year ago

what is xs sd and f ?

Matty Over a year ago

xs is the name of the array, f is the name of the function used to compare the elements of that array.

Apoorv Over a year ago

so basically we need to write down own logic to filter.

Marc Over a year ago

I know this is old but @Apoorv: You already hat to write down own logic to use "find", since the function requires a function as its parameter. But you can easily replace find with filter, since both functions have the same method signature. Filter returns an array, so simply access the first element. Find automatically returns the first found element.

Oriol · Accepted Answer · 2014-09-22 19:19:59Z

11

Here is MDN's polyfill:

if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return value;
      }
    }
    return undefined;
  };
}

answered Sep 22, 2014 at 19:19

Oriol

291k71 gold badges459 silver badges535 bronze badges

5 Comments

cookie monster Over a year ago

I see that the MDN polyfill is broken. It's supposed to have a i in list condition before it invokes the callback.

cookie monster Over a year ago

...or maybe not. The current draft doesn't have the HasProperty check that the other iterator methods do. That's weird. The current FF implementation does do the check though.

cookie monster Over a year ago

...though the description states "... find calls predicate once for each element present in the array...", so the check is implied. It's just not present in the algorithm.

Oriol Over a year ago

@cookiemonster I'm not very used to ES6 yet so I'm not sure what you are talking about, but feel free to edit my answer (and MDN) if something is broken.

cookie monster Over a year ago

Your answer is fine since it reflects the current state of MDN, which reflects the current state of the spec (sort of), which is not finalized. It's just odd that they left the HasProperty check out of the algorithm. All the others, like .forEach(), .filter(), etc do the test, but .find() and .findIndex() don't show that step in the algorithm even though it's implied in the description. I'm guessing it'll be corrected eventually, at which point it'll be like: if (i in this && predicate.call(thisArg, value, i, list)) {...

Collectives™ on Stack Overflow

Javascript: Alternative to Array.prototype.find()?

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related