Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I create an object for which Array.isArray() returns true without using the Array constructor or array literal?

I can easily make a plain object look like an array by setting its prototype to Array.prototype:

const obj = {};
Reflect.setPrototypeOf(obj, Array.prototype);

(I'm aware that there are also some problems with the magic length property and sparse arrays, but that's not the point of this question.)

I want to make Array.isArray(obj) return true (of course without modifing the Array.isArray() method). The MDN polyfill for Array.isArray() is as follows:

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

By using the Symbol.toStringTag property I can make Object.prototype.toString.call(obj) return '[object Array]':

obj[Symbol.toStringTag] = 'Array';
console.log(Object.prototype.toString.call(obj) === '[object Array]'); // true

Now the polyfilled Array.isArray() returns true for obj (please ignore the fact that none of the browsers that doesn't support Array.isArray() does support Symbol.toStringTag). However, the native Array.isArray() function still returns false for obj. I looked at the ECMAScript 2017 specification and it says that Array.isArray() uses the abstract operation IsArray, which returns true if the argument is an Array exotic object. If the argument is a Proxy, it calls IsArray directly on the target object, so it seems that using a Proxy wouldn't help here.

Is there any way to make Array.isArray(obj) return true? To make it clear, I don't want to modify Array.isArray() or any other build-in objects.

This is basically the same question as Can you fake out Array.isArray() with a user-defined object?, but it was asked 5 years ago, and the answers are based on the ECMAScript 5 specification. I'm looking for an answer based on the ECMAScript 2017 specification.

like image 613
Michał Perłakowski Avatar asked Dec 15 '16 17:12

Michał Perłakowski


2 Answers

No, as you already said a real array (which is what Array.isArray detects) is an array exotic object, which means that its .length behaves in a special way.

The only ways to construct that are using the array constructor or a subclass of Array (that in turn calls the array constructor) or the same from another realm. Also countless other methods return new arrays (e.g String::split, String::match, Array.from, Array.of, the Array prototype methods, Object.keys, Object.getOwnPropertyNames).
Furthermore, functions that are used for tagged templates or as proxy apply/construct traps will receive brand new arrays, and arrays also are constructed as part of the result of Promise.all or .entries() iterators.

If you're looking for syntactic ways to create arrays, the array literal will be your primary choice, but also destructuring expressions (in array literals or functions) can create arrays from iterators.

If your actual question was "Can I turn an arbitrary object into an array exotic object?", the answer is a firm No.

like image 169
Bergi Avatar answered Nov 14 '22 01:11

Bergi


An object either is created as an exotic array or not, and you can't change that.

However, as you mention, you can create a Proxy object whose target is an array.

console.log(Array.isArray(new Proxy([], {}))) // true

The Proxy object won't be an array, but will be considered an array by Array.isArray. It will be a new, different object, but you can redirect all the internal operations to the desired object, effectively becoming a live clone.

function redirect(trap) {
  return (target, ...args) => Reflect[trap](obj, ...args);
}
var obj = {0:0, 1:1, length:2};
var arrayified = new Proxy([], {
  apply: redirect('apply'),
  construct: redirect('construct'),
  defineProperty: redirect('defineProperty'),
  deleteProperty: redirect('deleteProperty'),
  enumerate: redirect('enumerate'),
  get: redirect('get'),
  getOwnPropertyDescriptor: redirect('getOwnPropertyDescriptor'),
  getPrototypeOf: redirect('getPrototypeOf'),
  has: redirect('has'),
  isExtensible: redirect('isExtensible'),
  ownKeys: redirect('ownKeys'),
  preventExtensions: redirect('preventExtensions'),
  set: redirect('set'),
  setPrototypeOf: redirect('setPrototypeOf')
});
console.log(arrayified); // [0, 1]
like image 2
Oriol Avatar answered Nov 14 '22 03:11

Oriol