Deep Tech Point - learn tech easy way

In this article, you are going to learn the difference between arrow functions vs traditional (regular) functions in JavaScript through a few examples – we are going to browse through differences and similarities and learn when to use each.

So, what are arrow functions, and how are they different from traditional or regular or normal functions in JavaScript?

Arrow functions have been introduced in ECMAScript in 2015 and they enable a coder to achieve the same result with about half the typing. So, the same result, but less code. Great, isn’t it? We could compare arrow functions to Ruby’s blocks or lambda functions in Python, however, they have more complex details.

Below we will take a glance at the basic syntax of an arrow function:

// arrow function with one parameter
parameter => expression

/* In a case of multiple parameters arrow functions require parentheses, 
but return keyword is not needed */
(parameter1, parameter2) => expression

/* In a case of multiline statements, 
arrow functions require body brackets and return */
parameter => {
  let x = 10;
  return x + paramameter;
}

/* When there are multiple parameters, parentheses are  required. 
In additon multiline statements require body brackets and return */
(parameter1, parameter2) => {
   let x = 10;
   return x + parameter1 + parameter2;
}

To make things more clear, let’s take go through the syntax of a regular or traditional function:

function (x) {
  return x + 5;
}

OK, and now, let’s take a look at an arrow function and break it down so we can see the difference through an example:

/* 1. The word "function" is no longer needed and there is an arrow 
positioned between the argument and opening body bracket */
(x) => {
  return x + 5;
}

// 2. Both the body brackets and the word "return" are removed 
(x) => x + 5;

// 3. The argument parentheses are removed too 
x => x + 5;

The example above shows that the brackets { } and parentheses ( ) and “return” are optional, however, in some cases they may be required. For example, if your code has multiple arguments, you will need to include parentheses around the arguments, for example:

// In traditional (regular) function syntax with multiple parameters looks like this
function (x, y){
  return x + y + 5;
}

// In an arrow function syntax with multiple parameters looks like this
(x, y) => x + y + 5;

And the same, if your code has no arguments, you will need to include parentheses around the arguments, too, for example:

// Traditional or regular function with no arguments looks like this
let x = 5;
let y = 10;
function () {
  return x + y + 3;
}

// And arrow function with no arguments looks like this: 
let x = 5;
let y = 10;
() => x + y + 3;

In addition, if the body of your code demands additional lines of processing, you will have to include brackets and the “return” keyword, because arrow functions cannot predict what or when you want to “return”, therefore the syntax, in this case, looks like this:

// Traditional or regular function with code that demands additional lines of processing
function (x, y){
  let age = 42;
  return x + y + age;
}

// Arrow function with code that demands additional lines of processing
(x, y) => {
  let age = 42;
  return x + y + age;
}

In addition, when we use functions that are named, we handle arrow expressions like variables, for example:

// Traditional or regular function looks like this
function calculate (x) {
  return x + 5;
}

// Arrow with named function looks like this
let calculate = x => x + 5;

All in one, an arrow function is a neat alternative to a traditional or regular function expression – it offers the same results with less typing, so that’s a great feature. So, yes, you should replace a traditional or regular function with an arrow function, except when you shouldn’t 🙂 Obviously, an arrow function has its limitations and cannot be used in all situations. Here is a list of situations where you should avoid them:

Usage with bind, this, and super – arrow functions do not have their own bindings to this or super. Instead, those identifiers are resolved in the lexical scope like any other variable.
When we deal with “this” in an arrow function, the “this” keyword refers to the values of this in the environment the arrow function is defined in. That scope remains the same throughout the function lifecycle and is always attached to the value of this in the closest non-arrow parent function.
Arrow functions should not be used as methods. We should use arrow function expressions for non-method functions.
Arguments objects are not available in arrow functions, but are available in regular functions.
Arrow functions do not have new.target keywords.
Arrow functions are not suitable for call, apply and bind methods, because they all rely on establishing a scope.
One of the greatest advantages of using arrow functions is with methods such as setTimeout, setInterval, and addEventListener, because these methods require some kind of closure, call, apply or bind to make sure the function executed in the proper scope.
Arrow functions should not be used as constructors. We recognize callable and constructible functions. When a function is constructible, it can be called with new, and if a function is callable, it can be called without new. We know that regular or traditional functions created through function expressions are both constructible and callable. However, arrow functions are only callable, for this reason arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.
Arrow functions should not use yield, within its body.

Arrow functions vs traditional (regular) functions in JavaScript