Regular vs Arrow Functions: What is the Difference

JavaScript offers two different types of functions: regular functions and arrow functions.

While both types of functions can be used to accomplish the same task, they have some key differences that can impact how they are used in a codebase.

In this blog post, we will explore the differences between regular and arrow functions, and provide guidance on when to use each.

Regular Functions

A regular function in JavaScript is defined using the keyword “function”, followed by the name of the function, a set of parentheses, and a set of curly braces.

Here is an example of a regular function that takes no arguments and simply logs “Hello, world!” to the console:

function sayHello() {
  console.log("Hello, world!");
}

One of the key features of regular functions is that they have their own “this” keyword.

The value of “this” is determined by how the function is called, and can be set using the call(), apply(), and bind() methods.

Here’s an example of how “this” can be set using the call() method:

function greet(name) {
  console.log("Hello, " + this.name + "!");
}

let person = {name: "John"};

greet.call(person); // Output: "Hello, John!"

Arrow Functions

An arrow function, also known as a “fat arrow” function, is defined using the “=>” operator.

The syntax is shorter and more concise than that of a regular function, and it does not have its own “this” keyword.

Here is an example of an arrow function that takes no arguments and simply logs “Hello, world!” to the console:

let sayHello = () => {
  console.log("Hello, world!");
}

The “this” keyword inside an arrow function references the “this” keyword from the surrounding scope, rather than having its own “this” keyword.

Here’s an example of how the “this” keyword behaves in an arrow function compared to a regular function:

let person = {
  name: "John",
  regularGreet: function() {
    setTimeout(function() {
      console.log("Hello, " + this.name + "!");
    }, 1000);
  },
  arrowGreet: function() {
    setTimeout(() => {
      console.log("Hello, " + this.name + "!");
    }, 1000);
  }
};

person.regularGreet(); // Output: "Hello, undefined!"
person.arrowGreet(); // Output: "Hello, John!"

Differences between Regular and Arrow Functions

In addition to the differences in how “this” behaves, there are a few other key differences to be aware of when working with regular and arrow functions.

Scoping: Regular functions have their own scope, while arrow functions use the scope of the surrounding code.
Hoisting: Regular functions are hoisted to the top of the scope, while arrow functions are not.
Arguments: Regular functions have an “arguments” keyword that can be used to access any arguments passed to the function, while arrow functions do not.
“new” keyword: Regular functions can be used with the “new” keyword to create new objects, while arrow functions cannot.

Use Cases

So when should you use regular functions and when should you use arrow functions? Here are a few general guidelines to keep in mind:

Use regular functions when you need to set the “this” keyword explicitly or when you need to use the “arguments” keyword or the “new” keyword.
Use arrow functions when you want the “this” keyword to reference the surrounding scope, or when you want to use a more concise syntax.
Use arrow functions when you’re working with callbacks or closures, such as in event listeners or higher-order functions.

Here are a few specific examples of when you might use regular or arrow functions:

Use a regular function when you’re creating a constructor for a class:

function Person(name) {
  this.name = name;
}

Use an arrow function when you’re defining a function that will be passed as a callback:

setTimeout(() => {
  console.log("Hello, world!");
}, 1000);

Use an arrow function when you want to create a closure and keep the value of a variable from the surrounding scope:

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map((number) => {
  return number * 2;
});

Best practices for choosing between the two

Use arrow functions as callbacks, closures, and when you want to preserve the value of this
Use regular functions when you need to use arguments object, or when you need to use the new keyword with a constructor
Use arrow functions for short and simple functions, and regular functions for bigger and more complex functions

Conclusion

Regular and arrow functions are both powerful tools in the JavaScript developer’s toolbox, and understanding the differences between them is key to writing efficient and maintainable code.

Regular functions are useful when you need to set the “this” keyword explicitly or use the “arguments” keyword or the “new” keyword, while arrow functions are useful when you want the “this” keyword to reference the surrounding scope, or when you want to use a more concise syntax.

Keep these guidelines in mind when choosing between regular and arrow functions, and always strive to write clean, readable, and well-structured code.

Additional Resources

This post should provide you a good understanding of the key differences between regular and arrow functions in JavaScript, their use cases and best practices.

I hope this post has been helpful and informative.