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.
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.
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]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With