9

As seen here, there are some differences between function declaration and function expression.

A function expression has one disadvantage vs a function declaration, if called before its been declared it will give an error.

I would like to know only the advantages to use a function expression as I only seem to see the disadvantage I just named above. I possible with an example...

function expression:

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; } 

function declaration:

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; } 
Community
  • 1
  • 1
Daniel Ramirez-Escudero
  • 3,425
  • 9
  • 40
  • 71
  • possible duplicate of [var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) – David says reinstate Monica Apr 11 '14 at 12:34
  • That's to do with "hoisting". For function declarations the whole function is hoisted. For function expressions only the variable is hoisted. – Andy Apr 11 '14 at 12:36
  • The point is, the question is not well formulated. It is more like a view out of the box. The advantages are the disadvantages (at the same time) in different situations. So the question should be, which are the situations for... – perhelion Feb 08 '20 at 19:45

3 Answers3

3

My Experiment: function expression we need to use when use that function in different scopes. For example.

function outer(){
       function inner(){

       }
}
outer();
inner();// Error ...calling inner..will not be found..

-this will not work. But

var inner;
function outer(){
 inner=function(){

       }
}
outer();
inner();// will work

-this will work

Tuhin
  • 2,960
  • 1
  • 9
  • 21
  • 1
    Thank you for the xlear visual example, but what advantage there would be to fetch inner once inside function outer. Wouldn't it be better to create an object or create another expression as function inner()? I don;t get why you would do the second example, in a practical world – Daniel Ramirez-Escudero Apr 11 '14 at 13:00
  • Ahhhh. This is just an example. But when we deal with javascript closure, we need this kind of technique. @DanielRamirez-Escudero – Tuhin Apr 11 '14 at 13:06
  • Please go through will help you: http://www.javascriptkit.com/javatutors/closures.shtml – Tuhin Apr 11 '14 at 13:07
2

Along with that very good answer, the only advantage I can see is dynamically changing a function call.

For example this code :

function foo(){
    console.log('foo');
}

function bar(){
    console.log('bar');
}

var myFn = foo;

myFn();

setInterval(function(){
    if(myFn === foo) myFn = bar;
    else myFn = foo;
}, 5000);

setInterval(function(){
    myFn()
}, 6000);

It will never log the same thing since you reassign a global variable, every innerscope function will change while this code :

function foo(){
    console.log('foo');
}

setInterval(function(){
    function foo(){
        console.log('Changed foo');
    }

    foo()
}, 5000)

setInterval(function(){
    foo()
}, 5000)

Will log 2 different things. You can only change the current scope function, not the global.

Community
  • 1
  • 1
Karl-André Gagnon
  • 32,531
  • 5
  • 47
  • 70
0

Generally you should be using declared functions any-time you need a function to be accessible in multiple places.

In javascript, declaring a function is simply syntactic sugar for foo = function(){...}.

Both have their uses, with both having subtle (hard to quantify) advantages in individual situations.

Generally, the advantage is that it's a "throwaway" function. It exists to do a single, quick job, and to give it its own separate declaration would be a waste of time and space. There isn't anything an expressed function can do that a declared function can't. Like I said, it's subtle and hard to quantify

Tom M
  • 802
  • 2
  • 7
  • 21
Glitcher
  • 1,048
  • 6
  • 14
  • I see that most times I will use a declared function, but I want to know what advantages there could be to use a expression instead of a declared function. – Daniel Ramirez-Escudero Apr 11 '14 at 12:43
  • 1
    The advantage is that it's a "throwaway" function. It exists to do a single, quick job, and to give it its own separate declaration would be a waste of time and space. There isn't anything an expressed function can do that a declared function can't. Like I said, it's subtle and hard to quantify. – Glitcher Apr 11 '14 at 12:51
  • 1
    "*In javascript, declaring a function is simply syntactic sugar for foo = function(){...}.*" no, that is not what syntactic sugar is. Syntactic sugar can be taken away and the operation would be left unchanged, whereas `foo = function() {}` has *different* semantrics to `function foo() {}`. Namely, it's how hoisting works - a declaration is always hoisted which makes the code behave differently, e.g., `foo(); function foo() {}` is correct. A more subtle change is `if (false) function foo(){}` which is *still* declared and hoisted despite the `if` statement not executing. – VLAZ Mar 25 '19 at 20:29