how to use javascript functions? (defining functions in label)

Question

There are different ways of defining the javascript functions. I often use the simplest way to define the function

function myfunc(){
}

and the next way to define the function in the variable like this (a little bit confusing the way of using)

var myvar = myfunc(){
/*some code*/
}

and the difficult way for me and mostly found in codes developed by advanced programmers like the following

var SqueezeBox={presets:{onOpen:function(){},onClose:function(){}}

Please, can anyone clear my concept on this how can I use?

Answer 1

function myfunc(){}

Function declaration: the function is declared using the standard syntax

function functionName(params[]) {
    //functionbody
}

Using this syntax declares the function at the begin of the scope execution, so they'll be available everywhere in their scope(and in their descendeant scopes).

var s = myfunc(); //s == 0
function myfunc() {return 0;}

var myfunc = function() {};

This uses the pattern known as function expression, it just assigns a reference of an anonymous function to a variable named myfunc. Using this syntax won't allow you to use the function until the variable is parsed. Even if variables are hoisted at the top of their scope, they're initialized when the interpreter parses them, so the above example won't work:

var s = myfunc(); //ReferenceError: myfunc is not defined
var myfunc = function() {return 0;};

But the example below will:

var myfunc = function() {return 0;};
var s = myfunc(); //s == 0

The third example is just assigning an anonymous function to an object property(also known as object method) in the way we've just done with function expression, so if I use the pattern above the code will become:

var onOpen = function() {},
    onClose = function() {},
    SqueezeBox = {//curly braces denotes an object literal
        presets: {//again, this is a nested object literal
             onOpen: onOpen,
             onClose: onClose
        }
    };

This acts exactly the same as your example, with the only difference that here I used a variable to get a reference to the anonymous function before passing it to the object. If you need to know more about objects, I recommend you reading the MDN docs. Anyway, if you're really intrested in how JS works, I'd suggest Javascript Garden, which is a very good article about JS.

Answer 2

The first code snippet is a function declaration:

function myfunc() { }

You are declaring a named function called myfunc. You can verify this by myfunc.name === "myfunc"

Your second code snippet contains syntax error. I believe you meant:

var myvar = function() { };

This is an anonymous function expression assigned to a variable. You can verify this by typeof myvar === "function" and myvar.name === "".

The third snippet is a javascript object. Basically you can think of it as a Map or Dictionary<string, object>. So SqueezeBox contains 1 key presets, which in turn is a dictionary that contains 2 keys, onOpen and onClose, which both of them are anonymous functions.

Answer 3

In

var SqueezeBox={presets:{onOpen:function(){},onClose:function(){}}}

He's creating an object SqueezeBox containing another object presets with two empty anonymous functions, he's defining the function inline with an empty body inside the {}. A better way to see it is formatted this way:

  var SqueezeBox={
                  presets:{
                           onOpen:function(){/* empty function body */},
                           onClose:function(){/*empty function body */}
                          }
                  }

Answer 4

This has already been answered here: What is the difference between a function expression vs declaration in Javascript?.

For the last example, as Atropo said, it's affecting an anonymous function to an object. It's similar to the var example.

Answer 5

There is a lot of useful information on this subject here

Functions can have a name, which if specified cannot be changed. Functions can also be assigned to variables like any other object in javascript.

The first example is of a function declaration:

function myfunc(){
}

Using the function declaration you will be able to call the function from anywhere within the closure in which the function is declared, even if it is declared after it is used.

The other two examples are function expressions:

var myvar = function(){
/*some code*/
}

var SqueezeBox= {
    presets: {
        onOpen:function(){/* empty function body */},
        onClose:function(){/*empty function body */}
    }
}

Using function expressions you are assigning functions to a variable. When doing this you must declare them before you use them. Most of the time you see this the functions will be anonymous but it is possible to name a function in an expression:

var myvar = function myFunc(){
    myFunc(); // Because it has a name you can now call it recursively
}

When doing this, the myFunc function is only available within the body of the function because it is still a function expression rather than a declaration.

The third example declares a javascript object literal, SqueezeBox and within that object there is another called presets. Within this object there are two more objects/labels called onOpen and onClose. This means you can do the following to use these functions:

SqueezeBox.presets.onOpen();
SqueezeBox.presets.onClose();

You can think of onOpen and onClose as variables that are part of the object. So it's very similar to doing the following (but the variable is only in the scope of the presets object which is only available within the SqueezeBox object).

var onOpen = function() {};