🏡 Home

ES6 Basics: Arrow Function Expression

ES6 introduced a new way to express function in our codes, arrow function. It is a more compact way of expressing function with some bits of difference with regular function.

Before ES6, we can do something like this to make a function:

function theFunction(objectVariable) {
  objectVariable.newProperty = "new"
  return objectVariable

In ES6 we can do the same thing with the following syntax:

const theFunction = objectVariable => objectVariable.newProperty = 'new'

It would take some time to get used to the way this syntax work. The arrow function above used some of its features to make it more concise, for example, optional parentheses on the function parameter and implicit return value.

We can also write the arrow function to looks more closely to the regular JavaScript function, for example:

const theFunction = objectVariable => {
  objectVariable.newProperty = "new"
  return objectVariable

Now the function resembled the regular function quite a bit.

The arrow function is widely used right now on ES6 based codes because it is concise and suits the flow of lots of other new JavaScript functions. For example, Array's filter, map, reduce functions. I'll get into them more in my next writings.

There are quite a lot of nuances when using the arrow function, but knowing this fundamental way of expressing the syntax would cover quite a lot of ground to be practical.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions