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.
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
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.
There are three differences in the test:function() and function test().
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
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 objectYou 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");
}
