Javascript Create Functions Rundown

Here’s the rundown on the standard forms that create functions for quick reference:

  • Function Declaration

  • “Anonymous” function Expression (which despite the term, sometimes get names)

  • Named function Expression

  • Accessor Function Initializer (ES5+)

  • Arrow Function Expression (ES6+)

  • Constructor and Method Declaration (ES6+)

1. Function Declaration

The first form is a function declaration, which looks like this:

A function declaration is a declaration; it’s not a statement or expression. As such, you don’t follow it with a ; (although doing so is harmless).

A function declaration is processed when execution enters the context in which it appears, before any step-by-step code is executed. The function it creates is given a proper name (x in the example above), and that name is put in the scope in which the declaration appears.

Because it’s processed before any step-by-step code in the same context, you can do things like this:

Also because it’s not part of the step-by-step execution of the code, you can’t put it inside a control structure like try, if, switch, while, etc.

Some engines will handle the above even though it’s invalid, by rewriting it as a function expression on-the-fly. There’s talk of adding a function statement to the next spec (ECMAScript6) to codify that. But with current engines, it will not work reliably; don’t do it.

2. “Anonymous” function Expression

The second common form is called an anonymous function expression:

Like all expressions, it’s evaluated when it’s reached in the step-by-step execution of the code.

In ES5, the function this creates has no name (it’s anonymous). In ES6, the function is assigned a name if possible by inferring it from context. In the example above, the name would be y. Something similar is done when the function is the value of a property initializer. (For details on when this happens and the rules, search for SetFunctionName in the ES6 draft specification — it appears all over the place.)

3. Named function Expression

The third form is a named function expression (“NFE”):

The function this creates has a proper name (w in this case). Like all expressions, this is evaluated when it’s reached in the step-by-step execution of the code. The name of the function is not added to the scope in which the expression appears; the name is in scope within the function itself:

Note that NFEs have frequently been a source of bugs for JavaScript implementations. IE8 and earlier, for instance, handle NFEs completely incorrectly, creating two different functions at two different times. Early versions of Safari had issues as well. The good news is that current versions of browsers (IE9 and up, current Safari) don’t have those issues any more. (But as of this writing, sadly, IE8 remains in widespread use, and so using NFEs with code for the web in general is still problematic.)

4. Accessor Function Initializer (ES5+)

Sometimes functions can sneak in largely unnoticed; that’s the case with accessor functions. Here’s an example:

Note that when I used the function, I didn’t use ()! That’s because it’s an accessor function for a property. We get and set the property in the normal way, but behind the scenes, the function is called.

You can also create accessor functions with Object.defineProperty, Object.defineProperties, and the lesser-known second argument to Object.create.

5. Arrow Function Expression (ES6+)

ES6 brings us the arrow function. Here’s one example:

See that n => n * 2 thing hiding in the map() call? That’s a function.

A couple of things about arrow functions:

  1. Their this is lexically bound, not determined when they’re called. This means that the this within them is the same as the this where they’re created.

  2. As you’ll have noticed with the above, you don’t use the keyword function; instead, you use =>.

The n => n * 2 example above is one form of them. If you have multiple arguments to pass the function, you use parens:

(Remember that Array#map passes the entry as the first argument, and the index as the second.)

If you’re doing more than just a single expression, use {} as normal:

6. Constructor and Method Declaration (ES6+)

ES6 brings us class syntax, including declared constructors and methods:

There are two function declarations above: One for the constructor, which gets the name Person, and one for getFullName, which is a function assigned to Person.prototype.

Resource: Stackoverflow

Leave a Reply

Your email address will not be published. Required fields are marked *