function Smackdown:function Statement vs. function Expression

I ' ve recently been reading ' javascript:the good Parts, ' by Douglas Crockford. This concise book defines a subset of core JavaScript that's robust and powerful: the good Parts. Appendix B identifies the Bad Parts, and sets our competitors -the function statement and the FUNCT Ion expression -apart.

ROUND One-looks (CAN be deceiving) Function Statement

Our competitors is alike, but the function statement have a distinguishing characteristics:the declarative keyword function always comes first, and you must name it. Here's what it looks like:

What we seefunction FuncName () {}

　　

Pull back the curtain, though, and the function statement expands to a variable with a function value:

Under the Hoodvar funcName = function funcName () {}

　　

Function Expression

Absent The mark of the function statement, you have the function expression. The function expression is optionally named (but normally anonymous), e.g.:

Stores ref. to anonymous function-a variable var funcref = function () {};//Stores ref. To named function in a Variab Le var funcref = function FuncName () {};

　　

winner:function Expression. Crockford ' s manual argues the case for clear code. The function expression is an clearly recognisable as what it really are (a variable with a function value).

ROUND-(unpredictable) behaviourfunction Expression

Variables is subject to a thing called hoisting. Irrespective of their apparent place in the flow of things, their var part was removed and hauled to the top of a containin G (whether function or global) scope, and initalised with undefined :

What we seevar funcref = function () {};//under the Hoodvar funcref = Undefined;funcref = function () {};

　　

Function Statement

The function Statement-while just shorthand for a var statement with a function Value-is treated differently:the Whol E lot is hoisted. For the reason, you can call a function statement before and declared it in your code:

Console.log (statement ()); I am a function statement.console.log (expression ()); Typeerror...function statement () {    return "I am a function statement."} var expression = function () {  return "I am a function expression.";}

　　

winner:function Expression. Hoisting is already a behind-the-scenes behaviour that can cause head scratching. The particular behaviour of the function statement can leads to more furious head scratching.

ROUND Three-super powersfunction Statement

The function statement was widely used and performs just fine, but it had an obvious limitation:you can ' t immediately invo Ke it.

Function Expression

The function expression is more flexible, e.g.:

Executed immediately (function () {   alert ("I am not a function statement."); ());

　　

Parentheses is required to nudge function out of statement position (can ' t immediately invoke), and into expression position (Can immediately invoke). Crockford recommends grouping the entire invocation inside parentheses for Clarity-what ' s important here is the product Of the invoked Function-otherwise, Crockford argues, "You ' ve got these things hanging outside of it looking like dog bal ls. "

Winner:function Expression.

FINAL score:function Expression Wins 3-0

Conclusion-i Heart A Good MANUAL

It turns out the function statement came first; The function expression is added to JavaScript later. The result is a very similar ways of defining JavaScript functions. Logically, the addition is intended to improve the language, and, in this case, it would seem this end is achieved.

If you haven ' t already seen it, here's a particularly entertaining speech () Crockford gave on his approach to JAVASCR Ipt:

function Smackdown:function Statement vs. function Expression