Modern Javascript part 2 : an arrow (function) => right through your heart

Javascript ES6 provide a new shorter/beautiful/useful/unforgettable/so sexy/and more… way to write functions : arrow functions. Yes, I love this feature, I think you will too.

Arrow function, what is it?

First, it’s a shorter syntax

And nothing is better than a great example, with two equivalent functions :

// Normal way
const aLongFunction = function () {
  return 'uggly';
};

// Arrow function way
const aShortFunction = () => 'beautiful';

WOW!

Explanation :

• The parenthesis contains parameters, so nothing changes here.
• Then, in the arrow function, when you have only one instruction, you can omit brackets and return keyword. In this case, the function will return automatically the result of your instruction.

It’s a function without its own this

Indeed, when you use the classic syntax, you can use this inside. However, the arrow function has not its own this.

So, let’s take a look at this example :

const func = function() {
  let instance = this;
  // instance correspond to this of the current function

  let arrowFunc = () => {
    console.log(instance === this);
    // it will show true
  }
}

So, you can mix these two types of function to do what you want!

Let’s play with parameters

To continue, the syntax is really similar between arrow and classic function. So, if you want to write a sum function, you can write, for example :

// classic
const sum = function(a, b) {
  return a + b;
};

// Arrow
const sum = (a, b) => a + b;

But you can use a shorter syntax if you have only one parameter. Let’s take a look at this increment function :

// Classic
const increment = function(number) {
  return number + 1;
}

// arrow
const increment = number => number + 1;

As you can see, I omitted parenthesis between the first number. But if you want, you have the choice to let parenthesis.

And now, the arrow function return!

As I said at the start of the article, when you haven’t brackets, the first instruction after the arrow => will be returned. But if tou prefer, you can still use the same syntax as a classic function.

In other words, you can use these two syntaxes :

// short
const NO_OP = () => undefined;

// is equivalent to long :
const NO_OP = () => {
  return undefined;
};

Bonus : it’s great for the functional programming!

First, if you don’t know the functional programming, please, wait for few weeks. I will write some articles about it.

Write a curried arrow function

So, just imagine code a sum curried function without arrow function. The result can be :

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

As you see, it’s really verbose. Then, look at a possible equivalent arrow function :

const sum = a => b => a + b;

Awesome, right? :O

Conclusion

In conclusion, you have to remind that :

• Arrow functions have a shorter syntax
• They have their own this

In addition, I’ll just tell that you don’t have to replace classic functions. Because they are still needed in lots of cases when you need to use this.

Thanks for ready, have a nice day, and see you for the next article! 🙂

Go to Modern Javascript Part 3 : Desctructuring and Spread operator

Previous parts :

• Modern javascript part 1 : let and const