Functions on Functions on Functions

Mary Farner
Nov 2 · 5 min read

If you’re used to Javascript, you know that functions are pretty flexible. They’re “first-class citizens” of the language which means:

  • We can store them in a variable
  • We can store them in data structures, such as an array
  • We can use a function as a return value in another function
  • We can pass a function as an argument to a function

Wow, that’s pretty meta.

And furthermore, we can sort of do whatever we want to functions. That is, a function doesn’t really care how many arguments we define it to receive versus how many arguments we give it when we invoke the function. Javascript will just do its best to make do with what it’s given, and the result can be really helpful, or super unexpected. In most other languages, we get and error if we don’t pass the expected number of arguments, but Javascript just sort of goes with the flow.

For example, take a simple function that receives three numbers, multiplies them together, and then returns the result. If you pass it too many arguments, it will just take the first three, multiply them happily, and ignore the rest. If you only give it two arguments, it will assign the third one to a value of ‘undefined’ and return NaN (because a number x undefined is “not a number” of course!)

Normal functions in Javascript

Ok, so we’ve established that Javascript functions are flexible and weird. It’s not surprising, then, that we can name and declare functions in multiple different ways.

First, the good old “normal” way. The function keyword, followed by a name for our function, and parentheses containing any arguments, with the body of the function wrapped in {curly braces}:

A “normal” function declaration

Simple. Makes sense, right? Javascript loves to be confusing, though, so we can also have anonymous functions, for simple one-time use such callbacks:

An undefined function passed as a callback to forEach()

And we can even store those anonymous functions as a variable (which effectively no different than naming the function):

Storing a function in a variable

Functions can also be declared using something called arrow notation:

Arrow function decalration

This notation doesn’t use the reserve word, function, rather the little => after the arguments indicates that we are defining a function. The arrow function is invoked just like a normal function with parentheses, but arrow functions do have a bit more flexibility than regular functions when declaring them:

  1. We can omit the {curly braces} on the body of an arrow function if it is written on one line. In this case, we also leave off the return word, and it is implied that the first (and only) line is the return value:
An arrow function without braces or explicit return

2. We can also leave off the curly braces and replace them with parentheses if we have a on-line body, which allows us to break the lines up for readability. Note, this method also omits the return word:

An arrow statement with parantheses

3. If there is only one argument, we also don’t need to wrap it in parentheses! This can lead to some pretty cryptic-looking function declarations:

An arrow functions with a single argument

Besides looking short and sexy, arrow functions do provide us with some access ands abilities that standard functions do not. Most notably, arrow function’s handle the this keyword differently than standard functions.

Remember, in a standard function, this represents the object that called the function. W3 Schools gives a great example. In this case, we see that this is the window for the first listener, and the button element for the second listener:

When the page is loaded, the window element is already shown on the page. when we click the button, the button element is appended:

When a function calls another function, the inner function normally defaults to having this represent the global scope. So below, the inner function actuallyBark() doesn’t know what the .name attribute is, because this is scoped to the global window:

We can get around this by binding the inner function to the function that calls it. Then this represents the same object as the outer function:

But arrow functions do retain the value of this from the outer function, allowing us to avoid using bind() completely:

AMAZING!

Besides the binding issue, we mainly use arrow functions because we are lazy and don’t want to type braces and words, or for readability. A common place we utilize it for both of those reasons is with fetch().then():

This allows us to get it all in one line of code with minimal words, so that we know exactly what we are doing and why.

Overall, it’s pretty clear that you can almost do whatever you want when declaring Javascript functions. There isn’t one way that’s better than another in general, you should just pick whichever one suits your use case the best, and more importantly, whichever one you are most comfortable with. When in doubt, write it out.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade