Brief Intro to Arrow Functions

Hey Devvies; technical blog post number two coming your way.

Evidently, one of the most celebrated additions to JavaScript a short three or so years ago (version ES6/ES2015) was the introduction to the Arrow Function. (I've also seen it referred to as the fat arrow function.)

A simple explanation of what an arrow function accomplishes is that it cleans up your function code to be more concise, less messy looking by using shorter syntax.

Take this simple function to double a number:

const double = function (num) {
    return num * 2;
    }

double(3);
// output is 6

double (12);
// output is 24

Now lookee what an arrow function can do:

const doubleArrow = num => num * 2;

doubleArrow(3);
// output is still 6!

doubleArrow(12);
// output is still 24!

The doubleArrow function did the exact same thing as what the double function did but in one line of code instead of three! That's amazing!

That was a very simple example using just one parameter. Let's do another very simple example but with two parameters this time, just for kicks.

// regular function

const sum = function (num1, num2) {
    return num1 + num2;
    }

// arrow function version

const sumArrow = (num 1, num2) => num1 + num2;

sum(1, 10);
// output is 11

sumArrow (1, 10);
// output is still 11

Pretty cool! The only difference between the double and sum syntax is we added the parentheses back in when there was more than one parameter to apply. You can still include the parentheses if there is just one parameter, but they're optional.

There are some other cool features of the arrow function that slightly differ from regular functions (most notably while using the 'this' keyword), but we can delve into that in a later post. :)

Comments

[tux0r]

I've also seen it referred to as the fat arrow function.

And it is actually called a lambda expression. :-)

[Joe Zack]

Actually it's not so simple. JavaScript supported lambda expressions long before fat arrow functions came along.

The functions in this article are not anonymous and they are not passed around as data so I'm not certain if they would technically be considered lambda expressions.

I am certain, however, that the functions in this article are colloquially referred to as "arrow" or "fat arrow" functions in the JavaScript community.

[tux0r]

That does not mean that the JavaScript community knew what they're talking about. ;-)

Additionally to my personal and probably debatable perception that referring to a certain lambda notation as an "arrow function" because an arrow is involved is like referring to a C pointer as an "asterisk variable" because an asterisk is involved, I would say const whatever = num => num * 2 is a lambda function because the return value is used for output, not just discarded...?

[Joe Zack]

The technical distinctions are tricky, so I really can't say for sure. We might need to dig up Alonzo Church to settle the matter. :)

I do think that arrow functions are not always lambda expressions, and lambda expressions are not always arrow functions. So arrow != labmda.

Here are a couple interesting examples that show some of the gray areas though:

const whatever = num => num * 2

anonymous: true (edit: it's an anonymous function set to a variable, see comment below)
arrow: true
lambda: ...I don't think so

It's named, so what is the distinction between this syntax and a "normal" function declaration? Both can be passed around as first class citizens so what is it about the arrow function that would make it a lambda, but not the function declaration?

var myArrays = [[1,2,3], [4,5,6]]
myArrays.forEach(array => array.splice(0,1))

anonymous: true
arrow: true
lambda: ...I think yes?

In this case, the return value is discarded but I think that arrow function still qualifies as a lambda expression because it's anonymous and because of how it's used. I used "splice" in this example because it does mutate the array, but even if it were a "slice" instead I think it would have to be considered a lambda...though, not a useful one!

fetch('https://dev.to').then(function(response) { console.log(response); })

anonymous: true
arrow: false
lambda: ...I think yes?

This uses an old skool anonymous function, it's not an arrow function but I believe it's still a lambda expression.

Edit: typo, adding non-arrow function

[Evaldas Buinauskas]

Apologies my question but in your first example. Isn't it just a anonymous function that has been assigned to a variable?

[Joe Zack]

Well...yes! Good call. I'll revise my comment above.

I know there is a difference between the function declaration and function expressions, and in the example I gave it's definitely not using the function declaration.

As for what technically counts as being a lambda expression or not...I really don't know.

[Evaldas Buinauskas]

Quite hard to tell it seems. Although, this is a good summary

[Dmitry]

Thank you for writing!