{"id":33,"date":"2016-06-29T19:45:36","date_gmt":"2016-06-29T19:45:36","guid":{"rendered":"http:\/\/www.dimlucas.com\/?p=33"},"modified":"2016-11-18T10:27:05","modified_gmt":"2016-11-18T10:27:05","slug":"function-expressions-vs-function-declarations","status":"publish","type":"post","link":"https:\/\/www.dimlucas.com\/index.php\/2016\/06\/29\/function-expressions-vs-function-declarations\/","title":{"rendered":"Function Expressions vs Function Declarations In JavaScript"},"content":{"rendered":"

Hello everyone! Today I’m going to talk to you about function expressions, function declarations what’s best to use, when to use and more importantly how to avoid unexpected behavior when using them. A lot of newcomers to JavaScript find this confusing but I’m here to convince you that it’s pretty simple:<\/p>\n

This is a function declaration:<\/p>\n

\r\nfunction foo(){\r\n\tconsole.log("I am foo");\r\n}\r\n<\/pre>\n
This on the other hand is a function expression:<\/p>\n
\r\nvar foo = function(){\r\n\tconsole.log("I am foo");\r\n}\r\n<\/pre>\n
In either case you execute foo in the same way:<\/p>\n
\r\nfoo();\r\n<\/pre>\n
The same thing applies if foo takes one ore more parameters:<\/p>\n
\r\nfunction foo(param1, param2){\r\n\t\u2026.\r\n}\r\n\r\nvar foo = function(param1, param2){\r\n\t\u2026.\r\n}\r\n\r\n<\/pre>\n
Then you can call it like this:<\/p>\n
\r\nfoo("bar", 3.14);\r\n<\/pre>\n
So I can use whatever I like best and there is no real difference between the two besides the syntax used during the function definition?
\nThe answer is No<\/p>\n
Consider the two following examples:<\/p>\n
Example 1:<\/p>\n
\r\nfoo();\r\n\r\nfunction foo(){\r\n\tconsole.log("I am foo");\r\n}\r\n<\/pre>\n
Output:<\/strong> “I am foo”<\/p>\n
Example 2:<\/p>\n
\r\nfoo();\r\n\r\nvar foo = function(){\r\n\tconsole.log("I am foo");\r\n}\r\n<\/pre>\n
Output:<\/strong> Uncaught TypeError: foo is not a function<\/p>\n
Why is this happening? The reason has to do with hoisting. When you use a function declaration you can imagine that during the first pass of the compiler the function and variable declarations will be moved to the top of the enclosing function (that’s not exactly what really happens but it’s very convenient to imagine it like that). When you use a function expression, only the variable declaration will be “moved” to the top of the enclosing function. You can visualize the result of hoisting in both examples like this:<\/p>\n
Example 1 (after hoisting):<\/p>\n
\r\nfunction foo(){\r\n\tconsole.log("I am foo");\r\n}\r\n\r\nfoo();\r\n<\/pre>\n
Example 2 (after hoisting):<\/p>\n
\r\nvar foo;\r\n\r\nfoo();\r\n\r\nfoo = function (){\r\n\tconsole.log("I am foo);\r\n}\r\n<\/pre>\n
As you can see in the second example when the engine executes the statement ‘foo();’ it does not possess sufficient knowledge about foo. At that time it only knows that foo is a variable, the actual assignment takes place later in the code.<\/p>\n
This is actually the most important thing between function declarations and function expressions<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello everyone! Today I’m going to talk to you about function expressions, function declarations what’s best to use, when to use and more importantly how to avoid unexpected behavior when using them. A lot of newcomers to JavaScript find this confusing but I’m here to convince you that it’s pretty simple: This is a function […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[12,11,10,4,3],"_links":{"self":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/33"}],"collection":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":3,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}