Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Functions Pass Information Into Functions Function Declarations vs. Function Expressions

When to use function expression Vs. function declaration?

Since function declarations and expressions are almost identical, doesn't it seem logical to use function declarations all the time since they're hoisted to the top?

But JavaScript must have created function expressions for a specific reason?

Can anyone provide an example of when it would be better to use a function expression?

Thanks in advance! =)

2 Answers

Mark Tripney
Mark Tripney
8,666 Points

Hi! Function declarations and expressions differ in terms of hoisting and their effect on scope.

Function declarations are hoisted. This means that the functions are placed in memory before any code is executed. Thus, you can call the function before you declare it in your script; your function declarations have been virtually moved (i.e. 'hoisted') to the top of their scope. There can be various subtle benefits to this β€”Β one simple one is that it can help with the organisation of your code, in that you can place functions where they have the richest context in your script, not necessarily where they have to be in terms of availability.

Since functions expressions are not hoisted, they are run only when the interpreter reaches them. So, consider how this contrasts with your hoisted declarations. Function expressions compel more structured code, in a sense, because you need to be more mindul of order. Function expressions need to exist in code before the point at which they're called and, when you get into higher-order functions (passing functions to functions, returning functions from functions), this is something you really need to look out for. You'll soon encounter callbacks, so keep that in mind for then!

Function expressions can also be called immediately, resulting in so-called IIFEs (Immediately Invoked Function Expressions). IIFEs are useful for callbacks and scope management β€”Β there's no 'pollution' of your global scope because your variable declarations are isolated.

Hope this helps. You'll soon learn more about functions, I'm sure, and this will all make sense!

Jennifer Ciaccio
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Ciaccio
UX Design Techdegree Student 11,137 Points

It seems like its more of what makes most sense in the particular program, or personal style preference.

As Guil explains, doing it as a an expression forces you to put the functions at the begging of the program and gives it a more strict flow. This may make things easier to see right from the get go, and help prevent any possible errors later on that can occur.

I think in most situations, either will work the same way. It really is up to you and whichever method you prefer.