JavaScript Function Define Methods

Here are ALL the methods to define a Javascript function with explanation. Below are in order to more accurately classify the function declarations and expressions.

1. Function Declarations:

Named Function Declaration

The “classic” declaration, which works well for simple uses. Functions declared like this are “hoisted”, meaning, the javascript engine reads all these declarations first before executing any of the rest of the code. The declaration statement stands alone, and cannot be combined with other expressions. Also, notice that this declaration does not need to be followed with a semicolon.


2. Function Expressions:

Function expressions are very flexible, and can used in many contexts. This list aims to demonstrate that flexibility, and show use-cases for each example. Also: here’s a great article on the differences between function declarations and expressions.

  1. Variable Assignment

    This is functionally equivalent to the Function Declaration above, except this variation is NOT hoisted. The name of our function (add) cannot be called directly (see below), but it can come in handy when debugging:


  2. Immediately invoked

    This function is immediately invoked, meaning that it is defined and called at the same time. The function’s name is only available within its execution scope (defined by the parentheses), so it cannot be called later in the program.

    Immediately invoked functions can be used to encapsulate a program, preventing it from polluting the global namespace (here’s a simple example of that).


  3. Assigned and Invoked

    This is a combination of the variable assignment expression and the immediately invoked function (both demonstrated above). One neat application for the named variety of this is to make recursive functions more readable, by substituting arguments.callee with your function name.


  4. Property Assignment

    By assigning functions (either named or unnamed) to properties of objects, we define methods on those objects. This has many applications in object oriented programming. We can also use this to namespace our functions, and keep them out of the global scope.

    Here’s how we would call the methods defined in the examples:


  5. Passed as Argument

    Function names in ECMAScript are nothing more than variables, meaning we can pass them around like variables. Many methods (like setTimeout()) take functions as arguments. This is a common pattern for defining callbacks.

    In these examples, we define them in line, but we could also pass in predefined functions.


  6. Returned (closure)

    Functions can be returned from other functions. This lets us do clever things like the following (picking up from the example):

    Each person can increment their own count variable despite the fact that it originated outside the scope of the count() function. This is called a closure. Here’s some more information on Javascript closures, if you’re curious.


  7. Arrow Functions

    Arrow (or “fat-arrow”) functions are newly introduced as part of the ES6 specification. As such, they are only implemented in the most modern browsers (check a compatibility table for specifics). This example:

    is functionally equivalent to:

    Arrow functions are function expressions, and as such, they are usable in all the contexts shown above (variable assignment, passed as an argument, etc.). You may see slight syntactical variations across uses (as shown with in the example with optional brackets). Here’s a good blog post that explains the syntax and it’s variations.


3. Function Constructor

  1. Function Constructor

    Defining functions with the Function constructor is less performant than the other methods, so I wouldn’t recommend this option. However, it is useful in demonstrating that in Javascript, functions are “just objects”.


  2. Constructor with apply()

    This uses the apply() method to call the constructor of the Function object and create a function. The function can then be run with sum(1,2);. Hard to think of a practical application for this one, but it could be used in rare cases.


  3. Immediately Invoked Constructor with apply()

    This uses the apply() method with the constructor of the Function object to immediately invoke the function we defined. Again, it’s hard to think of a practical application for this one, but hey, it works as expected.


Resource: Bryanbraun

Leave a Reply

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