JavaScript: Can I use square brackets ([]) operator as a function?

Question

Is it possible for any arbitrary object to obtain a reference to an accessor function that would act exactly as [] operator?

Something like the following?:

function get(x) { return this[x] }

So that if I had an object foo instead of doing foo['bar'] I could call foo.get('bar')

Answer 1

You can write a function:

function get( propertyName ) {
  return this[ propertyName ];
}

Then you can bind that function to some particular object:

var myObject = { /* ... */ }; // that looks like a little face, kind-of
var getter = get.bind(myObject);

Now, why is that interesting? The only reason I can think of is that it gives you an object (the bound version of the function) that you can pass to other code, allowing that code to get property values but not update them. I suppose that's kind-of useful, though I can't say I've found myself wanting it.

You can add a "get" function to the Object prototype, but if you do so I'd do it in such a way as to make it non-enumerable. Otherwise, you may have weird behavior of for ... in loops:

Object.defineProperty(Object.prototype, "get", {
  value: function( key ) { return this[key]; }
});

Another interesting thing to contemplate if you're doing functional-style programming is the semantics of your "get" function. The sample I did above makes it possible to create a function to get a particular property of an object too, in addition to being a getter for any property:

var getSomeObjectName = get.bind( someObject, "name" );

Now all that the function "getSomeObjectName" will do is fetch the "name" property value.

It might also be interesting to consider higher-order functions. A really useful notion is that of a "pluck" function, to pull a particular attribute from an object. It's kind-of like "get" but I'd write it differently:

function pluck(propertyName, object) {
  object = object || this;
  return object[propertyName];
}

Now I can make a getter as before, pretty much the same way:

var getter = pluck.bind( someObject );

Alternatively, I can make a "plucker" for a particular property name that will get that property from any object:

var getName = pluck.bind(null, "name");

Now I can call:

getName( someOtherObject )

and that's effectively like calling

pluck( "name", someOtherObject )

because I've "pre-loaded" the first parameter ("name") in the "getName" function. That becomes really useful with things like the .map() facility:

var myArray = [
  { name: "Thomas", type: "tank engine" }
, { name: "Flipper", type: "dolphin" }
, { name: "Rocinante", type: "horse" }
// ...
];

var allNames = myArray.map(pluck.bind(null, "name"));

You can of course write a wrapper function to hide the somewhat ugly call to .bind :

function plucker( name ) {
  return pluck.bind(null, name);
}

allNames = myArray.map( plucker("name") );

Answer 2

Yes, by prototyping

var foo = {bar : 3};

Object.prototype.getz = function(what) {
    return this[what];
}

var value = foo.getz('bar'); // outputs 3

FIDDLE

No idea why you would need it ?

Answer 3

You can.

http://jsfiddle.net/sdaDK/

var foo = {
    bar: 'foo2',
    get: function (a) { return this[a]; }
}

alert(foo.get('bar'));

Answer 4

If you need this function only for one object then you can do

var myObject = {
    x: 'anything',
    get: function (x) { return this[x]; }
}
alert(myObject.get('x'));

Or if you need this for all object you need to extend the prototype of Object class

var myObject = {
    x: 'anything'
}
Object.prototype.get = function(x) {
    return this[x];
}
var value = myObject.get('x');

In javascript prototype is the way of extending any property.