What is the difference between these two particular JavaScript functions?

Question

Possible Duplicate:
The difference between the two functions? (“function x” vs “var x = function”)
JavaScript: var functionName = function() {} vs function functionName() {}

var test = function() {
    var a = 20;
    var b = 30;

    return a + b;
};

function Add() {
    var a = 20;
    var b = 30;

    return a + b;
}

What is the difference between these two functions? If I call add() or test() they both give me the same result. What exactly does the var do?

Answer 1

The function declaration syntax cannot be used within a block statement.

Legal:

function a() {
    function b() {

    }
}

Illegal:

function a() {
    if (c) {
        function b() {

        }
    }
}

You can do this though:

function a() {
    var b;
    if (c) {
        b = function() {

        };
    }
}

For the language nerds among us you'll want to reference sections 12.1, 13.1, and 14 of the specification. You will find the following syntax descriptions.

12.1 Block

Syntax

Block :
    { StatementList_opt }

StatementList :
    Statement
    StatementList Statement

13 Function Definition

Syntax

FunctionDeclaration :
    function Identifier ( FormalParameterList_opt ) { FunctionBody }

FunctionExpression :
    function Identifier_opt ( FormalParameterList_opt ) { FunctionBody }

FormalParameterList :
    Identifier
    FormalParameterList , Identifier

FunctionBody :
    SourceElements

14 Program

Syntax

Program :
    SourceElements_opt

SourceElements :
    SourceElement
    SourceElements SourceElement

SourceElement :
    Statement
    FunctionDeclaration

Answer 2

They're different. If you call the function declared with a var before declaration, it will throw an error since it hasn't been declared yet.

test(); // Undefined
var test = function() {
    ...
};

This can be called however at any time and defined at run time.

test(); // OK
function test() {
    ...
};

Answer 3

The difference is that in the first case you have an anonymous function assigned to a name, and in the second, a function declaration. In most cases, this difference doesn't matter. Where it does matter is

1. in debuggers, a named function can sometimes be more easily identified in stack traces and

2. variable hoisting causes the entire function declaration to be "moved" to the top of its containing function, so

   foo(1, 2); var foo = function (a, b) { return a+b; }

is equivalent to

var foo;
foo(1, 2);
foo = function (a, b) {
    return a+b;
}

(you can see why it would fail.)

Answer 4

You can invoke Add() before the its definition, but you can't invoke test() before its definition.

Also see var functionName = function() {} vs function functionName() {}.

Answer 5

The var means you are assigning a variable to an anonymous function. If you were going to assign your function to a variable, you would do this:

var test = function Add() {
    var a = 20;
    var b = 30;

    return a + b;
};

You have to name the function that you are using.

You don't have to assign a function to a variable, but if you would like to keep the data from the function then you should assign the function to a variable, so you would use the code above.

Answer 6

The first function you are assigning is an anonymous function to a variable test variable. Then variable test becomes the test() function.