Need help to understand the usage of ":" in JavaScript

Question

I'm using jQuery validate plugin, and when I met the following script, i recognize, that i don't understand many things in jQuery:)

Look please

$("#invitationform").validate({
        rules: 
        {
            phone: 

• List item

          {
              required: true,
              minlength: 6,
              number:true
          }
      },
      messages: 
      {
          phone: 
          {
              required: "Please enter a phone number",
              minlength: "Your number must consist of at least 6 digits"
          }
      }
  });
  

Please help me to understand who are "rules", and "phone" here? Are they something like list elements, or they are variables of the object? And why we call them via : ?

Short explanation, or links on some documentation will be very nice.

Thanks much

Answer 1

rules and phone are Javascript object literals.

Answer 2

Apart from the few primitive types (numbers, strings, booleans, null and undefined) everything is an object in JavaScript (even functions).

Objects are basically containers of properties, which happen to be very useful for collecting and organizing data.

One popular method to create objects is to use the object literal notation, where the property name is separated from the value by the colon : symbol:

var myFirstObject = {
   'name': 'Bobby',
   'surname': 'Smith'
};

The quotes around property names are optional if the name would be a legal JavaScript identifier and not a reserved word. A property's name can be any string. Objects can contain other objects, so they can easily represent trees or graphs:

var myFlight = {
   'airline': 'Airline Name',
   'number': 'AN700',
   'departure': {
      'IATA': 'SYD',
      'time': '2010-09-04 23:10:00'
   },
   'arrival': {
      'IATA': 'LAX',
      'time': '2010-09-05 05:14:00'
   }      
};

JavaScript objects also happen to be a convenient hash table data structure. You could easily do the following:

var myHashTable = {};
myHashTable['name'] = 'Bobby';
myHashTable['surname'] = 'Smith';
// subscript notation:
alert(myHashTable['name'] + ' ' + myHashTable['surname']);
// dot notation: (equivalent)
alert(myHashTable.name + ' ' + myHashTable.surname);

jQuery, and many other JavaScript libraries, often expect an object as an argument to a method. To give you an example from another library, this is how a map is constructed using the Google Maps API v3:

var map = new google.maps.Map(document.getElementById('map'), { 
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   center: new google.maps.LatLng(39.904667, 116.408198),
   zoom: 12
});

Note how we can easily pass readable complex structures as function arguments because of how JavaScript works.

Answer 3

That is not actually specific to jQuery, but is in fact JSON (which is just a part of vanilla JavaScript. As pygorex noted, those are object literals, which is to say that they are the property names of an object.

That means that if, for example, you were to create an object with that notation, rather than passing it into a function, you would would be able to call on the values they contain. For example, if you did this:

var options = {
    rules: 
    {
        phone: 
        {
            required: true,
            minlength: 6,
            number:true
        }
    },
    messages: 
    {
        phone: 
        {
            required: "Please enter a phone number",
            minlength: "Your number must consist of at least 6 digits"
        }
    }
};

You could then do something like this:

var isPhoneRequired = options.rules.phone.required;

jQuery uses this structure a lot in order to allow for a convenient method of passing a multitude of parameters into a plug-in function. It is convenient because you can pass in many options while only specifying one parameter in the function call, and you can easily set defaults which are overridden only if an alternate value is specified by the caller.