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. :)
Top comments (8)
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 * 2anonymous: 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
Apologies my question but in your first example. Isn't it just a anonymous function that has been assigned to a variable?
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.
Quite hard to tell it seems. Although, this is a good summary
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.
Thank you for writing!