Arrow Functions
Arrow functions became part of the JavaScript specification with the release of ECMAScript 2015, or, as many of us know it, ES6. Let’s take a look at what they are and how they work.
Functions
First, let's talk about functions. You probably know what they are, but, if you don't, here's a quick overview:
Functions can be described as “subprograms” that perform some operation(s). They can take arguments, which are values that the function can use in its operations. A function finishes its execution by returning a value. If the value to be returned is not specified, the function returns undefined.
//This is where we declare our functionfunction hello(name) { //the function takes a name parameterreturn "Hello, " + name; //it outputs the word hello, followed by the value of name}console.log(// This is our function callhello("Earth") //We are passing "Earth" as the value of the name parameter);// Run the code to see the output!
Arrow functions
Arrow functions are a more concise alternative to regular function expressions. Let us write our hello function using arrow syntax:
let hello = name => "Hello, " + name;console.log(hello("Earth"));
That was quite a bit shorter, right? If an arrow function takes only one parameter, we don’t even need the parentheses! Note, however, that for any other number of parameters (including none at all) the parentheses are necessary:
let hello = (firstName, lastName) => `Hello, ${firstName + " " + lastName}`;console.log(hello("Planet", "Earth"));
You might have also noticed the lack of curly braces, which usually enclose the function body. With arrow functions, if all we need to do is return a value, the braces are not needed. However, if we need to perform some operation before returning, the braces are needed to mark the beginning and end of the function body:
let hello = (firstName, lastName) => {let fullName = firstName + " " + lastName;return fullName;}console.log(hello("Planet", "Earth"));
Another thing to keep in mind is that the parser will not differentiate between the braces of an object literal and a block statement. That is why the following code will not work as expected:
let getObject = () => {name: "Earth", planet: true}console.log(getObject());
If we want to immediately return an object literal outside of a block statement, we need to wrap it in parentheses:
let getObject = () => ({name: "Earth", planet: true});console.log(getObject());
Now, you might think that arrow functions don’t seem much more concise than regular functions. That is because all we have written up until now are very simple functions. Arrow functions really shine as callbacks. To illustrate this, I will create and handle a Promise. Please note that this is not a valid use of a Promise. I am just trying to make a point.
function isEven(x) {return new Promise(function(resolve, reject) {if(!(x % 2)) resolve("EVEN");else reject("ODD");});}isEven(8).then(function(res) {console.log(res);}).catch(function(res) {console.log(res);});
That is pretty verbose, right? Let’s rewrite our code with arrow functions:
let isEven = x => new Promise((resolve, reject) => {if(!(x % 2)) resolve("EVEN");else reject("ODD");});isEven(8).then(res => console.log(res)).catch(res => console.log(res));
Now, that is better. If you find the new code a bit difficult to read, don’t worry. All you need is some practice using arrow syntax 😃
There is more…
Conciseness is not the only thing that differentiates arrow functions from regular function expressions. One other difference is that, unlike their predecessors, arrow functions do not have their own this or arguments. To read more about arrow functions, click here.
A word of caution
Arrow functions are ill-suited for certain things such as object methods. To read more about when you should not use arrow functions, click here.
RELATED TAGS
CONTRIBUTOR
Alina Ene