2 minutes
Contact me

funky functions part 2

In the last funky functions I looked at the silently passed argument, argument. I had full intention to talk about the other implicit argument this in part 2 but I found myself going down a different path.

There are so many ways to invoke functions in JavaScript I thought I better take a closer look at that first. JavaScript implements the idea of first-class functions i.e. they are given the same privileges as objects, in fact they are objects. They can be passed into other functions as arguments, they can be stored in variables or as methods on objects and even returned from other functions.

This is extremely cool and confusing at the same time, for me anyway. I intend to rectify the second part of that statement. So, let's look at some ways we can define and invoke functions.

I'm looking at six different ways to add two numbers together in this example. As you lookthem, make a mental note of the differences,they are subtle.  

Note: There is also a way to create a function using 'new' ( e.g. fun = new function; ) however I believe it has depreciated/is more of a corner feature of JavaScript, you might see it only occasionally.For that reason I choose not to look at it in anymore detail( although one day I may have to ) .

As you can see there is plenty of syntax to choose from, they all have their own use cases, which cannot really be shown in a simple add function.

Let's look at a few of the more common ones in a little more detail

function declaration

Firstly we use the 'function' keyword, followed by a compulsory function name, a list of parameters in a pair of parenthesis (param1, param2,...etc) and a pair of curly braces {...} that defines the body code ( the do stuff part ).

The function declaration creates a variable in the current scope identified as the function name. The variable contains the function object.

The function variable is moved (or hoisted) to the top of the current scope, this allows functions to be called before they have been declared, more on this at another time.

Note: The function object holds its name in the 'name' property of itself. This is something that can viewed and used in debugging.

function expression

A function expression starts with the function keyword, any parameters then an optional name, followed by the body of the code. function( param1, param2 ...etc){..//do stuff...}; .

This function expression can be:

  • Assigned to a variable var expression = function( param1, param2 ...etc){..//do stuff...}; .
  • Assigned as method on a object method : function( param1, param2 ...etc){..//do stuff...}; .
  • Used as a callback .reduce(function( param1, param2 ...etc){..//do stuff...}); .

arrow function

The arrow function uses parenthesis for the parameters ( param1, ..etc), followed by a fat arrow => and a pair of curly braces again for the body.

An example:
var multiply = (x, y) => x*y;

Another One:

A little something extra

Here's something I made for my own amusement:

See the Pen Different types of functions in JavaScript by Adam Harpur (@harps116) on CodePen.

Some additional resources: