JavaScript function declaration, a colon in function declaration

Question

What is the difference between function declaration function test() and test: function() in JavaScript?

function test() {
    …
}

vs.

test: function() {
    …
}

---

In the question «var functionName = function() {} vs function functionName() {}» functions were declared like:

function test() {
    …
}

and

var test = function() {
    …
};

Which is a bit different from syntax perspective comparing to my question.

Answer 1

function test() is normal function declaration which you can call directly using function name. While test: function() is the function defined inside some object, so it has to be called using object on which it is defined.

Example

Function Declaration

function test() {
    alert('In Test');
}

test(); // Calling test

Method

var myObj = {
    test: function() {
        alert('Inside test');
    }
};

myObj.test(); // Calling test

Answer 2

Consider this javascript object :

{ "name" : "Joe",
  "age" : "23"}

Javascript being weakly typed, you can replace "23" (string) with 23 (number) :

{ "name" : "Joe",
  "age" : 23}

No error, works perfectly.

Actually, you can replace 23 with anything else : a boolean

{ "name" : "Joe",
  "age" : true}

another object

{ "name" : "Joe",
  "age" : {"2014" : 22 , "2015": 23 } }

or even a function

{ "name" : "Joe",
  "age" : function(){ alert("23");} }

Sidenote : some people hate Javascript for being so lax. Other people (like me) love Javascript for this very same reason, because this flexibility is its power (that and being asynchrounous).

You can name that object "person" and ask for his name and age :

var person = { "name" : "Joe",
      "age" : function(){ alert("23");} }

console.log( person.name ); // will log "Joe"
person.age(); // "age" is a function, so you need to call it. It will alert 23.

Now you can create a function that will return that object :

function Person() {
    return{
      "name" : "Joe",

      "age" : function(){ alert("23");},

      sayHello : function() {
        alert("Hello");
      },

      sleep : function() {
        alert("I'm sleeping");
      }
    }
};

console.log( Person().name ); // logs "Joe"
Person().age(); // alerts "23"
Person().sayHello(); // alerts "Hello"
Person().sleep(); // alerts "I'm sleeping".

age, sayHello and sleep are functions, that are called methods of the Person function.

One usually avoids calling Person() multiple times, and create a new Person instead :

var person = new Person();
person.sayHello(); // alerts "Hello"
person.sleep(); // alerts "I'm sleeping".

This method allows to create many persons, by passing parameters :

function Person(name, age) {
    return{
        "name" : name,

        "age" : function(){ alert(age);},

        sayHello : function() { // sayHello or "sayHello", both work
          alert("Hello, my name is "+ this.name );
        },

        sleep : function() {
          alert("I'm sleeping");
        }
     }
};

var person = new Person("John", 25);
person.sayHello(); // alerts "Hello, my name is John"
person.age(); // alerts "25".

This method currently replace classes, that Javascript 5 (EcmaScript 5) lacks. But EcmaScript 6 will come soon, with proper classes.