You need function declarations if you want to follow the pattern where you put helper functions at the end of a file but call them earlier in the file. That’s sort of an antiquated non-JS pattern at this point though. Lately, I have gravitated towards declarations for top-level functions, but arrow expressions for in-line callbacks and such. It’s all just style choices though.

Generally I prefer the declarative syntax because it's how it's done in most languages, and the less work I have to make for myself writing code in a different style, and the less work other people make for me reading in another style, the better. If you're only working in JS and only plan to ever work in JS, you can do whichever you like, but other multi-lingual devs who have to work on your code one day will thank you for not using language specific features if there isn't a clear advantage to doing so when more generic/portable features exist.

Hi jasonj7, So a function declaration goes like this: declaration.js function square(num) { return num * num } And a function expression goes like this: expression.js const square = (num) => num * num As you can see in the code above, function expressions occasionally allow you to write code that is shorter. But the real difference is that function declarations are hoisted, while expressions are not. This means that even if your function isn’t declared until line 327, you can still call the function on line 5, because the JavaScript interpreter basically looks for all those declarations first and remembers them. If you tried to invoke a function defined through a function expression before the expression had been encountered in code, you’d get a variable “name-of-function” not defined error. Does that make sense? Hopefully it does and that helps to guide you on when to use one versus the other, but a lot of the time it’ll be your personal preference on which version to use.

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.

They're actually really similar. How you call them is exactly the same.The difference lies in how the browser loads them into the execution context.

Function declarations load before any code is executed.

Function expressions load only when the interpreter reaches that line of code.

So if you try to call a function expression before it's loaded, you'll get an error! If you call a function declaration instead, it'll always work, because no code can be called until all declarations are loaded.

Example: Function Expression

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

Example: Function Declaration

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; } 

As for the second part of your question:

var foo = function foo() { return 5; } is really the same as the other two. It's just that this line of code used to cause an error in safari, though it no longer does.