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.

Answer 3

There are three differences in the test:function() and function test().

Calling:

test:function() will a function defined inside the object. So you will need it to call from that object. function test() is a normal function you call call it using test().
Consider this example.

const obj = {
  insidefunc:function(){
    console.log("Inside");
  }
}
function test(){
  console.log("Outside");
}

obj.insidefunc(); //Inside
test(); //Outside

insidefunc(); //Uncaught ReferenceError: insidefunc is not defined
 

this Binding

In the test:function() this will refer to the the Object of which the function is property of.While in function test() this will refer to window object.

const obj = {
  value:"something",
  insidefunc:function(){
    console.log(this);
  }
}
function test(){
  console.log(this);
}
obj.insidefunc(); //will log 'obj'
test(); //window object

Hositing:

You can use test before the line its declared but obj.test will only be accessed after the line its declared. Actually function test() show hoisting

test(); //outer function  called

const obj = {}

obj.test() //"Uncaught TypeError: obj.test is not a function"

obj.test = function(){
  console.log("object method")
}

function test(){
   console.log("outer function  called");
}