Is it possible to create a hidden property in javascript

Question

I want to create an object with a hidden property(a property that does not show up in a for (var x in obj loop). Is it possible to do this?

Answer 1

It isn't possible in ECMAScript 3 (which was what the major browsers implemented at the time this question was asked in 2010). However, in ECMAScript 5, which current versions of all major browsers implement, it is possible to set a property as non-enumerable:

var obj = {    name: "Fred" };  Object.defineProperty(obj, "age", {     enumerable: false,     writable: true });  obj.age = 75;  /* The following will only log "name=>Fred" */ for (var i in obj) {    console.log(i + "=>" + obj[i]); } 

This works in current browsers: see http://kangax.github.com/es5-compat-table/ for details of compatibility in older browsers.

Note that the property must also be set writable in the call to Object.defineProperty to allow normal assignments (it's false by default).

Answer 2

To keep things current, this is the state of things in ES6+. I'm going a bit beyond the scope of the question and talking about how to hide properties in general, not just from the for ... in loop.

There are several ways to create what might be called "hidden properties", without looking at things like variables closed by closures, which are limited by scoping rules.

Now-classic, the non-enumerable property

As with previous versions of ECMAScript, you can use Object.defineProperty to create properties that are not marked enumerable. This makes the property not show up when you enumerate the object's properties with certain methods, such as the for ... in loop and the Object.keys function.

Object.defineProperty(myObject, "meaning of life", {
    enumerable : false,
    value : 42
});

However, you can still find it using the Object.getOwnPropertyNames function, which returns even non-enumerable properties. And of course, you could still access the property by its key, which is just a string that anyone can build, in theory.

A (non-enumerable) symbol property

In ES6, it's possible to make properties with keys of a new primitive type -- symbol. This type is used by Javascript itself to enumerate an object using a for ... of loop and by library writers to do all kinds of other things.

Symbols have a descriptive text, but they are reference types that have a unique identity. They aren't like strings, which are equal if they have the same value. For two symbols to be equal, they must be two references for exactly the same thing.

You create a symbol using the Symbol function:

let symb = Symbol("descriptive text");

You can use the Object.defineProperty function to define properties with symbols as keys.

let theSecretKey = Symbol("meaning of life");
Object.defineProperty(myObject, theSecretKey, {
    enumerable : false,
    value : 42
});

Unless someone gets a reference to that exact symbol object, they can't look up the value of the property by key.

But you can also use the regular syntax:

let theSecretKey = Symbol("meaning of life");
myObject[theSecretKey] = 42;

Properties with this key type will never show up in for ... in loops or the like, but can still be enumerable and non-enumerable, as functions like Object.assign work differently for non-enumerable properties.

Object.getOwnPropertyNames won't get you the symbol keys of the object, but the similarly named Object.getOwnPropertySymbols will do the trick.

Weak maps

The strongest way to hide a property on an object is not to store it on the object at all. Before ES6, this was kind of tricky to do, but now we have weak maps.

A weak map is basically a Map, i.e. a key-value store, that doesn't keep (strong) references to the keys so they can be garbage collected. A weak map is very limited, and doesn't allow you to enumerate its keys (this is by design). However, if you get a reference to one of the map's keys, you can get the value that goes with it.

They are primarily designed to allow extending objects without actually modifying them.

The basic idea is to create a weak map:

let weakMap = new WeakMap();

And use objects you want to extend as keys. Then the values would be sets of properties, either in the form of {} objects, or in the form of Map data structures.

weakMap.set(myObject, {
    "meaning of life" : 42
});

The advantage of this approach is that someone needs to get a reference to your weakMap instance and the key in order to get the values out, or even know they exist There's no way around that. So it's 100%, guaranteed to be secure. Hiding properties in this way ensures no user will ever discover them and your web application will never be hacked*

The biggest flaw in all this, of course, is that this doesn't create an actual property. So it doesn't participate in the prototype chain and the like.

(*) This is a lie.

Private class fields

A fairly recent addition to ECMAScript is the private class field. This feature is currently in Stage 3 and is not in the final standard yet. However, it's supported in all modern browsers and more recent versions of Node.

Private class fields are a specific variant on class field declarations. You can only use them when defining a JavaScript class. They cannot be defined anywhere else. The syntax is as follows:

class Example {
    #thisIsPrivate;
    constructor(v) {
        this.#thisIsPrivate = v;
    }
}

This field is truly private. It can only be accessed by code inside the syntactic definition of Example and nowhere else. There is no reflection API or other feature that lets you access the field. It will never appear as the result of functions such as Object.getOwnPropertyNames. The name of the field always starts with #.

Answer 3

It's a bit tricky!

function secret() {
  var cache = {};
  return function(){
    if (arguments.length == 1) { return cache[arguments[0]];}
    if (arguments.length == 2) { cache[arguments[0]] = arguments[1]; }
  };
}
var a = secret();

a.hello = 'world';
a('hidden', 'from the world');

If you are a real pro though, you can do it this way!

var a = new (secret())();

a.hello = 'world';
a.constructor('hidden', 'from the world');

Now if you look a in firebug it will be an object ... but you know better! ;-)