Arrow functions in JavaScript. How to easily implement them?

This post was originally published on webinuse.com

Arrow functions were introduced in ES6, as a way to make code more readable and concise. Regular functions can be overkill for some tasks. Arrow functions have a simple syntax, but they also have some limitations.

As per MDN there are differences and limitations:

• Does not have its own bindings to this or super, and should not be used as methods.
• Does not have new.target keyword.
• Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
• Can not be used as constructors.
• Can not use yield, within its body.

This is the basic syntax for arrow functions:

const func = (arg, arg2, arg3, arg4, ....., argN) => expression

//If this arrow function was regular function it would look like this

function name(arg, arg2, arg3, arg4, ....., argN) {
    return expression;
}

In the example above we can see the regular arrow function. But there are some differences, more accurately, there can be some differences.

Arrow functions without arguments

If the arrow function has no arguments we just use empty parentheses ().
NOTE By default arrow function assumes return statement if we use a one-liner like in the example above, or below.

const func = () => expression;

//this is equal to

function name () {
    return expression;
}

With one argument

If the arrow function has only one argument, we do not need to use parentheses ().

const func = a => expression;

//this is equal to 
function name(a) {
    return expression;
}

With two or more arguments

Sometimes we have more than one or no argument. In that case we use parentheses ().

const func = (arg, arg2, arg3, arg4, ....., argN) => expression

//this is equal to

function name(arg, arg2, arg3, arg4, ....., argN) {
    return expression;
}

Multiline arrow function

Maybe we need to do something before we return an expression. That would, probably, mean more than one line of function. In that case, we MUST use curly braces {}. Also, when we use curly braces we MUST use return statement because the function does not know what we want to do.

const func = (a,b) => {
    let c = a+b;
    return c;
}

//this is equal to

function name(a,b) {
    let c = a + b;
    return c;
}

When to use arrow functions?

We can use them whenever we "feel like it". There are no strict rules on when (not) to use them, as long as we are aware of implications.

Arrow functions are awesome when we want to have smaller and more readable code. Even though that is not always the case, but 90% of situations it is.

People are using them for example with .map() method.

    const n = [2, 4, 6, 8, 10];
    const r = n.map(item => item * 2);

    console.log(r);
    //Output: [4, 8, 12, 16, 20]

Also, we can use them with the ternary operator.

const button = (loggedIn) ? () => welcome : () => login;

In the example above if a user is logged in then we show a welcome message, otherwise, we show the login button. Assuming that welcome and login are holding such data, respectively.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like JavaScript sort method – part 2.