Arrow functions are anonymous functions that offer many benefits. They come as a new feature of Javascript (ES6 version) and are a more compact alternative to normal functions. Put simply, they make our functions more concise.
A short example
Let’s compare a normal function with an arrow function. For this, we create one that sums two items and returns their sum. As a normal function, we would write it like this:
function createSum(a,b){
return a + b
};
The arrow function becomes :
const createSum = (a,b) => a + b;
You see, arrow functions are more concise and compact. They are also called “fat functions” because they use a token “=>” that looks like a fat arrow. They are the most used feature of ES6 according to 5000+ Javascript developers. ( The JavaScript Developer Survey)
How to write an arrow function
The way we write arrow functions is different from normal functions. Let’s see some examples.
Arrow function with no parameters
You can write an arrow function this way:
const sayHello = () => {
console.log("Hello World!");
}
An arrow function is anonymous. This means if you want to give it a name, you will store it in a variable. Other than that, you cannot declare it with a name using a normal function like:
function sayHello() {
console.log("Hello World!");
}
But, if there’s only one line inside the arrow function, you can make it even shorter. So our sayHello function becomes:
const sayHello = () => console.log("Hello");
By default, arrow functions will return.
For example:
const sayHello = () => "Hello World";
This will return a “Hello World” string.
Arrow function with parameters
If you have a parameter inside your function, you put it in parenthesis. For example:
const sayHello = (name) => `Hello ${name}!`;
sayHello("Mouha") //=> will return "Hello Mouha!"
Remember, there is no need to put an explicit return statement if you want to return only one line. Yet, if your function has many lines, you would need an explicit return statement.
As well, if you have many parameters in your function, you would put them inside the parenthesis.
For example: const calculateSum(a,b,c) => a + b + c ;
This will by default return the sum of a, b, and c.
Using the Object Literal Synthax
Using arrow functions is simple. But, what if you want to return an object instead? Let’s see it by applying our logic.
Let’s say we want to return an object with a name and an email like this:
{
name: “Mo”,
email: “mo@email.com”
}
If you want to return this object from an arrow function, you have to wrap it in parenthesis.
Otherwise, it won’t work. For example, this will return a syntax error: const createUser = (name, email) => {
name: name,
email: email
}
Why? Because your arrow function will consider the brackets as the function's brackets. Not the object's brackets. So the body of the function here is not an object but this:
name: name,
email: emailSo you have to wrap the object around parenthesis to make it work, like this: const createUser = (name, email) => ({name: name, email: email});
That way, your function will know it has to return what’s inside the parenthesis, hence the object.
Originally published at https://codewithmo.com on January 8, 2020.
