CODEWITHSUNDEEP
javascriptarraysgoogle-chrome
clime
clime

Reputation: 8885

javascript: Prevent representing added Array's attributes as elements (in Chrome)

I am using this snippet to extend Array's functionality with getUnique function:

Array.prototype.getUnique = function() {
   var u = {}, a = [];
   for (var i = 0, l = this.length; i < l; ++i) {
      if (u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
};

The slight drawback is that the attribute getUnique is printed together with array elements if I console.log an array:

["126", "125", getUnique: function]

It is slightly disturbing even if I know that getUnique is not considered as an array element. This happens in Chrome. Not in Firefox as far as I know. Is there a way to prevent it?

Upvotes: 1

Views: 59

Answers (1)

Qantas 94 Heavy
Qantas 94 Heavy

Reputation: 16020

Use Object.defineProperty and enumerable:

Object.defineProperty(Array.prototype, 'getUnique',
{ enumerable: false
, configurable: true
, writable: true
, value: function ()
   {  var u = {};
      var a = [];
      for (var i = 0, l = this.length; i < l; ++i)
      {  if (u.hasOwnProperty(this[i])) continue;
         a.push(this[i]);
         u[this[i]] = 1;
      }
      return a;
   }
});

By default, a property is enumerable (even if it's not a direct property of an instance), which means that it is visible through any for-in loop (or Object.keys) of the array. Chrome does something similar to a for-in loop on an array, which is why it is represented as it is.

Note that this function only works in (relatively) modernish browsers which support ES5, which means that IE < 9, some older Android browsers and other mobile devices may not be able to use this code. This is one of the reasons why some people recommend against extending the prototypes of native constructors, as this issue can break code that isn't well constructed against these issues. What people who believe this usually recommend is to not place the function on the prototype:

function getUnique(arr)
{  var u = {};
   var a = [];
   for (var i = 0, l = array.length; i < l; ++i)
   {  if (u.hasOwnProperty(arr[i])) continue;
      a.push(arr[i]);
      u[arr[i]] = 1;
   }
   return a;
}

I'd also like to point out that only one object will be ever printed by the getUnique function, as it is technically incorrect in its implementation. While rather similar, objects are not dictionaries and can only have string keys, which means that any object (no matter the contents) will have a string value of '[object Object]', which means that when your function encounters another object (even if it has different values), it will not be added to the returned array. While inefficient, the only way I can think of is to iterate through the array each time:

function getUnique(arg)
{  'use strict';
   var O = Object(arg);
   var len = O.length >>> 0;
   var A = [];
   var indexOf = function (arg, searchElement)
   {  for (var i = 0, l = arg.length; i < l; ++i) if (arg[i] === searchElement) return i;
      return -1;
   };
   for (var k = 0; k < len; ++k)
   {  var elementK = O[k];
      var kPresent = k in O;
      if (!kPresent || indexOf(A, elementK) !== -1) continue;
      A[A.length - 1] = elementK;
   }
   return array;
}

Upvotes: 3

Related Questions