Deep Tech Point
first stop in your tech adventure
Home / Javascript
Arrow functions vs traditional (regular) functions in JavaScript
April 2, 2021 | Javascript

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: