Introduction To JavaScript Arrow Functions

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow functions are always function expressions; there is no arrow function declaration. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Syntax

The descriptive declarations below contain the basic syntax of an arrow function.

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

Let's declare a constant called perimeter...

const perimeter = function (value1, value2, value3) {
  return value1 + value2 + value3;
};
console.log(perimeter(5, 7, 9));

//21

That above is the old JavaScript way. With arrow functions, we have a cleaner way to write the same code. To convert to an arrow function, we remove the function keyword and put a fat arrow between the body and the parameters.

const perimeter = (value1, value2, value3) => {
  return value1 + value2 + value3;
};
console.log(perimeter(5, 7, 9));
//21

We can make this code much cleaner. Since the body of the function includes only a single line of code and returns a value, the code can be made even shorter by removing the return keyword as well as the curly braces

const perimeter = (value1, value2, value3) => value1 + value2 + value3;
console.log(perimeter(5, 7, 9));
//21

The function below takes zero parameters

const noParameter = () => "I have no parameter";
console.log(noParameter());
// Expected Output: I have no parameter

If there is only a single parameter, we don't include the parenthesis.

const square = number => number * number;
console.log(square(4));
//16

Let’s look at the regular function expression involving arrays. In the function expression below, the array method map() is used to obtain the length of the individual length of each name in the array.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

const devLength = developers.map(function (dev) {
  return dev.length;
});
console.log(devLength);
//Expected Output: Array[ 5, 5, 4, 6 ]

ES6 arrow functions provides an alternative way to write a shorter syntax compared to the function expression.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

// This statement returns the array: [5, 5, 4, 6]
developers.map(function (developer) {
  return developer.length;
});

// The regular function above can be written as the arrow function below
developers.map((developer) => {
  return developer.length;
}); // [5, 5, 4, 6]

// When there is only one parameter, we can remove the surrounding parentheses
developers.map((developer) => {
  return developer.length;
}); // [5, 5, 4, 6]

// When the only statement in an arrow function is `return`, we can remove `return` and remove
// the surrounding curly brackets
developers.map((developer) => developer.length); // [5, 5, 4, 6]

One of the factors that influenced the introduction of arrow functions was the need for shorter functions. The above function expression can be made shorter with just a single line of code.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

console.log(developers.map((dev) => dev.length));
//Expected Output: Array[ 5, 5, 4, 6 ]

Now that we know that one line function does not need braces. Let’s say we have an array of developers, each person is an object. We can use an array method called filter() to check for the developers under 28 years of age. In the example below, the first object in the array does not make the last print out of the array list because his age is above 28.

const developers = [
  {
    name: "Nnochiri Ezekiel",
    age: 45,
  },
  {
    name: "Okpara Favour",
    age: 26,
  },
  {
    name: "Eze Bernardine",
    age: 23,
  },
  {
    name: "Mere Daniel",
    age: 27,
  },
];

const under28 = developers.filter(developer => developer.age < 28);
console.log(under28);
/*
Expected Output: [ { name: 'Okpara Favour', age: 26 },
  { name: 'Eze Bernardine', age: 23 },
  { name: 'Mere Daniel', age: 27 } ]
*/

Let’s explore another method of finding the first object in the array which seems to have been excluded because of its age.

const developers = [
  {
    name: "Nnochiri Ezekiel",
    age: 45,
  },
  {
    name: "Okpara Favour",
    age: 26,
  },
  {
    name: "Eze Bernardine",
    age: 23,
  },
  {
    name: "Mere Daniel",
    age: 27,
  },
];

//const under28 = developers.filter(developer => developer.age < 28)

const developer = developers.find(developer => developer.age === 45);
console.log(developer.name);
//Expected Output: Nnochiri Ezekiel

Arrow function make functional programming code look cleaner and solve closure problems with readable and minimal syntax.