What is the difference between a function expression vs declaration in JavaScript? [duplicate]

  1. Home
  2. javascript
  3. What is the difference between a function expression vs declaration in JavaScript? [duplicate]

This question already has an answer here:

What is the difference between the following lines of code?

//Function declaration
function foo() { return 5; }

//Anonymous function expression
var foo = function() { return 5; }

//Named function expression
var foo = function foo() { return 5; }
  • What is a named/anonymous function expression?
  • What is a declared function?
  • How do browsers deal with these constructs differently?

What do the responses to a similar question (var functionName = function() {} vs function functionName() {}) not get exactly right?

First answer

Second answer

Regarding 3rd definition:

var foo = function foo() { return 5; }

Heres an example which shows how to use possibility of recursive call:

a = function b(i) { 
  if (i>10) {
    return i;
  }
  else {
    return b(++i);
  }
}

console.log(a(5));  // outputs 11
console.log(a(10)); // outputs 11
console.log(a(11)); // outputs 11
console.log(a(15)); // outputs 15

Edit:
more interesting example with closures:

a = function(c) {
 return function b(i){
  if (i>c) {
   return i;
  }
  return b(++i);
 }
}
d = a(5);
console.log(d(3)); // outputs 6
console.log(d(8)); // outputs 8

Third answer

The first statement depends on the context in which it is declared.

If it is declared in the global context it will create an implied global variable called “foo” which will be a variable which points to the function. Thus the function call “foo()” can be made anywhere in your javascript program.

If the function is created in a closure it will create an implied local variable called “foo” which you can then use to invoke the function inside the closure with “foo()”

EDIT:

I should have also said that function statements (The first one) are parsed before function expressions (The other 2). This means that if you declare the function at the bottom of your script you will still be able to use it at the top. Function expressions only get evaluated as they are hit by the executing code.

END EDIT

Statements 2 & 3 are pretty much equivalent to each other. Again if used in the global context they will create global variables and if used within a closure will create local variables. However it is worth noting that statement 3 will ignore the function name, so esentially you could call the function anything. Therefore

var foo = function foo() { return 5; }

Is the same as

var foo = function fooYou() { return 5; }
Reprint:https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip
Spread the love

Related articles

Comments are closed.