CODEWITHSUNDEEP
javascriptobject-literal
Daddy Warbox
Daddy Warbox

Reputation: 4598

What is this thing in JavaScript?

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?

Upvotes: 11

Views: 1653

Answers (8)

Vinko Vrsalovic
Vinko Vrsalovic

Reputation: 340171

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 work. I want to warn 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.

Upvotes: 7

Aaron Maenpaa
Aaron Maenpaa

Reputation: 122850

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

Upvotes: 17

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

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;

Upvotes: 5

StingyJack
StingyJack

Reputation: 19469

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.

Upvotes: 2

Odilon Redo
Odilon Redo

Reputation: 551

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;

Upvotes: 1

chroder
chroder

Reputation: 4463

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)
}

Upvotes: 12

Stephen Deken
Stephen Deken

Reputation: 3695

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

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

Upvotes: 4

Sergey Ilinsky
Sergey Ilinsky

Reputation: 31535

This is an example of inline JavaScript object instantiation.

Upvotes: 0

Related Questions