What is an Arrow Function? - Part 1

Arrow functions are introduced in ES6, which allows you to write functions in JavaScript more precisely. They enable us to write shorter function syntax. Arrow functions improve the readability and structure of your code.

Anonymous functions are arrow functions (the functions that do not have a name and are not associated with an identifier). They produce no output and can be used without the function keyword. Arrow functions may not be used as constructors. The context of the arrow functions can be specified lexically or statically. In other languages, they are known as Lambda.

The use of the arrow function syntax reduces the size of the code. Using the arrow function allows us to write less code.

From function to arrow function

In JavaScript, there are several ways to write a function. You could either define and name a function or define a variable and assign it to an anonymous function.

Example:

function multiply(a, b) {
   return a * b;
}

Can be written as:

const multiply = function(a, b){
   return a * b;
}

Take note of how we defined a variable multiply and then assigned it to a function with two parameters, a and b.

Let's rewrite using the arrow function by following these two steps:

1. remove the function keyword
2. add an arrow function, also called fat arrow => between the parameters (a, b) and the opening curly brace {

Example:

const multiply = (a, b) => {
   return a * b;
}

Arrow functions always begin with the parameters, then the arrow =>, and finally the function body.

In ES5, the return statement must be defined in the functions, but in ES6, the return statement is not required for single-line functions. For single-line functions, functional braces are also optional.

// ES5
function show(value){
return value/2

// ES6
let show = value => value/2;
console.log(show(50));

Array.forEach() using the arrow function

// Without the fat arrow
const ages = [10, 15, 22, 45];

ages.forEach(function(ages) {
   console.log(ages);
});

// With the fat arrow
ages.forEach((grade) => {
   console.log(ages);
});

Because the arrow function only has one parameter, the parentheses () surrounding the parameter are unnecessary.

ages.forEach(grade => {
  console.log(grade);
});

The arrow function lexically or statically binds the context. This is handled differently in arrow functions than in regular functions. There is no binding of this in the arrow function. This keyword is used in regular functions to represent the objects that called the function, which could be a window, a button, a document, or anything else.

//ES5
this.num.forEach(function(num) {
  if(num < 20)
   this.child.push(num);
}.bind(this));

//ES6
this.num.forEach(num => {
  if(num < 20)
    this.child.push(num);
});

This keyword, however, always represents the object that defines the arrow function when used with arrow functions.

We do not need to bind it implicitly when using the arrow function because it performs automatically.

Array.filter() using the arrow function

// Without the fat arrow
const ages = [10, 15, 22, 25];

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

// With the fat arrow
let agesAboveTwentyOne = ages.filter(age => {
    return age > 21;
});
console.log(agesAboveTwentyOne); //[22, 25]

Because the arrow function only has one parameter, the parentheses () surrounding the parameter are unnecessary.

Please share your thoughts in the comments section below. I'd love to hear your thoughts. Or please drop by and say '👋'.