What is this thing in JavaScript?

Question

Consider:

var something = {

    wtf: null,
    omg: null
};

My JavaScript knowledge is still horribly patchy since I last programmed with it, but I think I've relearned most of it now. Except for this. I don't recall ever seeing this before. What is it? And where can I learn more about it?

Answer 1

It's object literal syntax. The 'wft' and 'omg' are property names while, null and null are the property values.

It is equivalent to:

var something = new Object();
something.wtf = null;
something.omg = null;

Check out Mozilla's documentation on object literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Answer 2

It is an object literal with two properties. Usually this is how people create associative arrays or hashes because JS doesn't natively support that data structure. Though note that it is still a fully-fledged object, you can even add functions as properties:

var myobj = {
    name: 'SO',
    hello: function() {
        alert(this.name);
    }
};

And you can iterate through the properties using a for loop:

for (i in myobj) {
    // myobj[i]
    // Using the brackets (myobj['name']) is the same as using a dot (myobj.name)
}

Answer 3

Explanation from the "I want an associative array in JavaScript" standpoint (which is what in many cases object literals end up being used for)

From "Mastering JavaScript Arrays"

An associative array is an array which uses a string instead of a number as an index.

var normalArray    = [];
    normalArray[1] = 'This is an enumerated array';

    alert(normalArray[1]);   // outputs: This is an enumerated array

var associativeArray           = [];
    associativeArray['person'] = 'John Smith';

    alert(associativeArray['person']); // outputs: John Smith

JavaScript does not have, and does not support associative arrays. However… All arrays in JavaScript are objects and JavaScript's object syntax gives a basic emulation of an associative array. For this reason, the example code above will actually work. Be warned that this is not a real array and it has real pitfalls if you try to use it. The 'person' element in the example becomes part of the Array object's properties and methods, just like .length, .sort(), .splice(), and all the other built-in properties and methods.

You can loop through an object's properties with the following loop…

var associativeArray = [];
associativeArray["one"] = "First";
associativeArray["two"] = "Second";
associativeArray["three"] = "Third";
for (i in associativeArray) {
   document.writeln(i+':'+associativeArray[i]+', ');
   // outputs: one:First, two:Second, three:Third
};

In the above example, associativeArray.length will be zero because we didn't actually put anything into the Array, we put it into associativeArray's object. associativeArray[0] will be undefined.

The loop in the above example will also pick up any methods, properties, and prototypes which have been added to the array and not just your data. A lot of problems people have with the Prototype library is that their associative arrays break because Prototype adds a few useful Prototype functions to the Array object and for i in x loops pick up those additional methods. That's the pitfall of using Array/objects as a poor man's associative array.

As a final example, the previous code will work regardless of whether you define associativeArray as an Array ([]), an Object({}), a regular expression (//), String(""), or any other JavaScript object.

The bottom line is—don't try to use associative arrays, code for what they are—object properties, not Arrays.

Answer 4

It's an object literal (or, sometimes, a vanilla object in libraries with Hash classes).

It is the same thing as:

var o = new Object();
o.wtf = null;
o.omg = null;

Answer 5

This is an object literal. It's effectively equivalent to the following:

var something = new Object();
something["wtf"] = null;
something["omg"] = null;

Answer 6

I believe it's an object with two properties, wtf and omg.

You could say

something.wtf = "myMessage";
alert(something.wtf);

Check out json.org.

Answer 7

This code:

var something = {wtf:null}

Has the same effect as:

var something={};
something.wtf=null;

Or for unnecessary verbosity:

var something=new Object();
something.wtf=null;

And it's useful to remember that the last line is the same as

something["wtf"]=null;

So you can use:

var myName="wtf";
something[myName]=null;

Answer 8

This is an example of inline JavaScript object instantiation.