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

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.