Javascript 'colon' for labeling anonymous functions?

Question

What does this code refer too?

queryString: function() {

//some code

}

I tested it in the WebConsole (Firefox) but it wouldn't execute, so I'm thinking that it isn't equivalent to function queryString() {}.

So what is it exactly?

Solution 1

You are missing some code there, but I assume its part of an object declaration like this:

var obj = {
  queryString: function() {
    //some code
  }
};
obj.queryString();

It assigns a function as a property of an object literal. It would be equivalent to this:

var obj = {};
obj.queryString = function() { ... };
obj.queryString();

In general, the object literal syntax looks like this:

{ key: value, otherKey: otherValue };

So the reason this didn't work in the console is that it was not enclosed in {} characters, denoting an object literal. And this syntax is valid ONLY in an object literal.

Solution 2

This is probably inside a map/object declaration like so:

var obj = {
    queryString: function() {
        alert('here');
    },
    eggs: function() {
        alert('another function');
    }
};

obj.queryString();

Solution 3

It's a label https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i == 1 && j == 1) {
         continue loop1;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

Solution 4

The : is used when defining an object and its properties.

var obj = {
   queryString: function() {
      //some code
   }
}

Now obj.queryString is your function.

Solution 5

What the

queryString: function() {

//some code

}

means is the you can use queryString() to call the function that it refers to. This kind referencing is generally used if you want to define a class(or a pseudo class ;P) in your javascript. Something like this,

var application= { namespace: {} };

application.namespace.class_name = function(){

  function constructor(){
   return {
     exposed_property1 : property1,
     exposed_property2 : property2,  
     ...
     ...
    }
   }
  //Write property/functions that you want to expose.
  // Write rest of the function that you want private as function private(){}
};

So now at anyother part of the code you can create objects for class_name and use it to access the property1,property2 etc.,

View more solutions

Comments

[knownasilya]

So it's like a property of that object :) Thank you!

[Stefan Rein]

Yeah, just wondered about a label before a switch statement, thank you!

[Matthew]

No, the question's example of queryString: function() { /* some code */ } is not equivalent to your answer's example of a label before a switch statement. The question's example is part of an object literal declaration, which is totally different. In the question's example the symbol queryString followed by a colon (":") is the name of the object member, its value is the function declaration following the colon.

[dy_]

It is not missing code. Please read labeled function developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[java-addict301]

@dy_ this answer was from 2012. Feel free to update accordingly.

[carloswm85]

Is it queryString and object inside the variable obj? I thought queryString was the function's name.

[gen_Eric]

@CarlosW.Mercado queryString is now a property inside the obj object. obj.queryString is an object property, that happens to be a function.