6 Differences Between Arrow Functions and Regular Functions in JavaScript

Functions are an essential part of JavaScript that you need to use to write reusable code. The two main types of function are regular and arrow functions, and there are many ways to define them.

Even though they fill similar needs, they have a few critical differences that can fundamentally influence how you use them in your code. Learn all about several differences between arrow functions and regular functions.

1. Syntax Differences

The syntax you choose when developing JavaScript functions has a big impact on how simple it is to read and comprehend your code. The syntax of regular and arrow functions differ significantly, impacting how you write and use them.

JavaScript arrow functions use a smaller language structure that is more understandable. You can use them to create functions by combining them into a single expression or statement.

        const add = (a, b) => a + b;

In this example, the add function accepts two inputs, a and b, and returns their total. The => sign defines this as an arrow function.

On the other hand, defining a regular function requires the use of the function keyword, with a more verbose syntax, as shown in this example:

        function add(a, b) {
  return a + b;
}

In this example, the function keyword defines a regular function which also uses curly braces and the return statement.

Regular functions are more useful for complex syntax requiring multiple statements or expressions. In contrast, arrow functions use a more concise syntax that can make your code easier to read and understand.

2. Scoping Differences

The term "scoping" describes how a function's internal variables and functions are accessible. In JavaScript, you define and access variables and functions throughout your code using scoping. Their distinct scoping can significantly impact how you write and use JavaScript's arrow and regular functions.

In scoping, how arrow functions handle the this keyword differs significantly from how normal functions do. Regular functions define the this keyword themselves; therefore, it can change depending on the context in which you invoke the function.

On the other hand, because they do not specify the this keyword, arrow functions use the same this as the static scope surrounding them.

To see the difference, check out the following example. Let's say you have a person object with a name property and a method called sayName() that logs the person's name using a regular function:

        const person = {
  name: 'John,'

  sayName: function() {
    console.log(this.name);
  }
};

person.sayName();  // logs 'John'

Here, the regular sayName() function is a method of the person object and the this keyword inside that function refers to that person object.

Let's now try the same thing with an arrow function:

        const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

person.sayName();  // logs undefined

Because the arrow function used in the sayName() method does not define its own this keyword, it uses the this of the static scope that surrounds it. In this case, that’s the global scope of the instance.

As a result, when you call person.sayName(), you get undefined rather than "John." This can significantly impact how you write and use functions in your code.

3. Use Cases and Best Practices

Regular functions are better suited for functions that require their own this keyword, such as methods in an object.

Arrow functions are better suited for functional programming and callbacks that do not require this keyword.

4. Function Binding Differences

Function binding is the term used to describe the relationship between this keyword and functions in your code. The variations in function binding between arrow functions and normal functions can strongly impact how you construct and use arrow functions.

Using the this keyword makes it unique in regular functions and associates with various objects based on the method used to call the function. Function binding is one of the most important distinctions between regular and arrow functions.

In contrast, arrow functions do not have this keyword; rather, they get it from the surrounding scopes.

Let's look at an example to understand more on this difference. Assume you have a person object with a name field and a method called sayName() that uses a regular function to record the person's name:

        const person = {
  name: 'John',

  sayName: function() {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson);  // logs 'Jane'

In this example, you call the person object's sayName() method with the value anotherPerson using the call() method. Because of this, the sayName() method, this, keyword is bound to the anotherPerson object, and it logs "Jane" rather than "John."

Let's now use the same thing with an arrow function:

        const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson);  // logs undefined

Since the sayName() technique doesn't have its own keyword, you're using an arrow function within it in this example. In this case, the arrow function inherits the properties of the surrounding scope, which is the global scope.

This means that when you run person.sayName.call(anotherPerson), the arrow function's this keyword remains the global object, and undefined takes the place of Jane in the log.

If you need to bind a function to a specific this value, an ordinary function may be preferable. However, if you don't need to bind a function to a specific this value, an arrow function might be shorter and easier to understand.

5. Implicit Return

Arrow function have an implicit return feature. If the function body consists of one single expression, the functions returns that expression.

As an example:

        const double = (x) => x * 2;

This arrow function returns a double from a parameter. You do not need to use an explicit return keyword because the function body only has one expression.

6. Compatibility Differences

Compatibility differences refer to the ECMAScript 6 added arrow functions, which may not work with older browsers or environments. On the other hand, regular functions have been around since the beginning of JavaScript and are widely supported.

Here is an illustration of an arrow function that may not work in more established conditions:

        const add = (a, b) => a + b;

The following is a comparable regular function that ought to work in most situations:

        function add(a, b) {
  return a + b;
}

Use regular functions rather than arrow functions when targeting older environments to ensure compatibility. However, arrow functions can provide a syntax that is easier to understand and more condensed when working with modern browsers and environments.

Choosing Between Arrow Functions and Regular Functions in JavaScript

In JavaScript, arrow and regular functions have distinct features and applications. Arrow functions have a simple syntax, inheriting this keyword term from the context of their use while regular functions are more adaptable and can deal with more complex situations.

It is critical to know how they differ and how to use them as per your code's requirements. When selecting which kind of function to use, you should also consider compatibility differences.

Ultimately, JavaScript's arrow and regular functions are powerful tools that help you write cleaner and more efficient code.