I use function declarations, expressions and object literals just about everyday. While you can use both function declarations and expressions for the same purpose, I often get confused on what the difference is. Seeing object literals confuse me as well because you can write a function within an object wrapped in a var. Hopefully this post can help and guide you though this confusion.

Function Declarations

When you’re starting out in Javascript and introduced to functions, you were most likely introduced with this way of writing a function:

 function foo () { // do stuff }

What you are doing here is how it’s described in the name, you are declaring that you are writing a function. This is like declaring you are writing a variable or var bacon;.

Function Expressions

Function expressions are a little different in syntax. They are usually defined in a variable.

 var foo = function () { // do stuff }

Both do practically the same thing, you can write out the same code nested within those functions. You can call both functions the same way. However, one thing that I’ve noticed while searching and observing is this:

 function foo () {}
 var bar = function () {}
 alert(typeof foo) // function
 alert(typeof bar) // undefined

Interesting, so the function expression isn’t recongnized because it hasn’t been declared? I’m wondering if this means that function foo() {} loads when the script is executed? While var bar = function(){} does not get executed the same way? If you wanted to play it safe (for older browser) support, I would stick with the function declaration. It is a really picky thing really since the both provide the same purpose, however the older way can be safer.

Object Literals

The reason I stuck object literals in this post is because I get confused when a function is defined in one like so:

 var foo = {
    bar : function () {
        // code
    }
 }

Essentially object literals are objects that provide zero or more properties that contain a value. A resource explaining object literals can be found here

Usually you would write object liteals like this:

 var foo = {"language" : "javascript", "framework" : "angular"}

I’m still very new and fresh to the idea of object literals so I’m still trying to wrap my brain around them. I do know that you would only write a function this way bar : function () {} only if you are using it in an object literal (I can explain that when I get a change to update this post).

Thoughts

Just wanted to share my thoughts on this topic. Still trying to wrap my head around the differences of each way of writing a function. Feel free to provide feedback and comments.

Until next time, cheers!