What is the difference between these two particular JavaScript functions?

Go To StackoverFlow.com

2

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?

2012-04-03 22:57
by Frankie
possible dup http://stackoverflow.com/questions/2160420/what-is-the-difference-between-these-two-functions-approache - ajax333221 2012-04-03 23:04
@KendallFrey: don't edit in a possible dupe message - user7116 2012-04-03 23:16
If you're downvoting this post because it's a dupe, consider that it wasn't originally posted in stackoverflow, and thus the O.P. wouldn't have been able to search for dupes as easily as you might think - kojiro 2012-04-04 01:20


3

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 :
    { StatementListopt }

StatementList :
    Statement
    StatementList Statement

13 Function Definition

Syntax

FunctionDeclaration :
    function Identifier ( FormalParameterListopt ) { FunctionBody }

FunctionExpression :
    function Identifieropt ( FormalParameterListopt ) { FunctionBody }

FormalParameterList :
    Identifier
    FormalParameterList , Identifier

FunctionBody :
    SourceElements

14 Program

Syntax

Program :
    SourceElementsopt

SourceElements :
    SourceElement
    SourceElements SourceElement

SourceElement :
    Statement
    FunctionDeclaration

2012-04-03 23:05
by ChaosPandion
My gaffe aside, is this explicitly declared illegal in the ECMA-262 spec, and if so, where - kojiro 2012-04-03 23:15
@kojiro - Yes of course let me include that - ChaosPandion 2012-04-03 23:16
@kojiro - Took a healthy mix of markdown and html but I've included the syntax for the lazy. : - ChaosPandion 2012-04-03 23:25


1

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() {
    ...
};
2012-04-03 23:12
by Dennis Rongo


0

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.)

2012-04-03 23:04
by kojiro


0

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() {}.

2012-04-03 23:10
by Tuan


0

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.

2012-04-03 23:12
by Real Tuty


0

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

2012-04-03 23:13
by Alisher Ulugbekov