JavaScript colon operator

Question

I am trying to learn JavaScript. After reading this page: What does ':' (colon) do in JavaScript?

I tried to replace

var store = new dojo.data.ItemFileReadStore({
         url: "countries.json"
 });

with

var store = new dojo.data.ItemFileReadStore();
        store.url = "countries.json";

It does not work. Can any one please point out the mistake, or explain the correct use of the Colon operator?. Thanks.

score 9 · Accepted Answer · answered Jun 08 '11 at 20:06

9

That's not a fair comparison, although you're almost there.

var store = new dojo.data.ItemFileReadStore({
         url: "countries.json"
 });
//Creates a new store object, passing an anonymous object in with URL
// property set to "countries.json"

The alternative without the colon operator is:

var props={};
props.url="countries.json"
var store = new dojo.data.ItemFileReadStore(props);
//Does same as above but doesn't use :

Not this isn't the only use of : in JavaScript though, it can also be used in the ternary operator (alert(b==c?'equal':'not equal');) and in labels (for example in case statements)

answered Jun 08 '11 at 20:06

Rudu

15,682
4
47
63

2

Oh, I get it, so in the first snippet, the store object is constructed using the "url", but in the replacement snippet, I am creating a blank object, and setting a property of it. Thanks a lot for all the help! I had tried looking online for a couple of hours, without any effect. Thanks again. – rgamber Jun 08 '11 at 20:15
If `ItemFileReadStore()` returns an object then yup that's what's happening. The difference is in (1) you're passing something in (which presumably means something to the function) while in (2) you're setting a value after the fact. – Rudu Jun 08 '11 at 20:19

score 2 · Answer 2 · answered Jun 08 '11 at 20:04

The first passes url parameter to the so-called constructor or the object, which may do something under the hood with it - for example assign it to other variable or property, for example "url2".

The second assigns url property of that object and you don't know if it will be used.

score 1 · Answer 3 · answered Jun 08 '11 at 20:03

In first code you are creating a new object and passing it to the function as an argument.

While in second part you are running the function and then, you are setting property of store object. They are totally different thing, as you are not calling function with argument, so it might not run properly. and you are setting return of function to object. not setting property.

score 0 · Answer 4 · answered Jun 08 '11 at 20:04

In this case, the object literal in your first example is being used to pass in a set of options to the constructor. Constructing the ItemFileReadStore and then trying to set those options may not be equivalent since it may need them in order to build the object to begin with.

You'd need to do something like this to replace : with =:

var options = {};

options.url = 'countries.json';

var store = new dojo.data.ItemFileReadStore(options);

score 0 · Answer 5 · answered Jun 08 '11 at 20:05

If the second way isn't working, you're probably not returning an Object with new dojo.data.ItemFileReadStore(); which prevents you from extending it with dot syntax. If you have an Object, adding to it like that will work fine.

Edit: Misread, in one you're passing an argument, in the other you're assigning to the return value, so two different things, I'll leave the above as an FYI.

score 0 · Answer 6 · answered Jun 08 '11 at 20:05

The dojo.data.ItemFileReadStore object probably requires that the url property be present while the object is being created. If that's not the case, then the object doesn't allow you to set that property manually after you have already initialized the object.

The colon is used in JSON to designate the different between a key and a value, when you pass an object structure ({}).

JavaScript colon operator

6 Answers6