can someone explain this Array.prototype.find() polyfill?

Question

on this MDN page [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find] there is this polyfill:

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: 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++) {
        if (i in list) {
          value = list[i];
          if (predicate.call(thisArg, value, i, list)) {
            return value;
          }
        }
      }
      return undefined;
    }
  });
}

my question is what are these lines for:

var list = Object(this);
var length = list.length >>> 0;

since this is definitely an array (we are augmenting Array.prototype) so why make sure length is numerical, and why is Object() used?

the trouble with this polyfill is that it requires the Object.defineProperty method, which is not available in older browsers that do not implement find. — kennebec, Jun 12 '14 at 12:43
As answer indicated; `this` is not guaranteed to be an array, you can see in the following answer what `this` can be (if you need more info than T.J. provided): http://stackoverflow.com/a/16063711/1641941 (under `the this variable`) — HMR, Jun 12 '14 at 13:35

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

The fundamental answer is that the polyfill is just faithfully implementing Step 1 and Step 4 of the algorithm in the ES6 draft spec (§22.1.3.8 as of the May 22 draft).

1. Let O be the result of calling ToObject passing the this value as the argument.

...

4. Let len be ToLength(lenValue).

(Where ToLength is basically a conversion to a number.)

And as it's possible to use non-object values for this nowadays (via Function#call and Function#apply, or by just calling the function directly in strict mode), Step 1 makes sense.

since this is definitely an array (we are augmenting Array.prototype) so why make sure length is numerical, and why is Object() used?

But we don't know that this is an array. See this note from the current ES6 draft spec:

The find function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the find function can be applied successfully to an exotic object that is not an Array is implementation-dependent.

You'll find that note on nearly all of the predefined functions assigned to prototypes.

E.g., you can use them for other things, either by assigning them to objects or other prototypes directly:

MyNiftyThing.prototype.find = Array.prototype.find;

...or via Function#call or Function#apply.

So suppose I wanted to use Array#find on an arguments object. arguments is, of course, array-like but not an array. So I might do this:

function foo() {
    var firstObject = Array.prototype.find.call(arguments, function(val) {
        return typeof val === "object";
    });
    // ...
}

A more famous example (not involving find) is using slice to convert array-like objects into arrays:

function foo() {
    // Turn the `arguments` pseudo-array into a real array
    var args = Array.prototype.slice.call(arguments, 0);
}

can someone explain this Array.prototype.find() polyfill?

1 Answers1