Javascript function declaration. Declaring a Colon Function in a Function

Question

What is the difference between declaring a function "function test ()" and "test: function ()" in javascript?

function test() { } 

against

 test: function() { } 

---

---

---

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

 function test() { } 

and

 var test = function() { }; 

In terms of syntax, the functions in my question do not look the same.

Answer 1

function test() is a normal function declaration, which you can directly call using the function name. Although test: function() is a function defined inside an object, it should therefore be called using the 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} 

Error, works fine.

Actually, you can replace 23 with something else: logical

 { "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 weak. Other people (like me) love Javascript for the same reason, because this flexibility is its strength (it should be asynchronous).

You can call this object "person" and ask for its 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 this 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.

You can usually avoid calling Person() several times and instead create a new Person :

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

This method allows you to create many people 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 replaces classes that lack Javascript 5 (EcmaScript 5). But EcmaScript 6 will be available soon with the appropriate classes.