Prerequisites

This blog assumes you are already familiar with few basics like expressions in JavaScript, normal functions in JavaScript and want to learn about arrow functions in order to start using them.

Our approach

We'll see the same functions written in different ways to learn about the differences in syntax.

Main differences

First, let's look at some differences which will be present in every arrow function.

const add = function (a, b) {
    let sum = a + b;
    return sum;
};

const addArrow = (a, b) => {
    let sum = a + b;
    return sum;
};

1. instead of the function keyword we use an arrow (=>) made up of equal sign and greater than sign
2. the arrow comes after the list of parameters

Other differences

Now let's look at some differences which may or may not be present in an arrow function depending upon certain conditions.

While working with libraries like react sometimes beginners wonder why arrow is often followed by parentheses. Let's briefly look at that as well.

const a = function (x, y) {
    return x - y;
}

const b = function (x, y) {
    return (x - y);
};

const c = (x, y) =>  x - y;

const d = (x, y) =>  (x - y);

const e = (x, y) => {
    return x - y;
};

All of the functions above do the same thing.

If your arrow function meets both of these conditions-

1. the function's body isn't wrapped inside curly braces.
2. there is only one expression after the arrow (which may or may not be enclosed in parentheses. parentheses can be safely omitted if that expression can be contained within one line).

Your function will automatically return that one expression written after the arrow.

But if you use curly braces you've opened a code block that can contain one or even more than just one expression, that's why here you'll compulsorily have to use the return keyword to specify which expression you want to return.

Importance of parentheses around arrow function's body

Till now wrapping and not wrapping the returned "single-line expression" within parentheses was making no difference. Now let's look at an example where we want our function to return an object, here the importance of parentheses will shine.

const returnObject = function () {
    return { firstName: "abc", lastName: "def" };
}

Here's a normal function that simply returns an object, now let's try to make an arrow function do the same.

//this will throw a syntax error
const returnObject = () => { firstName: "abc", lastName: "def" };

Writing an arrow function like this is the first thing that used to come to my mind but it throws a syntax error. Why? Because we just learnt that curly braces after arrow opens a code block. We never created an object but we are trying to use : to form key-value pairs which is supposed to be done inside an object. So how do we use curly braces to create an object instead?

const returnObject = () => ({ firstName: "abc", lastName: "def" });

This arrow function will correctly return an object. We've just put parentheses that tells the function that we aren't opening a code block here, and then we can normally use curly braces to create an object.

"Braces have two meanings in JavaScript. At the start of a statement, they start a block of statements. In any other position, they describe an object." - Chapter 4 of “Eloquent JavaScript” by Marjin Haverbeke

const returnObject = () => {
    return { firstName: "abc", lastName: "def" };
};

Alternatively, we can just open a code block with curly braces and use the return keyword to specify the object we want to return.

Parentheses around parameter

const square = function (n) {
    return n * n;
};

const squareArrow = n => n * n;

So what we notice here is that we can omit the parentheses around the parameter list if there is only one parameter.

Thanks for reading if you've made it this far. There's another major difference between arrow functions and normal functions which is the value of this. I've tried to explain that in a separate blog, here.