The difference between the two functions? ("function x" vs "var x = function")

Question

Possible duplicate:
JavaScript: var functionName = function () {} vs function functionName () {}

What is the difference between:

function sum(x, y) { return x+y; } // and var sum = function (x, y) { return x+y; } 

Why is one used over the other?

Answer 1

The first is known as a named function, and the second as an anonymous function.

The key practical difference is when you can use the sum function. For example:-

 var z = sum(2, 3); function sum(x, y) { return x+y; } 

z is assigned 5, whereas this: -

 var z = sum(2, 3); var sum = function(x, y) { return x+y; } 

Failure, because at the time the sum variable was executed in the first line, the function has not yet been assigned.

Named functions are parsed and assigned their names before execution, so a named function can be used in code that precedes its definition.

Variables assigned to functions by code can be explicitly used as functions only after execution completes after assignment.

Answer 2

The first is usually used for several reasons:

• The name "sum" appears in stacktrace, which makes debugging easier in many browsers.
• The name "sum" can be used internally which makes it easy to use for recursive functions.
• function declarations are "raised" in javascript, so in the first case, the function is guaranteed to be defined exactly once.

• Inserting a semicolon causes

   var f = function (x) { return 4; } (f) 

  to assign 4 to f .

There are a few caveats to keep in mind though. Do not do it

  var sum = function sum(x, y) { ... }; 

in IE 6, as this will lead to the creation of two function objects. Especially confusing if you do

  var sum = function mySym(x, y) { ... }; 

According to the standard, the sum (x, y) {...} function cannot appear inside an if block or a loop body, so different interpreters will refer to

  if (0) { function foo() { return 1; } } else { function foo() { return 2; } } return foo(); 

differently. In this case you must do

  var foo; if (0) { foo = function () { return 1; } } ... 

Answer 3

The first is the named function operator, the second assigns the expression of the anonymous function to the variable.

The function operator is added to the scope immediately - you do not need to run it before it can be called, so this works:

 var y = sum(1, 2); function sum(x, y) { return x + y; } 

But the function expression is assigned to the variable only when the code is executed, so this does not work:

 // Error here because the function hasn't been assigned to sum yet. var y = sum(1, 2); var sum = function(x, y) { return x + y; } 

The advantage of the expression form is that you can use it to assign different functions to the expression at different points - so you can change the function or use another in different conditions (for example, depending on the browser you are using).

The advantage of a named function statement is that debuggers can display that name. Although you can name function expressions:

 var sum = function sum(x, y) { return x + y; } 

But this can be confusing, as the two names are actually in different areas and relate to different things.

Answer 4

The two pieces of code that you posted there will behave the same for almost all purposes.

However, the difference in behavior is that with the second option, this function can only be called after this point in the code.

In the first version, the function is available for the code that runs above where the function is declared.

This is because with the second option, the function is assigned to the variable foo at runtime. In the first case, the function is assigned to this identifier foo during parsing.

Additional technical information

Javascript has three ways to define functions.

• Your first example is function declaration . To create a function, use the "function" operator. The function is provided during parsing and can be called anywhere in this area. You can save it later in a variable or object.
• The second fragment shows the expression of the function . This is due to the use of the "function" operator to create a function - the result of this operator can be stored in any variable or object. Function expression is so powerful. A function expression is often called an “anonymous function” because it does not have to have a name,
• The third way to define a function is with the "Function ()" constructor, which is not shown in the original message. It is not recommended to use this, since it works the same way as eval (), which has its problems.

Answer 5

The difference is that ...

This is an unnamed feature.

 var sum = function (x, y) { return x+y; } 

So, if you warn (summarize); you get a "function (x, y) {return x + y;}" (unnamed) Although this is a named function:

 function sum(x, y) { return x+y; } 

If you warn (summarize); now you get "function sum (x, y) {return x + y;}" (name is sum)

Named functions help if you use a profiler because the profiler can tell you the runtime of the sum ... iterator instead of the runtime of unknown functions ... etc.

Answer 6

here is another example: function sayHello (name) {alert ('hello' + name)}

Now, suppose you want to change the onclick event of a button, for example, it says "hello world"

you cannot write:

yourBtn.onclik = sayHello ('world') because you must provide a link to the function.

then you can use the second form: yourBtn.onclick = function () {sayHello ('workld'); }

Ps: sorry for my bad english!

Answer 7

They mean the same thing. It is just syntactic sugar. The latter is IMO, more revealing what JavaScript really does; those. a “sum” is simply a variable initialized by a functional object, which can then be replaced with something else:

 $ js js> function sum(x,y) { return x+y; } js> sum(1,2); 3 js> sum=3 3 js> sum(1,2); typein:4: TypeError: sum is not a function js> sum 3